d3.js矩形特徵在Mollweide投影中作爲圓弧繪製

我想在Mollweide投影下使用d3.js繪製矩形。但是，當我運行以下腳本時，矩形顯示爲弧形或曲線矩形。由於Mollweide投影的相似之處僅僅是直線，我覺得bahaviour有點奇怪。有人可以解釋這種影響嗎？其他緯度和其他投影（甚至Equirectangular一個）也會產生同樣的效果。d3.js矩形特徵在Mollweide投影中作爲圓弧繪製

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

和由此得出的數字：

一個更怪異的結果，當我嘗試繪製在不同的幾個相鄰的矩形緯度：

來源

2017-09-03 spyrostheodoridis

交叉發佈爲https://gis.stackexchange.com/q/254184/115 – PolyGeo

D3路徑跟隨大弧線，兩點之間最短的距離。這兩個點位於橢球體上的三維空間中，因此它們之間的最短路徑可能不對應於它們之間在投影的二維空間中測量的最短路徑。舉一個極端的例子，假設一個點在85°N，90°W，另一個在85°N，90°E。儘管在同一平行線上，但兩者之間的最短距離是北極短暫的短程行程。 D3會將這條線繪製成地圖頂部的兩條垂直線（在一個刻板的等矩形地圖上：赤道在中部，北部在頂部），而不是沿着第85條水平線的水平線。

如果你想有一個投影面上兩點之間明顯的直線，項目頂點到投影面（SVG座標空間），並畫出連接這些投影點的直線。這可以通過創建一個新的幾何圖形來完成，每個經緯圖原始幾何圖形都經過投影（projection([x,y])），然後用空投影繪製：.attr(d, d3.geoPath(null))

來源

2017-09-04 20:29:41

很好的答案！此外，將座標分成小段將適用於OP的代碼。例如，從7瓦到60瓦，從7瓦到10瓦，從10到20瓦，從20到30瓦......等到60會產生一條直線。線越多陣列越「直」。 –

很好的回答！我已經提出了兩個解決方案，但我無法弄清彎曲線條的原因 – spyrostheodoridis

d3.js矩形特徵在Mollweide投影中作爲圓弧繪製

回答

相關問題