Блог

Я создаю приложение React, которое имеет карту листовки и интегрирует плагин Leaflet Timedimension.
Цель состоит в том, чтобы иметь карту с несколькими кругами, которые меняют радиус и цвет всякий раз, когда плагин Timedimension загружает новое время.

Я успешно создал карту, на которой есть несколько кругов, которые меняются в зависимости от времени плагина Timedimension (currentTimeIndex изменяется при загрузке нового времени), но цвет не изменится.
Следующий код — это мой подход к проблеме:

       data.map((region) =>
        region.items.map((market) => (
          <Circle
            center={[market.lat, market.lon]}
            radius={values[currentTimeIndex]}
            pane='markets'
            key={market.id}
            color={colors[currentTimeIndex]}
          />
        )),
      )
 

Возможно ли изменить цвет круга без их удаления и повторного добавления?

Я оставлю здесь codesandbox с полным кодом.

По странным причинам, которые я не могу толком объяснить, похоже colors , что он не обновляется, хотя pathOptions , похоже, работает так, как задумано.

Я немного обновил ваш codesandbox, который, похоже, дает желаемый результат, были изменены следующие:

• Я colors вышел из компонента листовки, поскольку он на самом деле является константой.
• Я добавил useMemo хук, чтобы получить текущий цвет в соответствии с currentTimeIndex .
• Я изменился color pathOptions , и это реальное исправление, которое вам нужно сделать.

Примечание: я не уверен, как вы хотите оформить сам круг. В случае, если вы хотите использовать как заливку, так и обводку, используйте fill и color pathOptions ввод , вы можете найти документацию об этом в типизациях: https://definitelytyped.org/docs/leaflet—leaflet/interfaces/l.pathoptions.html

Соответствующий код:

 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
            }}
          />
        ))
      )}
    </>
  );
};
 

Шаг 0 (красный цвет):

Шаг 1 (цвет зеленый):

Обновленный codesandbox: https://codesandbox.io/s/upbeat-dew-x11s1?file=/src/Leaflet.js