Mapbox矢量数据多边形悬停功能失效求助

浅蓝色多边形可正常显示，鼠标移过时控制台能输出正确的自定义ID（aa_winter_sports_polygin_id），但悬停时的透明度变化不生效，尝试过promoteId配置但问题依旧。

map.setFeatureState方法中使用的id参数要求对应Mapbox内部维护的要素ID，而非自定义属性ID。即使配置了promoteId，也需要确保要素内部ID与自定义属性正确关联，同时缺失鼠标移出图层时的状态重置逻辑也会导致异常。

• 1. 数据源定义时，为矢量瓦片的对应source-layer配置promoteId，将自定义属性映射为要素内部ID
• 2. 鼠标移动事件中，直接使用e.features[0].id获取要素ID，而非自定义属性字段
• 3. 添加mouseleave事件，当鼠标移出图层时重置悬停状态
• 4. 确认图层paint属性的表达式逻辑正确

1. 数据源定义（含promoteId配置） #

map.addSource('aa_winter_sports_polygons', {
  type: 'vector',
  url: '你的矢量瓦片服务URL',
  promoteId: {
    'aa_winter_sports_polygons_source_layer': 'aa_winter_sports_polygin_id'
  }
});

2. 图层添加代码 #

map.addLayer({
  'id': 'aa_winter_sports_polygons',
  'type': 'fill', 
  'source': 'aa_winter_sports_polygons', 
  'source-layer': 'aa_winter_sports_polygons_source_layer',
  'paint': {
    'fill-color': '#93E7FB', 
    'fill-opacity': [
      'case',
        ['boolean', ['feature-state', 'hover'], false],
        0.5,
        1
    ]
  }
});

3. 悬停事件监听代码 #

let hoveredStateId = null;

// 鼠标移动事件处理
map.on('mousemove', 'aa_winter_sports_polygons', (e) => {
  if (e.features.length === 0) return;
  
  const currentId = e.features[0].id;
  
  // 重置上一个悬停要素的状态
  if (hoveredStateId !== null && hoveredStateId !== currentId) {
    map.setFeatureState(
      { 
        source: 'aa_winter_sports_polygons', 
        sourceLayer: 'aa_winter_sports_polygons_source_layer',
        id: hoveredStateId
      },
      { hover: false }
    );
  }
  
  // 设置当前要素的悬停状态
  if (hoveredStateId !== currentId) {
    hoveredStateId = currentId;
    map.setFeatureState(
      { 
        source: 'aa_winter_sports_polygons', 
        sourceLayer: 'aa_winter_sports_polygons_source_layer',
        id: hoveredStateId
      },
      { hover: true }
    );
  }
});

// 鼠标移出图层时重置状态
map.on('mouseleave', 'aa_winter_sports_polygons', () => {
  if (hoveredStateId !== null) {
    map.setFeatureState(
      { 
        source: 'aa_winter_sports_polygons', 
        sourceLayer: 'aa_winter_sports_polygons_source_layer',
        id: hoveredStateId
      },
      { hover: false }
    );
    hoveredStateId = null;
  }
});

• promoteId必须针对具体的source-layer配置，因为矢量瓦片可能包含多个图层
• 必须添加mouseleave事件处理，否则鼠标移出后要素会持续保持悬停状态
• 使用e.features[0].id确保与setFeatureState要求的要素ID匹配

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