Mapbox动态调整图层内要素层级：点击线条置顶问题求助

Mapbox同一图层内的要素渲染顺序由数据源加载顺序决定，无法单独调整单个要素的层级。要实现选中线条置顶，必须通过双图层分离方案，利用图层的z-index优先级来确保选中线条覆盖其他线条。

具体实现步骤 #

1. 创建两个线条图层，分离选中/未选中要素

将线条拆分为两个图层：底层显示未选中要素，上层仅显示选中要素并设置更高的z-index：

// 底层图层：显示所有未选中的线条
map.addLayer({
  id: 'lines-base',
  type: 'line',
  source: 'lines',
  filter: ['!=', ['feature-state', 'selected'], true], // 过滤掉已选中的要素
  paint: {
    'line-color': [
      'case',
      ['boolean', ['feature-state', 'highlight'], false],
      '#10e6d7',
      '#43434a'
    ],
    'line-width': 2,
    'line-opacity': 0.5
  }
});

// 上层图层：仅显示选中的线条，确保置顶
map.addLayer({
  id: 'lines-selected',
  type: 'line',
  source: 'lines',
  filter: ['==', ['feature-state', 'selected'], true], // 只显示选中要素
  paint: {
    'line-color': '#d5e30e',
    'line-width': 4,
    'line-opacity': 1
  },
  layout: {
    'line-cap': 'round',
    'line-join': 'round'
  },
  z-index: 10 // 设为比底层图层更高的数值
});

2. 简化点击事件逻辑，仅管理要素状态

不需要单独维护未选中线条列表，只需要通过feature-state控制选中状态，图层会自动通过filter更新显示：

let selectedLineId = null;

map.addInteraction('click', {
  type: 'click',
  target: { layerId: ['lines-base', 'lines-selected'] }, // 支持点击两个图层的要素
  handler: ({ feature }) => {
    // 取消之前选中线条的状态
    if (selectedLineId) {
      map.setFeatureState(
        { id: selectedLineId, source: 'lines' },
        { selected: false }
      );
    }

    // 设置当前点击线条的选中状态
    const currentId = feature.properties.shape_id || feature.id;
    map.setFeatureState(
      { id: currentId, source: 'lines' },
      { selected: true }
    );
    selectedLineId = currentId;
  }
});

方案优势 #

• 无需修改数据源，仅通过图层filter和要素状态控制显示逻辑，性能更优
• 上层图层z-index明确高于底层，彻底解决选中线条被覆盖的问题
• 逻辑简化，减少维护成本

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