如何在Mapbox GL中修復畫布大小？

Question

我使用Mapbox GL來顯示地圖，並從中心裁剪出固定大小的圖像。它適用於我設計的特定分辨率（1920x1080），但是當我開始使頁面響應地圖樣式width和height更改時，畫布大小也開始發生變化！

所以，當我裁剪圖像時，尺寸應該總是不同，因爲900px的畫布上的300px與2000px畫布上的300px不是相同的地圖區域。如果我在Chrome中將設備類型從「桌面」更改爲「移動設備」，畫布大小甚至會發生劇烈變化。

是否有任何方法可以在使用CSS屬性縮放整個地圖時修正畫布DOM大小，因爲它是在正常的canvas上完成的？我嘗試了trackResize: false，並且畫布DOM大小保持不變，但地圖未縮放以適應容器。

Answer 1

如果我正確理解你，你希望地圖始終顯示地理區域，無論地圖容器有多大或多小？這與大多數網絡地圖的標準行爲是相反的，這些行爲使比例保持不變，並擴大或縮小了覆蓋範圍。

如果這就是你想要的，你可以通過調用map.fitBounds()來實現，只要你的窗口調整大小。