Question

我试图在Mollweide投影下使用d3.js绘制一个矩形。但是，当我运行以下脚本时，矩形显示为弧形或弯曲矩形。我发现bahaviour有点奇怪，因为Mollweide投影中的平行线只是直线。有人能解释一下效果吗？同样的效果在其他纬度和其他投影（甚至是Equirectangular投影）中也会持续存在。

<!DOCTYPE html>

<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
</head>

<body>

</body>

<script type="text/javascript">

var mainSVG = d3.select('body').append('svg').attr('width', 500).attr('height', 500);

var projection = d3.geoMollweide().scale(400).translate([250,750])
var path = d3.geoPath().projection(projection);

d3.json('test.json', function(error, vData) {

    var features = vData.features;

    mainSVG.selectAll('path')
        .data(features)
      .enter().append('path')
        .attr('d', path)
        .style('fill', 'red')
        .style('stroke', 'black');

})
</script>

geojson文件：

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "DN": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 7.6, 65.0 ], [ 60.4, 65.0 ], [ 60.4, 63.4 ], [ 7.6, 63.4 ], [ 7.6, 65.0 ] ] ] } }
]
}

以及结果数字：

当我尝试绘制不同纬度的几个相邻矩形时，更奇怪的结果：

Answer 1

D3路径遵循大弧度，两点之间的最短距离。这两个点位于椭圆体上的三维空间中，因此它们之间的最短路径可能与在投影的二维空间中测量的它们之间的最短路径不对应。

举一个极端的例子，想象一个点在85°N，90°W，另一个点在85°N，90°E。尽管处于相同的平行线，但两者之间的最短距离是在北极上短暂的短途旅行。 D3会将此线绘制为地图顶部的两条垂直线（在一个定型的equirectangular地图上：中间的赤道，顶部的北部），而不是沿着第85条平行线的水平线。

如果希望在投影平面上的两点之间有明显的直线，则将顶点投影到投影平面（svg坐标空间）上，并绘制连接这些投影点的线。这可以通过创建一个新的geojson来完成，其中每个lat，long对的原始geojson都已投影（projection([x,y])），然后使用空投影绘制：.attr(d, d3.geoPath(null))

d3.js矩形特征在Mollweide投影中绘制为弧形

1 个答案: