更新react-leaflet中的tileLayer url

Question

因此，我运行此代码来渲染传单，尝试在 colorMode 更改时替换 url 是这里的挑战。

useEffect 被触发，显示正确的变量，但我无法以任何方式更新该 TileLayer。

export const Map = () => {
    const { colorMode } = useColorMode();

    let state = { center: { lat: 51.505, lng: -0.09 }, zoom: 13 };

    const colorModeUrl = ['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png']
    useEffect(() => {
      console.log(colorMode);
    }, [colorMode]);

    return (
        <MapContainer
            center={state.center}
            zoom={state.zoom}
            style={{ height: '100%' }}>
            <TileLayer url={colorMode === 'light' ? colorModeUrl[0] : colorModeUrl[1]} />
        </MapContainer>
    )
}

Answer 1

查看TileLayer 文档，该urlprop 是不可变的。初始渲染后，如果 prop 发生更改，组件将不会更新：

ref但是，您可以向图层添加 a并以这种方式更新 url

export const Map = () => {
  const ref = useRef(null);
  const state = { center: { lat: 51.505, lng: -0.09 }, zoom: 13 };
  const { colorMode } = useColorMode();

  const light = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
  const dark =
 "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png";

  };

  useEffect(() => {
    if (ref.current) {
      ref.current.setUrl(colorMode === "light" ? light : dark);
    }
  }, [colorMode]);

  return (
    <div>
      <MapContainer
        center={state.center}
        zoom={state.zoom}
        style={{ height: "100%" }}
      >
        <TileLayer ref={ref} url={colorMode === "light" ? light : dark} />
      </MapContainer>
    </div>
  );
};

https://codesandbox.io/s/react-leaflet-forked-1534x?file=/src/index.js:0-1158

Answer 2

我今天遇到了类似的问题，尝试使用react-leaflet v4更改TileLayer。正如已接受的答案中提到的，TileLayer url 属性的不变性是问题所在。我非常简单的解决方法是将一个“key”属性传递给 TileLayer，只要命令新的图块源，该属性就会发生变化。这将强制重新安装 TileLayer 组件。

希望这不是一种微妙的危险或反模式，但它似乎可以以最小的复杂性工作。