Question

这个简单的geojson矩形与一些geojson查看器正确显示，我按预期得到一个矩形。但是当我用d3做的时候，矩形似乎环绕着。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

以下是我使用geojson viewer获得的信息：

但这是我对上述d3 code所得到的：

扭转绕线顺序只是填充了相反的形状，它并没有解决问题。我想这是一个反子弹切割问题。一个修复是添加一些中间点以强制路径不环绕，但我需要能够使用更复杂的路径自动化此解决方案。

任何想法如何将这个geojson与d3一起使用并强制它像其他geojson观众一样展示它，作为地图上的一个简单矩形？

Answer 1

我不认为，有任何责任归咎于D3;在我的理解中，这是其他错误的GeoJSON观众。当一个人生活在一个或多或少平面的表面上时，人们很容易被人误以为具有四个角的多边形具有像你这样精心选择的坐标应该看起来像一个矩形。在足够小的尺度上并给出合适的投影，这甚至适用于球形几何形状。但是，由于你的分数几乎是地球的一半，所以情况并非如此。

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

从这个视图可以看出，沿着子午线的直线是连接点[-100,-20]和[-100,20]的第一条边。从那时起，[-100,20]在墨西哥的某个地方到西北方向的是great arc，即最短的连接点，到达全球中途的下一个点[100,20]。然后在南半球周围类似地关闭该路径。因此，多边形的轮廓是地球表面上以给定顺序连接所有点的最短路径。

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

d3.geo.path矩形换错方式

1 个答案: