mapbox-gl - 如何修复 Mapbox GL 中的 Canvas 大小？

Question

我正在使用 Mapbox GL 显示 map 并从其中心裁剪固定大小的图像。它非常适合我设计的特定分辨率(1920x1080)，但是当我开始使页面响应时， map 样式宽度和高度发生变化， Canvas 大小也开始变化改变!

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

有什么方法可以使 Canvas DOM 大小固定，同时使用 CSS 属性缩放整个 map ，就像在普通 canvas 上完成的那样？我尝试执行 trackResize: false 并且 Canvas DOM 大小保持固定，但 map 也没有缩放以适合容器。

Answer 1

对于版本:“mapbox-gl”:“^1.2.1”，设置canvas map 容器类的高度:

.mapboxgl-canvas-container {

    height: 100vh;

}

然后在 map 加载事件上:

onMapLoaded(event) {

    event.map.resize();

}