小编Jal*_*alu的帖子

更新react-leaflet中的tileLayer url

因此,我运行此代码来渲染传单,尝试在 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>
    )
}
Run Code Online (Sandbox Code Playgroud)

javascript leaflet reactjs react-leaflet chakra-ui

1
推荐指数
2
解决办法
4839
查看次数

标签 统计

chakra-ui ×1

javascript ×1

leaflet ×1

react-leaflet ×1

reactjs ×1