如何限制切换按钮“世界视图”和“国家视图”的地图范围

【问题标题】：How to limit map bounds on toggle button "world view" and "country view"如何限制切换按钮“世界视图”和“国家视图”的地图范围
【发布时间】：2021-06-16 15:37:17
【问题描述】：

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

我尝试使用这个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
});

任何帮助表示赞赏:)

【问题讨论】：

检查this out
只带你飞到那个位置，不限制范围

标签： mapbox mapbox-gl-js

【解决方案1】：

想通了，很简单

当您想限制初始值时，将maxBounds 属性添加到映射初始值，如下所示：

   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
});

【讨论】：