Mapbox GL JS：如何更新Studio构建图层的单个多边形填充色

问题原因 #

你代码存在两个核心问题导致效果不符合预期：

1. 匹配表达式中的'feature.id'被包裹为字符串常量，没有代入实际获取到的要素id变量，没有任何多边形能匹配该值，所以全部触发兜底的黑色样式。
2. 每次触发mouseenter事件都调用setPaintProperty修改图层全局填充规则，实现效率低，同时缺少鼠标移出的重置逻辑，会导致样式混乱。且你已经使用setFeatureState设置了要素状态，完全可以基于状态实现样式判断，更符合Mapbox的设计逻辑。

最优解决方案 #

使用Mapbox的feature-state表达式做填充色判断，只需要一次性配置图层样式规则，后续只需要修改要素状态即可触发样式更新，同时兼容Mapbox Studio添加的图层：

1. 先在地图加载完成后配置图层填充色规则：

map.on('load', () => {
  map.setPaintProperty(
    'pta-cos-polygons',
    'fill-color',
    ['case',
      // 判断要素的hover状态是否为true
      ['boolean', ['feature-state', 'hover'], false],
      'red', // hover状态显示红色
      'black' // 非hover状态可替换为你原来的默认填充色
    ]
  );
});

2. 补充鼠标移入移出的状态更新逻辑：

// 鼠标移入设置hover状态为true
map.on('mouseenter', 'pta-cos-polygons', (e) => {
  if (!e.features.length) return;
  const feature = e.features[0];
  map.setFeatureState({
    source: 'composite',
    sourceLayer: 'pta-cos-polygons',
    id: feature.id
  }, { hover: true });
  // 可选：移入时切换为指针样式
  map.getCanvas().style.cursor = 'pointer';
});

// 鼠标移出重置hover状态为false
map.on('mouseleave', 'pta-cos-polygons', (e) => {
  if (!e.features.length) return;
  const feature = e.features[0];
  map.setFeatureState({
    source: 'composite',
    sourceLayer: 'pta-cos-polygons',
    id: feature.id
  }, { hover: false });
  map.getCanvas().style.cursor = '';
});

注意事项 #

• 确保你上传到Mapbox Studio的矢量图层要素配置了唯一id，如果feature.id取值为空，可以替换为要素属性中的唯一字段，比如feature.properties.id，对应修改setFeatureState中传入的id即可。
• 如果你坚持使用原match写法实现，只需要去掉'feature.id'的引号，改为feature.id变量即可生效，但该方案需要额外处理鼠标移出时的样式重置，维护成本更高。

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