我有一個使用 D3 geoOrthographic 和 topoJSON 的作業世界投影。它旋轉和一切。
我想在一個坐標上放置一個六邊形，并根據它在地球上的位置進行投影，這很有效……除了我的形狀真的很奇怪。我得到一個 5 面的形狀，就像缺少一個點一樣，它隨著地球正確旋轉。
然后也是圍繞地球邊緣的一個不旋轉的圓圈。
我有一個拋出六邊形坐標的函式，我嘗試了幾種比例和偏移量，總是完全相同的行為。
let hex = svgOrbit.append("path")
.datum({"type":"GeometryCollection","geometries":[{"type":"Polygon","coordinates":[[[6.732,6],[5,7],[3.268,6],[3.268,4],[5,3],[6.732,4]]]}]})
.attr("d", myGeoOrthographicProjection);
無論我如何旋轉，圓圈看起來都是這樣，嘗試六邊形的方向會根據需要定向，而不會丟失那個缺失點。
該路徑確實顯示了d具有這兩個單獨多邊形的屬性。
我只是不明白這里發生了什么。甚至沒有任何奇怪的數字，比如零或 NaN 或坐標中的任何東西。整個星球正確投影，但一個六邊形將它拋出一個回圈？
uj5u.com熱心網友回復：
外圈表示您有一個倒置的多邊形：您正在繪制世界的一個特征減去預期的特征。由于 d3 在計算投影時使用球面數學，因此纏繞順序很重要，這與大多數將球面坐標視為笛卡爾坐標的地理工具相反（即使在投影時也是如此）。下面的第一張紅色地圖通過應用填充顯示了這一點。
遺漏點有點奇怪，通常 D3 不會渲染無效的 geojson 語法，也不會在不渲染任何內容時拋出錯誤或警告。這里的問題是坐標陣列中的最后一個點應該是第一個坐標。我已經忘記了它在規范中的位置，并且根本沒有研究為什么 D3 會這樣渲染它。當嘗試在 geojson.io 查看您的 geojson 時，我注意到它根本沒有呈現丟失的端點。
我已經重繞坐標（懶惰地使用 .reverse()）并在右側的地圖中添加了額外的點。
顯示代碼片段
let hex = {"type":"GeometryCollection","geometries":[{"type":"Polygon","coordinates":[[[6.732,6],[5,7],[3.268,6],[3.268,4],[5,3],[6.732,4]]]}]};
let hex2 = {"type":"GeometryCollection","geometries":[{"type":"Polygon","coordinates":[[[6.732,6],[5,7],[3.268,6],[3.268,4],[5,3],[6.732,4],[6.732,6]].reverse()]}]};
let projection = d3.geoOrthographic().scale(125).translate([125,125]);
let path = d3.geoPath(projection);
let svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 250);
svg
.append("path")
.datum(hex)
.attr("d", path)
.attr("fill", "crimson");
svg.append("g")
.attr("transform","translate(250,0)")
.append("path")
.datum(hex2)
.attr("d", path)
.attr("fill","steelblue");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/454145.html