javascript - 带阿尔伯斯投影的 D3.js map : How to rotate it?

Question

我正在使用 d3.js 构建菲律宾 map ，但由于一个奇怪的原因，该 map 看起来像是向左旋转，因此该国看起来并不真实。 我尝试修改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

如果您不知道底层的转换，阿尔伯斯投影可能会有点棘手。除非显示美国(d3.geoAlbers 的参数默认为美国)，否则您可能需要修改纬线、旋转和中心。

标准并行

这是一个阿尔伯斯投影，其纬线设置为 10 和 15 .parallels([10,15])，如您的问题所示，比例为 100(并且旋转和中心设置到 [0,0]):

这种形状是由于投影的圆锥形性质造成的。如果选择南纬线，则凹度会反转。更极端的纬度/纬度将导致更大的弯曲。

所选纬线应穿过您感兴趣的区域，因为纬线附近的区域失真最小。

旋转

如果我们想说，请关注澳大利亚(为了演示，我将保持与上图相同的相似之处):

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

唯一的变化是澳大利亚更大了，但它仍然像在 map Angular 落时一样扭曲并且更小。它被上/下、左/右移动，然后放大，没有其他转换。

正如您的问题推测的那样，旋转是显示不靠近本初子午线的区域问题的解决方案。

如果我们将第一个 map (与第二个 map 相同)旋转 100 度经度.projection.rotate([100,0])，我们得到:

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

居中

如果我们感兴趣的区域是中美洲(您使用的平行线 - 我一直在使用 - 将适用)，那么下一步就是沿着投影的中央子午线上下移动 map 的中心。对于中美洲，此偏移可能为 20 度:.projection.center([0,20])。如果使用适当的比例，假设为 1000，结果将如下所示:

菲律宾

因此，对于菲律宾，使用中心坐标 [122.427150, 12.499176] 和平行线，理想的阿尔伯斯投影可能如下所示:

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

这对我来说产生了:

摘要

对于阿尔伯斯:

projection.parellels([a,b])
  .rotate([-x,0])
  .center([0,y])
  .translate([w/2,h/2])

其中 a 和 b 是与感兴趣区域相交的纬线，y 是中心纬线，x code> 是中央子午线。

如果使用方法 (projeciton.fitSize/projection.fitExtent) 自动居中和缩放要素，则无需使用中心和旋转方法，但您仍然必须先设置平行线和旋转。