如何在Mapbox GL中修复画布大小？

Question

我使用Mapbox GL来显示地图，并从中心裁剪出固定大小的图像。它适用于我设计的特定分辨率（1920x1080），但是当我开始使页面响应地图样式width和height更改时，画布大小也开始发生变化！

所以，当我裁剪图像时，尺寸应该总是不同，因为900px的画布上的300px与2000px画布上的300px不是相同的地图区域。如果我在Chrome中将设备类型从“桌面”更改为“移动设备”，画布大小甚至会发生剧烈变化。

是否有任何方法可以在使用CSS属性缩放整个地图时修正画布DOM大小，因为它是在正常的canvas上完成的？我尝试了trackResize: false，并且画布DOM大小保持不变，但地图未缩放以适应容器。

Answer 1

如果我正确理解你，你希望地图始终显示地理区域，无论地图容器有多大或多小？这与大多数网络地图的标准行为是相反的，这些行为使比例保持不变，并扩大或缩小了覆盖范围。

如果这就是你想要的，你可以通过调用map.fitBounds()来实现，只要你的窗口调整大小。