如何在Mapbox GL中修复画布大小? [英] How to fix canvas size in Mapbox GL?

问题描述

我正在使用Mapbox GL来显示地图并从其中心裁剪固定大小的图像.它对于我设计的特定分辨率(1920x1080)效果很好，但是当我开始使页面响应时，地图样式 width 和 height 发生变化时，画布大小也开始改变！

I'm using Mapbox GL to show a map and crop a fixed size image from the center of it. It works great for a particular resolution I designed it (1920x1080) but when I started to make the page responsive where the map styles width and height changes, the canvas size also started to change!

因此，当我裁剪图像时，尺寸应始终不同，因为900px画布上的300px与2000px画布上的300px不是相同的地图区域.如果我在Chrome中将设备类型从台式机更改为移动版，则画布大小甚至会发生巨大变化.

So, when I crop the image the size should be always different because 300px on a 900px canvas it's not the same map area as 300px on a 2000px canvas. The canvas size even changes drastically if I change the device type from Desktop to Mobile in Chrome.

有什么方法可以像在普通 canvas 上所做的那样，通过CSS属性缩放整个地图时，固定画布DOM大小吗?我尝试做 trackResize:false 并且画布DOM大小保持固定，但地图也未缩放以适合容器.

Is there any way to make the canvas DOM size fixed while scaling the entire map with CSS attributes as it's done on a normal canvas? I tried doing trackResize: false and the canvas DOM size stays fixed but the map is not scaled to fit the container neither.

推荐答案

对于版本:"mapbox-gl":"^ 1.2.1"，设置画布地图容器类的高度:

for version: "mapbox-gl": "^1.2.1", set height for canvas map container class:

.mapboxgl-canvas-container {

    height: 100vh;

}

然后在地图加载事件:

onMapLoaded(event) {

    event.map.resize();

}

这篇关于如何在Mapbox GL中修复画布大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！