d3.js – d3.geo.path矩形包装错误的方式

2019年7月22日 300次阅读

这个简单的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.js – d3.geo.path矩形包装错误的方式》

但是这是我用上面的d3 code获得的：

《d3.js – d3.geo.path矩形包装错误的方式》

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

任何想法我如何使用这个geojson与d3并强制它像其他geojson观众一样显示,作为一个简单的矩形跨地图？

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

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

《d3.js – d3.geo.path矩形包装错误的方式》

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

尽管多边形由其坐标确定,但其外观取决于使用的投影.这是使用墨卡托投影的同一多边形的另一个视图：

《d3.js – d3.geo.path矩形包装错误的方式》

点赞