mapbox-gl-js - 调整 Container Div 大小时 map 中心和边界不更新

Question

(对 Mapbox 和 JS 很陌生，所以我有点不知所措)我正在处理用户需要调整 map 容器大小的页面。它需要能够获得调整大小的 map 的准确边界和中心点(通过 map.getBounds 和 map.getCenter)。

我用JS调整容器div大小时，center和bounds都没有调整。 fiddle :http://jsfiddle.net/xcow63sm/3/

平移/缩放会更新中心和边界。浏览器窗口调整大小(如果您将宽度或高度设置为 100%)也可以。我希望更改容器尺寸会调整中心和边界。

但是，如果您使用表单域来调整容器 div 的高度/宽度，则中心和边界不会。我已经尝试过(越来越绝望):

function resize (){
var inputwidth = document.getElementsByName("mapwidth")[0].value;
var inputheight = document.getElementsByName("mapheight")[0].value;
var mapDiv = document.getElementById('map');
var mapcenter = map.getCenter();
mapDiv.style.width = inputwidth;
mapDiv.style.height = inputheight;
map.updateSize();
map.update();
map.resize();
map.invalidateSize();
document.getElementById("mapcenter").value = mapcenter;

编辑:这似乎适用但我无法理解它:Resizing a leaflet map on container resize

Answer 1

如果我理解您的意思，您有两个问题:您不喜欢 map 在其大小发生变化后的定位方式，并且您得到了空白。

调整大小后的 map 定位

如果 map 的宽度和高度突然加倍，则至少有三个有效选项可用于更新 map :

1. 保持相同的北部和西部边界，延伸东部和南部边界。 (向右和向下扩大视野)
2. 将所有四个边界向外移动(将 map 的中心保持在同一位置)
3. 将所有四个边界保留在原处，但更改缩放比例，以便显示相同的地理区域，但更详细。

我认为您的问题是 Mapbox 正在选择选项 1，但您想要其他两个选项之一。正如我认为您已经发现的那样，解决方案就是自行计算并根据需要设置界限。

map 无法正确重绘

您的第二个问题是，当您调整大小时，调用 map.resize() 不会正确更新 map 的内部大小，您会留下空白。这是因为您正在使用动画 CSS 属性。所以当你这样做时:

mapDiv.style.width = inputwidth;
mapDiv.style.height = inputheight;
map.resize();

这不起作用，因为 map 的大小实际上尚未转换为新大小。您可以像这样解决它:

mapDiv.style.width = inputwidth;
mapDiv.style.height = inputheight;
window.setTimeout(()=>map.resize(), 500);

您可能可以收听更好的事件，随着 map 区域的扩大不断更新。

此处更新 fiddle :http://jsfiddle.net/xcow63sm/11/

顺便说一句，您应该查阅文档 here .我不确定你从哪里得到 map.updateSize() 但那不是 Mapbox-GL-JS :)