Блог

Мой вопрос в том, как изменить 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>
    )
}
 

Я хотел бы переключить стиль TileLayer в зависимости от darkMode значения реквизита. Но в этой реализации новые значения в darkMode proprs не вызывают изменений в <TileLayer />

Согласно официальным документам

Дочерние компоненты в React Leaflet используют свои реквизиты в качестве параметров при создании соответствующего экземпляра Leaflet, как описано в документации Leaflet .

По умолчанию эти реквизиты должны рассматриваться как неизменяемые, только реквизиты, явно задокументированные как изменяемые на этой странице, будут влиять на элемент листовки при изменении.

Поэтому вам понадобится дополнительный компонент, который будет переключать tilelayer базовой карты map.addLayer() карты, и вам не нужно будет использовать TileLayer от react-leaflet, но вы создадите свой собственный. Вы можете дополнительно настроить его в соответствии с вашими требованиями.

 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 создайте переменную состояния для сохранения статуса darkMode и используйте, например, кнопку для переключения статуса darkMode.

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

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

ДЕМОНСТРАЦИЯ