如何在Mapbox中将地图渲染范围限制在指定地理区域内

你要的效果和单国家区域限制渲染逻辑完全一致，只需要把国家边界替换为你的游乐园自定义边界即可，以下是两种常用实现方案：

方案1：前端遮罩裁剪（适配动态边界场景，开发成本低） #

通过添加反向遮罩层盖住游乐园边界外的所有区域，视觉上实现仅显示边界内内容的效果，不需要修改原有地图样式配置：

• 第一步：准备好游乐园边界的GeoJSON数据，格式为Polygon或MultiPolygon类型，坐标系采用WGS84（EPSG:4326）
• 第二步：生成反向裁剪GeoJSON：先创建一个覆盖全球的超大正方形多边形，再把游乐园边界作为洞（hole）挖掉，得到仅包含游乐园外区域的多边形
• 第三步：在地图load事件中添加边界源和反向遮罩层，代码示例如下：

map.on('load', () => {
  // 引入刚才生成的反向裁剪GeoJSON，支持直接传入GeoJSON对象或者文件路径
  map.addSource('park-mask-source', {
    type: 'geojson',
    data: 反向裁剪GeoJSON
  });
  // 添加反向遮罩层，填充色和你的地图背景色保持一致
  map.addLayer({
    id: 'park-mask',
    type: 'fill',
    source: 'park-mask-source',
    paint: {
      'fill-color': '#ffffff', // 替换为你的地图实际背景色
      'fill-opacity': 1
    }
  });
  // 后续添加的所有游乐园内的业务图层，层级都要高于park-mask，避免被遮罩盖住
});

方案2：样式预配置（适配固定边界场景，性能最优） #

和你参考的单国家渲染逻辑完全一致，直接在Mapbox Studio中修改样式即可：

• 上传你的游乐园边界数据集到Mapbox Studio
• 给所有底图图层添加过滤规则，仅保留和游乐园边界相交的要素
• 保存样式后直接在GL JS中引用样式ID即可，不需要额外写前端裁剪逻辑

可选：限制地图交互范围 #

如果需要避免用户拖动、缩放至游乐园外，可以额外添加如下配置：

// 先获取游乐园边界的经纬度范围
const parkBounds = new mapboxgl.LngLatBounds(
  [边界西南角经度, 边界西南角纬度],
  [边界东北角经度, 边界东北角纬度]
);
// 限制地图拖动范围
map.setMaxBounds(parkBounds);
// 可选：限制缩放级别，适配游乐园的尺寸范围
map.setMinZoom(13);
map.setMaxZoom(19);

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