react-leaflet中colorMode变化时如何更新TileLayer的url参数

问题原因 #

react-leaflet的TileLayer组件初始化完成后，默认不会响应url属性的更新，即使父组件重渲染传入了新的url，底层的Leaflet瓦片图层实例也不会主动加载新的瓦片资源。

解决方法 #

最简单的实现方案是给TileLayer添加和colorMode绑定的key属性，当key值变化时，React会销毁旧的TileLayer组件实例，重新创建新的实例，自动加载对应url的瓦片。

修改后代码如下：

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

    const 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%' }}>
            {/* 新增绑定colorMode的key属性 */}
            <TileLayer 
              key={colorMode}
              url={colorMode === 'light' ? colorModeUrl[0] : colorModeUrl[1]} 
            />
        </MapContainer>
    )
}

如果不想销毁重建组件，也可以通过ref获取TileLayer的底层实例，在colorMode变化时调用setUrl方法更新瓦片地址：

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

    const 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(() => {
      if(tileLayerRef.current) {
        tileLayerRef.current.setUrl(colorMode === 'light' ? colorModeUrl[0] : colorModeUrl[1])
      }
    }, [colorMode]);

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

内容的提问来源于stack exchange，提问作者Jalu