在d3.js中绘制已经投影的geoJSON地图


Drawing already projected geoJSON map in d3.js

使用d3.js的v3版本时，我在使用geoJSON数据绘制地图时遇到了问题。代码和结果图显示在：http://bl.ocks.org/73833ec90a8a77b0e29f。此示例使用d3.js的v2版生成正确的地图。

  • 我的数据已经被投影了(它们是荷兰国家网格/ Rijksdriehoekstelsel坐标)。为了弥补这一点，我编写了自己的投影函数，该函数仅将地图的坐标系转换为像素(例如缩放和平移)。
  • d3.js v3中的d3.geo.path()重新采样数据。但是，在重采样中生成的点似乎与我的地图不在同一坐标系中(我假设它们是lon，lat坐标)。

    • 我宁愿不要将地图的坐标转换为经纬度坐标，因为该地图已经按照我想要的方式进行了投影，据我所知这并不是一个简单的投影。

    如果问题确实是由重采样引起的，我想禁用重采样。但是，在文档中，我实际上找不到如何执行此操作。无需将投影函数传递给d3.geo.path.projection()，而是可以传递流对象。我认为以下方法会起作用：

    1
    2
    3
    var projection = d3.geo.projection(function(x, y) {
        return [ scale*(x-xmin), height-scale*(y-ymin) ];
      }).precision(0);

    但事实并非如此。可能与我没有纬度，经度坐标有关。如何使用自定义投影功能禁用重采样？

    或者，当其他原因引起问题时，我想听听。

    谢谢。

    我最近遇到了同样的问题。

    这样做的方法是明确告诉d3您不需要投影。
    答案在此链接中。

    1
    2
    3
    4
    "If projection is null, the path uses the identity transformation, where the input
    geometry is not projected and is instead rendered directly in raw coordinates. This can be
    useful for fast rendering of already-projected geometry, or for fast rendering of the
    equirectangular projection."

    所以你想拥有

    1
    var path = d3.geo.path().projection(null);

    然后，像这样

    1
    2
    3
    4
    g.selectAll("path")
                .data(json.features)
                .enter().append("path")
                .attr("d", path)
    相关讨论

    响应user603124的回答，我再次看了这个问题(到目前为止，我坚持使用d3.js的v2)。 创建对象的最初想法是可行的。 但是，在我最初的实现中，缩放和缩放错误。 使用另一个问题的答案来正确缩放和缩放：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
      var height = 400;
      var width  = 400;

      var vis = d3.select("#vis").append("svg")
          .attr("width", width).attr("height", height)

      d3.json("po_2012_simplified.json", function(json) {

          var projection = d3.geo.projection(function(x, y) { return [x, y];})
            .precision(0).scale(1).translate([0, 0]);

          var path = d3.geo.path().projection(projection);

          var bounds = path.bounds(json),
              scale  = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
                      (bounds[1][1] - bounds[0][1]) / height),
              transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
                      (height - scale * (bounds[1][1] + bounds[0][1])) / 2];

          projection.scale(scale).translate(transl);

          vis.selectAll("path").data(json.features).enter().append("path")
            .attr("d", path)
            .style("fill","#D0D0D0")
            .style("stroke-width","0.5px")
            .style("stroke","black")
        });

    有关完整的工作解决方案，请参见http://bl.ocks.org/djvanderlaan/5336035。

    相关讨论