GeoJson amchart 映射 geoJson 有什么问题?

ham*_*dkh 6 javascript json geojson amcharts

我对 ammCharts 比较陌生,这也是我第一次尝试创建 geoJSON 文件。

以下是我的 geoJson 文件:

GeoJSON 文件

这就是我想要实现的目标: 示例

当我加载我的 geoJson 时,会发生以下情况: 我的地图

所以只有一个多边形在工作。出于某种原因,我遇到了问题,无法制作代码的 jsfiddle 或 codepen。我相信我的 geoJSON 有问题,因为我加载了其他随机 Geojson 文件,它们与 amcharts 创建的 codepen 一起工作正常,只是我的工作。

我正在使用geojson.io创建 geoJson。

xor*_*ark 7

您的 geoJSON 的问题在于它缺少 id。AmCharts 的地图需要每个地区的唯一 ID。由于"id"在您的任何区域中都没有设置属性,它们都将默认为 null,只允许突出显示其中一个区域。我修改了您的 JSON 并添加了与每个区域中的地区具有相同值的 ID,如下所示:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "division": "Muzaffarabad",
        "district": "Muzaffarabad",
        "id": "Muzaffarabad",
// ... others omitted
Run Code Online (Sandbox Code Playgroud)

我还修改了示例以"title"向转换后的对象添加一个属性,以便默认情况下将鼠标悬停在该区域上时可以获得该区域的名称:

  for(var i = 0; i < svg.length; i++) {
    var path = svg[i];
    var attrs = path.match(/\w+=".*?"/g);
    var area = {};
    for(var x = 0; x < attrs.length; x++) {
      var parts = attrs[x].replace(/"/g, '').split("=");
      var key = fieldMap[parts[0]] || parts[0];
      area[key] = parts[1];
    }
    //added for hover-over balloons
    area["title"] = area["id"];
    mapVar.svg.g.path.push(area);
  }
Run Code Online (Sandbox Code Playgroud)

这是一个带有修改后的文件和示例代码的演示。您可以在此处找到完全修改的 geoJSON 文件。