具有自定义 geojson 数据的 Amcharts4 地图仅显示众多要素（地理区域）中的一项？答案

【问题标题】：Amcharts4 Maps with custom geojson data only show one feature (geographical region) out of many?具有自定义 geojson 数据的 Amcharts4 地图仅显示众多要素（地理区域）中的一项？
【发布时间】：2020-07-09 16:20:30
【问题描述】：

我正在尝试使用 this 教程使用 amcharts4 的自定义地图创建地图。当我使用 amcharts geojson 库中的地图时，它可以完美运行。但是当我添加像this map 这样的不同地图时。它只显示了 geojson 特征集合的最后一个特征。我尝试按照issue 中的描述添加id，但它给了我相同的结果。有人可以帮我完成这项工作吗？

这是一个演示问题的代码笔：https://codepen.io/sankhax/pen/YzwLdJy

提前致谢。

【问题讨论】：

标签： amcharts amcharts4

【解决方案1】：

您的 GeoJSON 仍然缺少 id 属性，该属性对于您的 JSON 的 features 数组中的每个功能都必须是唯一的；本教程指出它需要位于特征对象的顶层，但在 properties 对象中包含 id 也可以，正如您在 codepen 中的另一张地图中所见。您的属性数据中存储在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>

【讨论】：

非常感谢您的回答。 :) 我使用mapshaper.org 简化了上面的地图，因为它的大小为 4MB+，但是，我的新地图显示了同样的旧错误。这是更新的代码笔codepen.io/sankhax/pen/YzwLdJy你能帮帮我吗？
您的坐标需要在clockwise order 中（请参阅上面的最后一句话）。您的积分是按逆时针顺序排列的。另请注意，您的 JSON 中仍未设置 ID。
我在这里使用你的实现 codepen.io/sankhax/pen/YzwLdJy。因此，您稍后会附加 ID。 =D 我正在关注amcharts.com/docs/v4/tutorials/creating-custom-maps 这个教程来减少地图的文件大小。它没有提到坐标需要顺时针的事实。 :( 有没有办法使用 mapshaper.org 修复它？
非常感谢。我通过使用github.com/mapbox/geojson-rewind 得到了它，再次感谢您的帮助。 =D