React Map GL点击彩色国家无法获取名称问题求助

你的问题出在地图全局点击事件可能捕获到其他图层的元素，而非你自定义的国家填充图层。这里提供两种可靠的解决方案：

方案一：在自定义图层上直接绑定点击事件 #

将点击事件绑定到<Layer>组件上，这样只会响应该图层的点击，无需额外筛选，更精准：

修改后的核心代码：

// 移除Map组件上的onClick属性
<Map
  initialViewState={{
    latitude: 51.1657,
    longitude: 10.4515,
    zoom: 3,
    bearing: 0,
    pitch: 0,
  }}
  mapStyle="mapbox://styles/mapbox/navigation-day-v1"
  mapboxAccessToken=""
  scrollZoom={false}
  cursor={cursor}
>
  {/* ...其他控件 */}
  <Source id={sourceId} type="geojson" data={geojsonUrl}>
    <Layer
      id={layerId}
      type="fill"
      source={sourceId}
      // 直接在Layer上绑定点击事件
      onClick={(event) => {
        const countryName = event.features[0].properties.name;
        window.alert(`Clicked on ${countryName}`);
      }}
      paint={{
        "fill-color": [
          "case",
          ["==", ["get", "name"], "Austria"],
          "blue",
          ["==", ["get", "name"], "Croatia"],
          "green",
          "gray",
        ],
        "fill-opacity": 0.5,
      }}
    />
  </Source>
  {/* ...其他元素 */}
</Map>

方案二：在全局点击事件中筛选目标图层 #

如果你需要保留Map组件的全局点击事件，可通过layer.id筛选出你自定义的国家图层Feature：

修改onClick函数：

const onClick = useCallback((event) => {
  // 筛选出属于country-fills图层的Feature
  const targetFeature = event.features?.find(feature => feature.layer.id === layerId);
  if (targetFeature) {
    const countryName = targetFeature.properties.name;
    window.alert(`Clicked on ${countryName}`);
  }
}, [layerId]);

额外注意事项 #

1. 确保你的Mapbox Access Token已正确配置（当前代码中为空），虽然着色暂时正常，但完整功能依赖有效Token；
2. 若仍存在问题，可在<Layer>组件中显式添加interactive={true}属性，强制开启图层交互性。

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