Estoy tratando de cambiar el color de mi GeoJSON -Layer en cada clic en mi aplicación Ionic React, pero solo logré cambiarlo una vez para el primer clic... Mi idea era cambiar el color entre azul y rojo cada vez que una característica se hace clic. Tuve la idea de verificar el color en las options de GeoJSON -Layer, pero como está escrito, solo cambia el color una vez para el primer clic y luego no sucede nada en ningún otro clic.
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='© <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 © Esri — 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 LeafletMapHay una manera mucho más simple de lograr el comportamiento deseado. Puedo dar un ejemplo usando un geojson y luego puedes ajustarlo a tus necesidades.
Debe restablecer el estilo geojson después de cada clic de capa. Puede lograrlo tomando una referencia de geojson usando el método resetStyle de react ref y del folleto. Y en cuanto al cambio de estilo, solo necesita configurar el color después de cada clic. No hay necesidad de declaraciones if allí.
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} />Aquí hay una demostración con algunos datos tomados del sitio web del folleto.