GeoJson amchart映射geoJson有什么问题?

时间:2017-01-20 06:18:03

标签: javascript json geojson amcharts

我对ammCharts相对较新,这也是我第一次尝试创建geoJSON文件。

以下是我的geoJson文件:

GeoJSON file

这是我想要实现的目标: example

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

因此只有一个多边形正在工作。由于某种原因,我遇到了问题,无法编写代码的jsfiddle或codepen。我相信我的geoJSON中出现了问题,因为我已经加载了其他随机Geojson文件,它们与amcharts创建的codepen工作正常,只是我的剂量工作。

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

1 个答案:

答案 0 :(得分:4)

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

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "division": "Muzaffarabad",
        "district": "Muzaffarabad",
        "id": "Muzaffarabad",
// ... others omitted

我还修改了示例,为转换后的对象添加了"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);
  }
带有修改过的文件和示例代码的

Here's a demo。您可以找到完全修改过的geoJSON文件here