在状态更改时更改 TileLayer 中的图块

Question

我的问题是在这种情况下如何更改 url 瓦片地图：

function ChangeView({ center, zoom }) {
    const map = useMap();
    map.setView(center, zoom);
    return null;
}   

function TrackerMap({ darkMode, countries, casesType, center, zoom}) {

    const currentTheme = useContext(ThemeContext);
    const mapTheme = darkMode ? `https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png` : `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`;

    return (
        <MapWrapper currentTheme={currentTheme}>
            <MapContainer center={center} zoom={zoom}>
                <ChangeView center={center} zoom={zoom} />  
                <TileLayer 
                    url={mapTheme}
                />
            </MapContainer>
        </MapWrapper>
    )
}

我想根据 darkMode 属性值切换 TileLayer 样式。但是在该实现中，darkMode 属性的新值不会触发 <TileLayer />

的更改

Answer 1

据官方报道docs

Child components in React Leaflet use their props as options when creating the corresponding Leaflet instance, as described in Leaflet's documentation.

By default these props should be treated as immutable, only the props explicitely documented as mutable in this page will affect the Leaflet element when changed.

因此，您将需要一个额外的组件，它将使用 map.addLayer() 切换地图底图平铺层，并且您将不需要使用 react-leaflet 的 TileLayer，但您将构建自己的。您可以根据您的要求进一步调整它。

function TileLayer({ darkMode }) {
  const map = useMap();
  var dark = L.tileLayer(
    "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
  );
  const normal = L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  );
  map.addLayer(darkMode ? dark : normal);

  return null;
}

将其作为 MapContainer 的子项导入

<MapContainer center={center} zoom={zoom} style={{ height: "100vh" }}>
      <ChangeView center={center} zoom={zoom} />
      <TileLayer darkMode={darkMode} />
 </MapContainer>

现在在您使用 TrackerMap 的组件上创建一个状态变量来保存暗模式状态，并使用例如一个按钮来切换暗模式状态。

const [isDark, setIsDark] = useState(false);

<>
  <button onClick={() => setIsDark((prevState) => !prevState)}>
        Change basemap
  </button>
  <TrackerMap center={position} zoom={12} darkMode={isDark} />
</>

Demo

在状态更改时更改 TileLayer 中的图块

Change tile at TileLayer at state change

javascript

leaflet

reactjs

react-leaflet