Question

我从mapzen地铁提取下载了.geojson文件，这些文件应该显示一个社区的轮廓。但是，当我运行我编写的javascript代码时，没有任何内容附加到“g”元素，因此没有显示任何内容。

以下是我现在的代码：

var canvas = d3.select("body").append("svg")
    .attr("width", 760)
    .attr("height", 700);

  d3.json("wayland.geojson", function (data){
      console.log(data);

      var nb = canvas.append("g")
                      .attr("class","nb");

      var group = nb.selectAll("path")
            .data(data)
            .enter()
            .append("path")
            .attr("d", d3.geoPath());
  });

有问题的geojson文件是有效的，并且是一个功能，所以我只是想知道如何正确映射这样的文件。

Object {id: 85854865, type: "Feature", properties: Object, bbox: Array(4), geometry: Object}

Answer 1

您需要为d3.geoPath()定义投影，如果您未指定投影，则d3默认为空投影。空投影采用地理坐标，只需将它们转换为svg / canvas坐标，根本不进行转换。因此，如果您的geojson中有纬度/长度对，则只显示从0,0到90,180的点，因此西部或南部半球的任何部分都不起作用。但是，不会产生任何错误，因为null投影和geoPath按预期工作。

注意，d3投影采用使用WGS84基准面的坐标，即使用WGS84椭圆体的纬度经度对，通常大多数纬度长对将使用此数据（GPS，谷歌地球等）。如果您的数据已经预测，那么d3 geoProjections不是您所需要的，您需要geoTransforms

尝试定义投影，而不是使用空投影。有几种方法可以做到这一点，一种是fitExtent方法（因为你使用的是d3 v4）：

    var projection = d3.geoMercator()
      .fitExtent([[40,40],[width-40,height-40]], geojson);

这将采用一组geojson特征（不是topojson），并使用墨卡托地图投影在特征周围放置一个40像素的缓冲区。

另一种选择是查看您的bbox坐标并查找您感兴趣的区域的中心（或使用Google地球等）并手动设置投影：

var projection = d3.geoAlbers()
    .center([0,y])
    .rotate([-x,0])
    .scale(10000);

缩放时缩放值会增加，因此从较低的值开始始终有用，以确保您在正确的区域中查找。邻居级别的细节会非常放大。

投影类型在邻域级别不会太重要，但正确设置参数将是。

最后，您需要确保您的geoPath使用您的投影：

geoPath.projection(projection);

如何用d3映射mapzen边界提取？

1 个答案: