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

IT技术 javascript reactjs leaflet react-leaflet
2021-04-29 01:01:30

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

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>
    )
}

我想根据darkModeprops值切换 TileLayer 样式。但是在那个实现中，darkModeproprs的新值不会触发更改<TileLayer />

1个回答

根据官方文档

React Leaflet 中的子组件在创建相应的 Leaflet 实例时使用它们的 props 作为选项，如 Leaflet 的文档中所述。

默认情况下，这些props应该被视为不可变的，只有在此页面中明确记录为可变的props才会在更改时影响 Leaflet 元素。

因此，您将需要一个额外的组件来切换地图底图 tilelayer，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} />
</>

演示

其它你可能感兴趣的问题
上一篇单击链接时，activeClassName 在 sideMenu 上不起作用 下一篇如何在 React JS 中显示来自 API 的所有项目？