傳單：在單擊時更改顏色

Question

我試圖在我的 Ionic React 應用程序中的每次點擊時更改我的GeoJSON -Layer 的顏色，但我只在第一次點擊時更改了一次......我的想法是每次功能時更改藍色和紅色之間的顏色被點擊。 我有想法在GeoJSON -Layer 的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和傳單的resetStyle方法獲取 geojson 引用來實現這resetStyle 。 而關於樣式的改變，你只需要在每次點擊后設置顏色。 那里不需要 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} />

這是一個演示，其中包含來自傳單網站的一些數據