D3js:小方形多边形渲染地图的一半

时间:2014-10-05 11:09:39

标签: canvas d3.js geojson

我正试图在整个赤道线上创建一个10度高的方形多边形。这是与多边形相关的代码:

var feature = {
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [ [-89, 0], [89, 0], [89, 10], [-89, 10], [-89, 0] ]
        ]
    },
    properties: []
}

但是我的地图的一半被渲染为多边形的一部分而不是其中的一小部分。在http://geojsonlint.com/上发布上述功能会显示我想要的结果。

以下是问题的代码和地图:http://tributary.io/inlet/d86c74159991fcb9e646

任何想法都将不胜感激。提前致谢

1 个答案:

答案 0 :(得分:0)

当您绘制多边形时,它会在最短距离的两个点之间画一条线,这是一个很大的圆。这就是为什么你看到你的多边形延伸到地球的一半。您可以通过在多边形的角之间指定一些中间点来避免这种情况。

我在这里做过:http://tributary.io/inlet/8bf24e98ac612e5e2784

该功能现在看起来像:

var feature = {
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [ [-89, 10], [-79, 10], [-69,10], [-59, 10], [-49, 10], [-39, 10], [-29, 10], [-19, 10], [-9, 10], [0,10], 
              [9, 10], [19, 10], [29,10], [39, 10], [49, 10], [59, 10], [69, 10], [79, 10], [89, 10],  
              [89, 0], [79, 0], [69,0], [59, 0], [49, 0], [39, 0], [29, 0], [19, 0], [9, 0], [0,0], 
              [-9, 0], [-19, 0], [-29,0], [-39, 0], [-49, 0], [-59, 0], [-69, 0], [-79, 0], [-89, 0], [-89,0], [-89, 10] ] 
        ]
    },
  "properties": []
}

另外,不要忘记按顺时针顺序指定多边形的点,我怀疑这是您在附加注释中提出的问题。基本上,顺时针排序用于多边形的外环。如果你在逆时针方向指定它,就像你已经完成的那样,那么它就会被翻过来#34;从里到外"。