如何在 MAPBOX 中调整 window 大小时同时调整边界和设置最大边界？

How to fit bounds and set max bounds at same time on window resize in MAPBOX?

为了适应地图，我们使用 mapbox.fitBounds() 并设置我们使用 mapbox.setMaxBounds()，这样可以避免平移。这项工作在第一次加载时非常好。

但在 Window 调整地图大小时，地图会被裁剪并从最初设置的最大边界中获取边界参考。我正在尝试使用 setTimeout 使地图适合视口，以便地图首先适合屏幕，然后从 mapbox.getBounds() 获取地图边界并在 mapbox.setMaxBounds() 中设置值。但这只是一个技巧。

有什么正确的方法吗？

请帮忙...谢谢...

希望你一切都好...

经过多日的奋斗，我们能够找到完美的解决方案，针对我自己的问题发布...

首先，

mapbox.fitBounds() 是将给定边界作为参数传递的方法，将适合几何图形（多边形等..），使中心点位于中间。但唯一不禁止平移。

但是，我们可以使用 mapbox.setMaxBounds() 禁止平移，这允许我们限制通过的边界。

但是在 window 调整大小时，mapbox Map 根据内部逻辑以某种方式更改了边界，这将不再与最初传递的边界相同...

为了让几何图形适应视口，同时在window调整大小时禁止平移，我们使用Resize Observer观察地图的容器，并在它的回调，我们刚刚写了三行

  1. 设置 map.setMaxBounds(null) //为 null
  2. 设置 fitbounds（界限）。 //你拥有的几何边界
  3. 使用
    4. 从视口获取边界 
   let bnds = mapbox.getBounds();
   and finally set in map.setMaxBounds(bnds);

注意传递3.点在requestAnimationFrame而不是setTimeout

更新代码

MaxBounds and custom asymmetric padding in Mapbox GL

希望这会有所帮助...

谢谢。