Javascript 减少Mapbox贴图大小而不进行裁剪

我希望使我的Mapbox地图内容始终完全可见，无论容器大小如何。 但是当地图非常小时，地图会被裁剪

这是我的一个例子

当您减小页面宽度时，它还将减小地图容器的高度以保持其大小比例。但地图不会进一步缩小以保持所有图层可见

var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v8',
中间：[0,0]，
缩放：0
});
window.addEventListener（'resize'，（）=>{
地图。zoomTo（0）；
});
正文{
保证金：0；
填充：0；
}
.内容{
显示器：flex；
}
.栏目{
-webkit flex:1自动；
flex:1自动；
边框：薄黑色实心；
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：400px；
}
.地图包装器{
位置：相对位置；
宽度：100%；
高度：30vw；/*100%*/
最大宽度：100%；
最大高度：100%；
背景色：青色；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}

我认为您的问题在于，为了调整地图的大小，使所有视图都保持在所讨论的小尺寸，它必须缩小到缩放级别0之外。这是不可能的。可能您可以使用CSS来使用像素比率或其他东西缩放实际渲染的贴图。
更新：这似乎已在Mapbox GL js v1.6.0-beta.1中修复

实际上，当视口小于512px时会发生这种情况。
它很旧，还没有修好。因此，作为一种解决方法，我最终在地图上使用了滚动效果：


鼠标移出地图：增加地图大小（>=512px以查看整个地图），并使用CSS将其恢复到原始大小。你会看到整个地图（无论大小），但所有的互动都会发生变化
将鼠标移到地图上：返回原点大小和比例（1）

，这样地图将被裁剪，但您将能够正确地与之交互

---

我尝试使用CSS中的

变换：缩放（0.5）

，但是贴图完全偏移：鼠标位置与下面的功能不匹配。也许缩放需要直接在画布中完成，但是

canvas.getContext（'experimental-webgl'）

似乎没有简单的scale（）方法。是的，这并不让我感到惊讶。可能需要相当多的黑客才能使某些东西可行。