如何限制切换按钮 "world view" 和 "country view" 上的地图边界

Question

我正在尝试制作一张带有按钮的地图以切换“世界视图”或特定的“国家视图”

我尝试使用这个 example，它限制了视野。但是这个解决方案不允许我在地图初始化后在 bbox-country 和 bbox-worldview 之间切换。

如何在地图初始化加载后更改 maxBounds？

var bounds = [
[-74.04728500751165, 40.68392799015035], // Southwest coordinates
[-73.91058699000139, 40.87764500765852] // Northeast coordinates
];
 
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-73.9978, 40.7209],
zoom: 13,
maxBounds: bounds // Need maxBounds to be changable after init
});

感谢任何帮助:)

Answer 1

想通了，很简单

当你想在初始值上限制边界时，添加 maxBounds 属性来映射 init，如下所示：

   var bounds = [
      [-22.763672, 54.622978], // Southwest coordinates
      [58.710938, 73.677264] // Northeast coordinates
   ];

   var map = new mapboxgl.Map({
        maxBounds: bounds
    });

如果您不想再次限制边界，请执行以下操作：

map.setMaxBounds(null);

如果您想再次添加边界，或更改边界

map.setMaxBounds(bounds);

//flyto here is important (if you dont fly to new bounds user cannot pan or zoom map since it is stuck out of bounds
map.flyTo({
  center: [3.606842488358609, 63.0207009783135],
  zoom: 4.5
});

如何限制切换按钮 "world view" 和 "country view" 上的地图边界

How to limit map bounds on toggle button "world view" and "country view"

mapbox

mapbox-gl-js