经纬志
首页 / MapLibre / 使用示例

边界限制

地图被锁在中国范围内的矩形里,往外拖会被拉回。 点「跳到范围外」可以看到目标中心被自动夹取后的结果。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

maxBounds 以西南、东北两角给出,单位是经纬度。 地图在拖动、缩放与程序化跳转时都会把中心夹回范围内, 因此「跳到范围外」的动画最终停在边界附近。

限制范围时应同时设 minZoom。缩得太远时可见区域大于 maxBounds,地图无法同时满足两个约束,中心会被强行压到矩形内, 画面出现贴边现象。

配置取值说明
maxBounds[[73,3],[136,54]]构造时传入,限制拖动
minZoom2避免可见范围超出限制框
setMaxBounds(null)null解除限制,恢复自由拖动
getMaxBounds()LngLatBounds读回当前限制

解除限制后视图不会自动回到原位,只是接下来的拖动不再被夹取。 需要重置视角时调用 fitBounds 或 jumpTo。

限制跨 180 度经线时,两角顺序会变得不直观。 先用 LngLatBounds 构造并 adjustAntiMeridian, 再传给 maxBounds,可以避免范围解释错误。