0
475
VistasCambiar el color de React Leaflet Circle con el complemento Leaflet Timedimension
Estoy creando una aplicación React que tiene un mapa de folletos e integra el complemento Leaflet Timedimension.
El objetivo es tener un mapa que tenga algunos círculos, esos cambios de radio y color cada vez que el complemento Timedimension carga una nueva hora.
Creé con éxito un mapa que tiene algunos círculos que cambian según los tiempos del complemento Timedimension (currentTimeIndex cambia cada vez que se carga un nuevo tiempo), pero el color no cambiaría.
El siguiente código es mi enfoque del problema:
data.map((region) => region.items.map((market) => ( <Circle center={[market.lat, market.lon]} radius={values[currentTimeIndex]} pane='markets' key={market.id} color={colors[currentTimeIndex]} /> )), )¿Es posible cambiar el color del Círculo sin tener que quitarlos y volver a agregarlos?
Dejaré aquí loscódigos y la caja con el código completo.
1 Respuestas
Responde la pregunta0
Por razones extrañas que realmente no puedo explicar, parece que los colors no se actualizan, mientras que pathOptions parece funcionar según lo previsto.
Actualicé ligeramente su codesandbox que parece producir el resultado deseado, se cambió lo siguiente:
- He quitado los
colorsdel componente Folleto ya que en realidad es una constante. - He agregado un
useMemopara obtener el color actual de acuerdo con currentTimeIndex. - Cambié
colorconpathOptions, que es la solución real que debes hacer.
Nota al margen: no estoy seguro de cómo desea diseñar el círculo en sí. En caso de que quiera usar relleno y trazo, use fill y color en pathOptions , puede encontrar documentación sobre eso en los tipos: https://definitelytyped.org/docs/leaflet--leaflet/interfaces/l.patoptions.html
Código relevante:
const colors = ["red", "green", "blue", "black", "purple", "gray"]; const Leaflet = () => { const map = useMap(); const [currentTimeIndex, setCurrentTimeIndex] = useState(0); const values = [5, 15, 25, 5, 15, 25, 5]; map.timeDimension.on("timeloading", (data) => { console.log(data.target._currentTimeIndex); setCurrentTimeIndex(data.target._currentTimeIndex); }); const currentColor = useMemo(() => colors[currentTimeIndex], [ currentTimeIndex ]); return ( <> <Pane name="markets" /> <TileLayer url={"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"} /> {SenegalData.map((region) => region.items.map((market) => ( <Circle center={[market.lat, market.lon]} radius={values[currentTimeIndex] * 1000} pane="markets" key={market.id} pathOptions={{ color: currentColor }} /> )) )} </> ); }; Paso 0 (color rojo): 
Paso 1 (color verde): 
Codesandbox actualizado: https://codesandbox.io/s/upbeat-dew-x11s1?file=/src/Leaflet.js