具有自定义 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>