如何在MapBox地图的地理瓦片与点标记间添加半透明覆盖层

你可以通过Mapbox GL JS的addLayer方法的beforeId参数控制层的堆叠顺序，按以下步骤操作即可：

• 等待地图样式加载完成后再执行层添加操作，避免样式未初始化导致的报错
• 先创建覆盖层的数据源，如果你需要全地图范围的纯色覆盖，直接使用全球范围的GeoJSON多边形作为源即可
• 调用addLayer添加半透明层时，将beforeId参数设置为你的点标记层的ID，即可保证层落在底图之上、点标记之下

示例代码如下：

// 监听地图样式加载完成事件
map.on('style.load', () => {
  // 添加全地图范围的GeoJSON数据源
  map.addSource('translucent-overlay-source', {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        // 覆盖全球的多边形坐标
        coordinates: [[[-180, 90], [180, 90], [180, -90], [-180, -90], [-180, 90]]]
      }
    }
  });

  // 添加半透明覆盖层
  map.addLayer({
    id: 'translucent-overlay',
    type: 'fill',
    source: 'translucent-overlay-source',
    paint: {
      'fill-color': '#ffffff', // 可自定义为你需要的覆盖层颜色
      'fill-opacity': 0.7
    }
  // 此处替换为你自己的点标记层ID即可
  }, 'your-point-marker-layer-id');
});

补充说明 #

• 如果你还未创建点标记层，可以先添加该半透明覆盖层，后续再添加的点标记层默认会堆叠在已有层的上方，自动满足顺序要求
• 不清楚现有层ID的情况下，可以调用map.getStyle().layers打印所有层的完整信息，从中找到你需要的参考层ID
• 如果需要添加的是其他类型的覆盖层（比如栅格层、线图层等），只需调整layer的type、source和对应样式属性即可，beforeId控制堆叠顺序的逻辑通用

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