传单：更改颜色 onClick

Question

我试图在我的 Ionic React 应用程序中每次点击时更改我的 GeoJSON-Layer 的颜色，但我只设法在第一次点击时更改它一次......我的想法是改变每次单击某个功能时蓝色和红色之间的颜色。我想检查 GeoJSON 层的 options 中的颜色，但正如所写，它只会在第一次点击时更改一次颜色，之后任何其他点击都不会发生任何变化。

function LeafletMap() {
  const [map, setMap] = useState(null)

  const onEachClick = (info, layer) => {
    const part = info.properties.Objekt_ID
    const id = info.properties.FID_

    layer.bindPopup("Object ID: <b>" + part + "</b><br>FID: <b>" + id + "</b>")

    if(layer.options.color != "blue") {
      layer.on({
        click: (event) => {
          event.target.setStyle({
            color: "blue",
          });
        }
      }) 
    } else {
      layer.on({
        click: (event) => {
          event.target.setStyle({
            color: "red",
          });
        }
      }) 
    }
  }

  const displayMap = useMemo(
    () => (
      <MapContainer
        center={center}
        zoom={zoom}
        scrollWheelZoom={false}
        whenCreated={setMap}>
        <LayersControl position="topright">
          <LayersControl.BaseLayer checked name="OpenStreetMap - Map">
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer name="Esri - Satelite">
            <TileLayer
              attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
              url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
            />
          </LayersControl.BaseLayer>
        </LayersControl>

        <GeoJSON data={PL.features} onEachFeature={onEachClick} color="blue"/>
        <GeoJSON data={WWD.features} onEachFeature={onEachClick} color="blue"/>
      </MapContainer>
    ),
    [],
  )

  window.dispatchEvent(new Event('resize'));

  return (
    <div>
      {displayMap}
    </div>
  )

}
export default LeafletMap

Answer 1

有一种非常简单的方法可以实现所需的行为。我可以用一个 geojson 举个例子，然后你可以根据你的需要调整它。

您需要在每次点击图层后重新设置geojson 样式。您可以通过使用 react ref 和 leaflet 的 resetStyle 方法获取 geojson 参考来实现这一点。而关于样式的变化，你只需要在每次点击后设置颜色。那里不需要 if 语句。

const geoJsonRef = useRef();

  const onEachClick = (feature, layer) => {
    const name = feature.properties.name;
    const density = feature.properties.density;

    layer.bindPopup(
      "Name: <b>" + name + "</b><br>Density: <b>" + density + "</b>"
    );

    layer.on({ click: handleFeatureClick });
  };

  const handleFeatureClick = (e) => {
    if (!geoJsonRef.current) return;
    geoJsonRef.current.resetStyle();

    const layer = e.target;

    layer.setStyle({ color: "red" });
  };

...
<GeoJSON ref={geoJsonRef} />

这是一个demo，其中一些数据取自传单网站

传单：更改颜色 onClick

Leaflet: Change color onClick

javascript

geojson

leaflet

reactjs

react-leaflet