Question

我用d3.js制作菲律宾地图，由于一个奇怪的原因，地图看起来像是在左边旋转，所以这个国家看起来并不是真的。我试图修改projection.rotate字段，但似乎不是校正线。

        var width = 1060,
        height = 860;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("overflow", "auto");

    d3.json("ph.json", function(error, ph) {
      if (error) return console.error(error);

      var subunits = topojson.feature(ph, ph.objects.ph_subunits);

      var projection = d3.geo.albers();
      projection.rotate([-4 ,0]);
      projection.scale(3000);
      projection.center([122.427150, 12.499176]);
      projection.parallels([10, 15])
      projection.translate([width / 2, height / 2]);

      var path = d3.geo.path()
           .projection(projection)
           .pointRadius(2);
      svg.append("path")
        .datum(subunits)
        .attr("d", path);

    });

这是代码。

任何帮助都会很棒！

谢谢！

Answer 1

如果您不了解潜在的转变，Albers的预测可能会有点棘手。

这是默认的Albers投影，其平行线设置为10和15 .parallels([10,15])，如您的问题所示，且刻度为100（旋转和中心默认为[0,0]）：

这种形状是由于投影的锥形性质。如果选择南方平行线，则凹面反转。更极端的纬度/纬线将导致更大的弯曲。选择的平行线应该贯穿您感兴趣的区域，因为平行线附近的区域是失真最小化的区域。

如果我们想说，请关注澳大利亚（为了示范，我会保持与上图相同的平行线）：

我们可以简单地使用澳大利亚的地理中心作为投影的中心.projection.center([x,y])并缩放到适当的级别.projection.scale(1000)：

唯一的变化是澳大利亚更大，它仍然像地图一角那样扭曲而且更小。它向上/向下和向左/向右移动，然后放大而没有其他变换。

正如你的问题所推测的那样，轮换是解决显示不在本初子午线附近区域的问题的解决方案。

如果我们将第一张地图（与第二张地图相同）旋转100度经度.projection.rotate([100,0])，我们就会得到：

世界旋转了100度，垂直穿过地图中心的假想线与经度-100度或西经100度的子午线对齐。

如果我们感兴趣的区域是中美洲（您使用的相似之处 - 我将继续使用 - 将会起作用），那么下一步就是沿着投影上下移动地图的中心＆＃39 ;中央子午线。对于中美洲，这种转变可能是20度：.projection.center([0,20])。使用适当的比例，让我们说1000结果将如下所示：

因此，对菲律宾而言，使用您的中心坐标[122.427150,12.499176]和平行线，理想的Albers投影可能看起来像：

        projection.rotate([-122.427150,0])
              .center([0,12.499176])
              .scale(1200)
              .parallels([10,15]);

对我来说产生了：

D3.js地图：如何旋转它？

1 个答案: