D3.js带有Albers投影的地图:如何旋转它? [英] D3.js Map with Albers Projection: How to rotate it?

问题描述

我正在使用d3.js绘制菲律宾地图，出于一个奇怪的原因，该地图看起来像是向左旋转，因此该国家看上去并没有真正的样子. 我尝试修改了projection.rotate字段，但似乎不是校正线.

I'm building a map of the Philippines with d3.js and for a strange reason the map looks like rotated on the left, so that the country doesn't look how it really is. I've tried to modify the projection.rotate field but doesn't seems like is the correction line.

    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);

    });

这是代码.

任何帮助都会很棒！

谢谢！

推荐答案

如果您不了解基本转换，那么阿尔伯斯投影可能会有些棘手.除非显示美国(d3.geoAlbers的参数默认为美国)，否则您可能需要修改平行度，旋转和中心.

Albers projections can be a bit tricky if you don't know the underlying transformations. Unless showing the US (for which the parameters of d3.geoAlbers are defaulted to), you'll likely need to modify the parallels, rotation, and center.

标准并行

这是一个albers投影，其平行度设置为10和15 .parallels([10,15])，如您所问，比例为100(旋转和中心设置为[0,0]):

This is an albers projection with its parallels set to 10 and 15 .parallels([10,15]), as in your question, and a scale of 100 (and with rotation and center set to [0,0]):

此形状归因于突起的圆锥形性质.如果选择南部平行线，则凹面将反转.更大的纬度/纬度会导致更大的弯曲度.

This shape is due to the conical nature of the projection. If southern parallels are chosen, the concavity is reversed. More extreme latitudes/parallels will result in a greater bend.

所选的平行线应穿过您感兴趣的区域，因为平行线附近的区域可使失真最小化.

The parallels selected should run through your area of interest as the area near the parallels is where distortion is minimized.

旋转

如果我们想说的话，请关注澳大利亚(为演示起见，我将与上图相同)

If we wanted to say, focus on Australia (I'll keep the parallels the same as the image above for the sake of demonstration):

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

We could simply use the geographic center of Australia as the center of the projection .projection.center([x,y]) and scale to an appropriate level .projection.scale(1000):

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

The only change is that Australia is bigger, it is still as distorted as when it was in the corner of the map and smaller. It was shifted up/down and left/right and then magnified with no other transformations.

根据您的问题推测，旋转是解决显示不位于本初子午线附近区域的问题的解决方案.

As your question surmises, rotation is the solution to the problem of showing areas not near the prime meridian.

如果将第一张地图(与第二张地图相同)旋转100度经度.projection.rotate([100,0])，则会得到:

If we rotate the first map (which is the same as the second map) by 100 degrees of longitude .projection.rotate([100,0]), we get:

世界旋转了100度，垂直于地图中心绘制的假想线与经度-100度或西经100度的子午线对齐.

The world has spun 100 degrees, and an imaginary line drawn vertically through the center of the map aligns with the meridian at -100 degrees of longitude or 100 degrees west.

居中

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

If our area of interest is Central America (for which the parallels you used - and I have continued to use - will work for) then the next step is to shift the center of the map up and down along the projection's central meridian. For Central America, this shift might be 20 degrees : .projection.center([0,20]). With an appropriate scale, let's say 1000 the result will look like:

菲律宾

因此，对于菲律宾，使用您的中心坐标[122.427150，12.499176]和平行线，理想的阿尔伯斯投影可能看起来像:

So, for the Philippines, using your center coordinate [122.427150, 12.499176] and parallels, an ideal Albers projection might look like:

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

对我来说哪个产生了:

Which for me yielded:

摘要

对于阿尔伯斯人:

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

其中a和b是与感兴趣区域相交的平行线，y是中央平行线，并且x是中央子午线.

Where a and b are parallels that intersect the area of interest, y is the central parallel, and x is the central meridian.

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

If using a method (projeciton.fitSize/projection.fitExtent) to automatically center and scale a feature, you don't need to use the center and rotate methods, but you must still set parallels and rotation first.

这篇关于D3.js带有Albers投影的地图:如何旋转它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！