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

Question

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

因此，当我裁剪图像时，大小应该始终不同，因为 900 像素画布上的 300 像素与 2000 像素画布上的 300 像素不同。如果我在 Chrome 中将设备类型从桌面更改为移动，画布大小甚至会发生巨大变化。

有什么方法可以使画布 DOM 大小固定，同时使用 CSS 属性缩放整个地图，就像在正常情况下所做的那样canvas？我尝试这样做trackResize: false并且画布 DOM 大小保持固定，但地图也没有缩放以适应容器。

Answer 1

map.on('idle',function(){
map.resize()
})

尝试这个。它对我来说效果很好。（仅适用于 Mapbox 用户）

Answer 2

对于版本：“mapbox-gl”：“^1.2.1”，为画布地图容器类设置高度：

.mapboxgl-canvas-container {

    height: 100vh;

}

然后在地图加载事件上：

onMapLoaded(event) {

    event.map.resize();

}

Answer 3

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

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