在Mapbox GL JS中限制鼠标拖拽至指定地图区域

要实现只允许在特定区域内拖拽地图，无需禁用dragPan，直接使用Mapbox的maxBounds属性即可。这个属性会定义地图的可视边界，当用户拖拽到边界时，地图会自动停止，无法拖出设定区域。

步骤1：定义目标区域的边界坐标 #

首先确定你要限制的区域（比如纽约市）的西南角和东北角经纬度坐标。纽约市的大致边界可以用以下坐标：

const NYC_BOUNDS = [
  [-74.25909, 40.477399], // 西南角：经度, 纬度
  [-73.70018, 40.917577]  // 东北角：经度, 纬度
];

步骤2：修改Map组件代码 #

将maxBounds属性添加到你的<Map>组件中，替换掉注释掉的dragPan配置：

<Map
  mapboxAccessToken={TOKEN}
  initialViewState={{
    longitude: -73.935242,
    latitude: 40.730610,
    zoom: 8,
  }}
  style={{
    width: "100%",
    height: "100%",
  }}
  mapStyle="mapbox://styles/mapbox/dark-v9"
  minZoom={8}
  maxBounds={NYC_BOUNDS} // 新增：限制拖拽范围
>
  <FullscreenControl position="top-right" />
  <NavigationControl position="top-right" />
</Map>

补充说明 #

• 如果需要更精确的区域边界，可以通过Mapbox Studio、坐标拾取工具，或者从目标区域的GeoJSON数据中提取边界坐标（取GeoJSON的bbox值即可）。
• maxBounds不仅限制拖拽，还会限制通过导航控件、键盘操作等方式移出边界，确保地图始终在指定范围内。

内容的提问来源于stack exchange，提问作者Gadmer