具有自定义 geojson 数据的 Amcharts4 地图仅显示众多特征(地理区域)中的一个?
Amcharts4 Maps with custom geojson data only show one feature (geographical region) out of many?
我试图使用 this tutorial. It works perfectly when I used a map from amcharts geojson library. But when I add a different map like this map. It only shows the last feature of geojson feature collection. I tried adding a id
as described here in this issue 使用 amcharts4 的自定义地图创建地图,但它给了我相同的结果。有人可以帮我完成这项工作吗?
这里是演示问题的代码笔:https://codepen.io/sankhax/pen/YzwLdJy
提前致谢。
您的 GeoJSON 仍然缺少 id
属性,这对于您 JSON 的 features
数组中的每个要素都必须是唯一的;本教程指出它需要位于要素对象的顶层,但在 properties
对象中有一个 id
也可以,正如您在代码笔中的其他地图中看到的那样。您的属性数据中存储在 electoralDistrictCode
中的值很适合 id
:
[{
"type": "Feature",
"id": "MON",
"properties": {
"electoralDistrictCode": "MON",
"electoralDistrict": "Monaragala",
// ...
},
"geometry": {/* ... */}
},{
"type": "Feature",
"id": "ANU",
"properties": {
"electoralDistrictCode": "ANU",
"electoralDistrict": "Anuradhapura",
// ...
},
"geometry": {/* ... */}
},
// ...
]
将此添加到 JSON 后,您的地图将在 AmCharts v4 中正确呈现。下面的演示,使用手动 AJAX 请求来改变 JSON 以与库一起工作:
var map = am4core.create("chartdiv", am4maps.MapChart);
// indonesia geojson
fetch(
"https://raw.githubusercontent.com/GayanSandaruwan/elections/master/electoral_with_results.geojson"
)
.then(function(resp) {
if (resp.ok) {
return resp.json();
}
throw new Error("Unable to fetch json data");
})
.then(function(data) {
//add the missing id property before assigning it to the map
data.features.forEach(function (feature) {
feature.id = feature.properties.electoralDistrictCode;
});
map.geodata = data;
});
map.projection = new am4maps.projections.Miller();
var polygonSeries = new am4maps.MapPolygonSeries();
polygonSeries.useGeodata = true;
map.series.push(polygonSeries);
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
我试图使用 this tutorial. It works perfectly when I used a map from amcharts geojson library. But when I add a different map like this map. It only shows the last feature of geojson feature collection. I tried adding a id
as described here in this issue 使用 amcharts4 的自定义地图创建地图,但它给了我相同的结果。有人可以帮我完成这项工作吗?
这里是演示问题的代码笔:https://codepen.io/sankhax/pen/YzwLdJy
提前致谢。
您的 GeoJSON 仍然缺少 id
属性,这对于您 JSON 的 features
数组中的每个要素都必须是唯一的;本教程指出它需要位于要素对象的顶层,但在 properties
对象中有一个 id
也可以,正如您在代码笔中的其他地图中看到的那样。您的属性数据中存储在 electoralDistrictCode
中的值很适合 id
:
[{
"type": "Feature",
"id": "MON",
"properties": {
"electoralDistrictCode": "MON",
"electoralDistrict": "Monaragala",
// ...
},
"geometry": {/* ... */}
},{
"type": "Feature",
"id": "ANU",
"properties": {
"electoralDistrictCode": "ANU",
"electoralDistrict": "Anuradhapura",
// ...
},
"geometry": {/* ... */}
},
// ...
]
将此添加到 JSON 后,您的地图将在 AmCharts v4 中正确呈现。下面的演示,使用手动 AJAX 请求来改变 JSON 以与库一起工作:
var map = am4core.create("chartdiv", am4maps.MapChart);
// indonesia geojson
fetch(
"https://raw.githubusercontent.com/GayanSandaruwan/elections/master/electoral_with_results.geojson"
)
.then(function(resp) {
if (resp.ok) {
return resp.json();
}
throw new Error("Unable to fetch json data");
})
.then(function(data) {
//add the missing id property before assigning it to the map
data.features.forEach(function (feature) {
feature.id = feature.properties.electoralDistrictCode;
});
map.geodata = data;
});
map.projection = new am4maps.projections.Miller();
var polygonSeries = new am4maps.MapPolygonSeries();
polygonSeries.useGeodata = true;
map.series.push(polygonSeries);
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>