Json 如何在 onClick 事件处理程序中识别在同一 map 上绘制的多个多边形中的哪个(使用 reactleaflet)被单击

可以通过将唯一标识符(在提供的示例中为cartodb_id)存储在一个变量中，然后使用它来更改geojson的样式，并使用特定样式呈现单击的区域来实现这一点.

使用onEachFeature函数，您可以导出唯一id并zoom 到单击的区域.一旦将其存储在变量中，就可以通过只显示包含唯一id的对象来过滤geojson.因为react传单的geojson comp数据属性是不可变的，所以必须使用引用(ref).您可以使用传单的eachLayer将特定样式附加到除单击对象之外的所有对象.在通过useeffect过滤geojson后，可以通过设置点击层样式来实现后者(参见下面的代码).然后使用传单的addData，你可以在 map 上阅读过滤后的geojson.

export default function Map() {
  const [map, setMap] = useState(null);
  const geojsonRef = useRef();
  const [featureId, setFeatureId] = useState(null);

  const handleEachFeature = (feature, layer) => {
    layer.on({
      click: (e) => {
        setFeatureId(feature.properties.cartodb_id);
        map.fitBounds(e.target.getBounds());
      }
    });
  };

  useEffect(() => {
    if (!featureId || !geojsonRef.current) return;
    geojsonRef.current.eachLayer((layer) => {
      layer.setStyle({
        opacity: 0.5,
        weight: 0
      });
    }); // inherited from LayerGroup
    const newDistricts = districts.features.filter((district) => {
      return district.properties.cartodb_id === featureId;
    });
    geojsonRef.current.addData(newDistricts);
  }, [featureId]);

  return (
    <MapContainer
      center={position}
      zoom={9}
      style={{ height: "100vh" }}
      ref={setMap}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {map && (
        <GeoJSON
          ref={geojsonRef}
          data={districts}
          onEachFeature={handleEachFeature}
        />
      )}
    </MapContainer>
  );
}

您可以使用clearLayers方法完全删除它，但这对我来说没有意义，因为一旦单击它，您将只显示单击的区域.我try 了另一种方法，改变了除点击区之外的所有其他地区的风格.通过这种方式，您可以单击一个新的，并恢复上一个的样式.

一个简单的免费geojson用于呈现结果.

Demo