Mapbox GL JS性能优化：如何高效检测当前渲染图层？

针对你遇到的queryRenderedFeatures查询大量要素导致卡顿的问题，核心优化思路是不要获取所有要素，仅判断每个图层是否存在至少一个渲染的要素，以下是两种高效实现方案：

方案一：单图层单次查询（仅取1个要素） #

利用queryRenderedFeatures的limit参数，对每个目标图层仅查询1个匹配要素，只要返回结果非空，就说明该图层当前有渲染内容。这种方式避免了加载大量要素，性能提升明显。

self.ctx.map.on('moveend', () => {
  const activeLayers = new Set();
  
  layerIDs.forEach(layerId => {
    // 对单个图层查询，仅取1个要素，关闭validation提升性能
    const features = self.ctx.map.queryRenderedFeatures({
      layers: [layerId],
      validation: false,
      limit: 1 // 关键：找到第一个要素就停止查询
    });
    if (features.length > 0) {
      activeLayers.add(layerId);
    }
  });
  
  // 根据activeLayers更新复选框状态
  updateCheckboxStates(activeLayers);
});

方案二：直接查询数据源（适用于矢量图层） #

如果你的图层基于矢量数据源，可以绕过渲染层，直接从数据源查询视口内符合图层过滤条件的要素，性能比渲染层查询更优。

self.ctx.map.on('moveend', () => {
  const activeLayers = new Set();
  const bounds = self.ctx.map.getBounds();
  // 转换为数据源查询所需的bbox格式
  const bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
  
  layerIDs.forEach(layerId => {
    const layer = self.ctx.map.getLayer(layerId);
    if (!layer) return;
    
    const source = self.ctx.map.getSource(layer.source);
    // 仅处理矢量数据源
    if (source.type !== 'vector') return;
    
    // 查询数据源中符合条件的1个要素
    const features = self.ctx.map.querySourceFeatures(layer.source, {
      sourceLayer: layer['source-layer'],
      filter: layer.filter || ['all'],
      bbox: bbox,
      limit: 1
    });
    
    if (features.length > 0) {
      activeLayers.add(layerId);
    }
  });
  
  updateCheckboxStates(activeLayers);
});

额外优化：避免频繁触发查询 #

如果用户快速拖动地图，moveend会频繁触发，可以加简单的节流逻辑，减少重复计算：

let isProcessing = false;
self.ctx.map.on('moveend', () => {
  if (isProcessing) return;
  isProcessing = true;
  
  setTimeout(() => {
    // 执行上述任一检测逻辑
    const activeLayers = new Set();
    // ... 检测代码
    
    updateCheckboxStates(activeLayers);
    isProcessing = false;
  }, 100); // 100ms延迟，平衡响应速度与性能
});

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