顯示精確大小的圖標

Question

我想在我的 map 上有精確大小的圖標，其中每個圖標在 map 上占據以米為單位的預定義大小。 此外，這些需要在運行時進行更改，因此無法提前生成覆蓋整個 map 的圖像。 我的用例是顯示要塗漆的路面標記，所以 3 平方米可能是顯示的最大的東西。 通過將icon-rotation-alignment設置為map可以輕松匹配旋轉和俯仰，留下大小問題。 我可以通過interpolate縮放icon-size （ ['interpolate', ['exponential', 2], ['zoom'], 15, 1 / 72, 22, 1 / 0.56] ），但我然后會遇到墨卡托投影的緯度差異問題。 但是，可能可以根據縮放和當前緯度進行插值。

或者，一些看起來正在執行對齊真實世界大小的類似任務的演示是Add a 3D model ，添加 canvas 源代碼，添加一個自定義樣式。 我對如何使用每個的理解：

• 添加一個 3D model：我會使用 three.js（或其他渲染器）並將其設置為每個符號的位置和圖像，然后使用它來繪制。
• 添加一個 canvas 源：要么創建一個非常大的 canvas（可能會使用太多 RAM），要么為每個符號創建一個 canvas（開銷？），然后繪制符號
• 添加圖像：相同的決定，但使用 URL 而不是畫布

其中哪一個是最好的選擇？

Answer 1

您可以使用 mapbox 中的柵格圖層輕松完成此操作，但您需要使用考慮緯度的轉換來計算圖像 4 個角的長度（以米為單位）。

如果您想添加精確米大小的圖像（考慮緯度）的其他選項，只需使用最新版本的threebox進行檢查

您將能夠加載任何圖像（以及任何 3D 模型）並以米為單位（實際上是毫米）定義其大小，只需幾行代碼，但使用 threejs 插件執行純 2D 任務可能就像打魚一樣在一個桶里。