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

Question

我从 Mapzen Metro 提取中下载了 .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 的点，因此西半球或南半球的任何点都不起作用。但是，不会产生任何错误，因为零投影和 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)，并使用墨卡托 map 投影在这些特征周围放置一个 40 像素的缓冲区。

<小时/>

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

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

比例值会随着放大而增加，因此从较小的值开始始终有助于确保您查看的是正确的区域。不过，社区级别的详细信息将被放大。

<小时/>

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

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

geoPath.projection(projection);