React集成Mapbox时hover交互功能失效问题求助

问题概述 #

基于Mapbox官方hover样式示例修改代码，替换自定义GeoJSON数据后，地图可正常渲染，填充层初始透明度为0.2，但鼠标悬浮时无法切换至透明度为1的状态。

核心原因 #

你的GeoJSON数据中，每个Feature对象没有顶层的id字段。Mapbox的setFeatureState方法依赖Feature的id来精准定位并更新状态——官方示例的GeoJSON自带id，但你的数据仅在properties下有csId、cadid等标识，导致e.features[0].id返回undefined，无法正确触发状态切换。

解决方案 #

方案1：修改GeoJSON数据（推荐） #

给每个Feature添加顶层id字段，可直接复用properties中的唯一标识（如csId）：

{
  "type": "Feature",
  "id": "RCC-20221116103310", // 新增顶层id，值为properties.csId
  "properties": {
    "csId": "RCC-20221116103310",
    "cadid": "108012496",
    "lganame": "RANDWICK",
    // ...其他属性
  },
  "geometry": { /* ... */ }
}

修改后，原有的hover事件代码无需调整即可正常工作。

方案2：不修改数据，调整代码逻辑 #

通过Feature的properties.csId作为唯一标识，修改hover事件处理逻辑：

// 替换原hover事件代码
let hoveredCsId = null;

map.on("mousemove", "RandwickCityCouncil-fills", (e) => {
  if (e.features.length > 0) {
    const currentCsId = e.features[0].properties.csId;
    if (hoveredCsId !== null) {
      map.setFeatureState(
        { 
          source: "RandwickCityCouncil",
          filter: ["==", ["get", "csId"], hoveredCsId]
        },
        { hover: false }
      );
    }
    hoveredCsId = currentCsId;
    map.setFeatureState(
      { 
        source: "RandwickCityCouncil",
        filter: ["==", ["get", "csId"], hoveredCsId]
      },
      { hover: true }
    );
  }
});

map.on("mouseleave", "RandwickCityCouncil-fills", () => {
  if (hoveredCsId !== null) {
    map.setFeatureState(
      { 
        source: "RandwickCityCouncil",
        filter: ["==", ["get", "csId"], hoveredCsId]
      },
      { hover: false }
    );
  }
  hoveredCsId = null;
});

注：填充层的paint配置无需修改，保持原有的feature-state判断即可。

额外检查 #

确保地图容器元素有明确高度（如通过CSS设置.mapbox { height: 100vh; }），否则可能导致鼠标事件无法正确触发。

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