0

我想在我的网站上添加荷兰的省份数据地图。但是，我以前从未使用过自定义数据图。我相信我有正确的数据格式（geoJSON）。我通过将其复制到记事本并保存为 geo_netherlands.json 来保存它。

我尝试像这样加载数据图：

var map = new Datamap({
    element: document.getElementById('map_netherlands'),
    geographyConfig: {
        dataUrl: 'data/geo_netherlands.json'
    }
});

导致

TypeError: a is null

这是什么意思？调用Datamap的时候要不要给更多的参数，json文件不好吗？

4

1 回答 1

4

您已经非常接近了，但是绘制这张地图还需要更多参数。

第一个问题是您正在使用dataUrl但试图访问本地数据。您应该实际使用dataJson（未记录）。

其次，您需要通过scope参数指定要在 TopoJSON 中使用的几何图形。查看您生成的 TopoJSON，这恰好是“集合”。

您还需要为容器指定宽度和高度，以便地图有一些空间可以绘制（否则height在 HTML 中默认为 0）。

最后，您需要设置自定义投影以将地图聚焦在荷兰并放大。

总而言之，JS看起来像：

var map = new Datamap({
        element: document.getElementById('map_netherlands'),
        scope: "collection",
        geographyConfig: {
            dataJson: data
        },
       setProjection: function(element) {
       var projection = d3.geo.mercator()
         .scale(3000)
         .center([0, 52])
         .rotate([-4.8, 0])
         .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
      var path = d3.geo.path()
         .projection(projection);

      return {path: path, projection: projection};
     },
    });

有关设置项目和生成自定义数据的更多信息，我推荐：http ://bost.ocks.org/mike/map/

我强烈建议您查看 Bostock 的帖子，尤其是在他生成 TopoJSON 并指定 的地方--id-property，这对于您定位任何特定区域（例如，创建 choropleth）是必要的。

工作的 JSFiddle 在这里：http: //jsfiddle.net/L767kzpy/4/

于 2016-01-12T01:27:45.513 回答