d3.geo.path 矩形环绕方式错误

Question

这个简单的 geojson 矩形在某些 geojson 查看器中正确显示，我得到了预期的矩形。但是当我用 d3 做时，矩形似乎环绕。

var polygonData = {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [ -100, -20 ],
            [ -100, 20 ],
            [ 100, 20 ],
            [ 100, -20 ],
            [ -100, -20 ]
          ]
        ]
      },
      "properties": {}
    };
    
    var width = 1000;
    var height = 500;
    
    var projection = d3.geo.equirectangular()
      .scale(100)
      .translate([width / 2, height / 2])
      .rotate([0, 0])
   .center([0, 0])
      .precision(0);
    
    var path = d3.geo.path()
    .projection(projection);

    var svg = d3.select("body").append("svg")
      .attr({
        width: width,
       height: height
      });

    svg.append('path')
      .datum(polygonData)
      .attr({
        d: path,
        fill: 'orange',
        opacity: 0.5
      });

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
  </style>
</head>

<body>

</body>

这是我用 geojson viewer:

得到的结果

但这是我从上面得到的 d3 code:

反转缠绕顺序只会填充相反的形状，并不能解决问题。我想这是一个反子午线切割问题。一种解决方法是添加一些中间点以强制路径不环绕，但我需要能够使用更复杂的路径自动执行此解决方案。

知道如何将此 geojson 与 d3 一起使用并强制它像其他 geojson 查看器一样显示为地图上的一个简单矩形吗？

Answer 1

我不认为，D3有什么可怪的；据我了解，这是错误的其他 GeoJSON 查看器。作为一个生活在或多或少平面表面上的人，很容易被骗去相信一个有四个角的多边形和像你这样精心选择的坐标应该看起来像一个矩形。在足够小的尺度上并给定合适的投影，这甚至适用于球面几何。但由于您的观点几乎相隔半个地球，所以情况并非如此。

为了阐明这一点，我使用了正交投影来显示一些地理特征以及多边形：

从这个视图可以看出，沿着子午线的线是连接点 [-100,-20] 和 [-100,20] 的第一条边。从那个点 [-100,20] 在墨西哥的某个地方到西北是 great arc，即最短的连接，到下一个点 [100,20] 绕地球一半。该路径随后在南半球附近同样闭合。因此，多边形的轮廓是地球表面上按给定顺序连接所有点的最短路径。

虽然您的多边形由其坐标决定，但其外观将取决于所使用的投影。这是使用墨卡托投影的同一多边形的另一个视图：

d3.geo.path 矩形环绕方式错误

d3.geo.path rectangle wrapping the wrong way

geo

geojson

d3.js