使用 Leaflet Timedimension 插件更改 React Leaflet Circle 颜色

Question

我正在构建一个具有 Leaflet 地图并集成了 Leaflet Timedimension 插件的 React 应用程序。
目标是拥有一个包含一些圆圈的地图，只要 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 和完整的代码留在这里。

Answer 1

由于奇怪的原因我无法真正解释，似乎 colors 没有更新，而 pathOptions 似乎按预期工作。

我稍微更新了您的 codesandbox，它似乎产生了预期的结果，更改了以下内容：

我已将 colors 移出 Leaflet 组件，因为它实际上是一个常量。
我添加了一个 useMemo 钩子来根据 currentTimeIndex 获取当前颜色。
我已将 color 更改为 pathOptions，这是您真正需要做的修复。

旁注：我不确定您想如何设计圆圈本身的样式。如果您想同时使用填充和描边，请在 pathOptions 中使用 fill 和 color，您可以在打字中找到相关文档：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 步（绿色）：

更新的代码和框：https://codesandbox.io/s/upbeat-dew-x11s1?file=/src/Leaflet.js

使用 Leaflet Timedimension 插件更改 React Leaflet Circle 颜色

Changing React Leaflet Circle color with Leaflet Timedimension Plugin

javascript

leaflet

reactjs

react-leaflet