如何解决在状态更改时更改 TileLayer 上的图块
我的问题是在这种情况下如何更改瓦片地图的网址:
Amount = 425.50
Rate = 1.6951
yRate = unknown
xRate = yRate*1.6951
Amount = yRate + xRate which is known 425.50
我想切换与 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
proprs 处的新值不会触发 darkMode
解决方法
根据官方docs
React Leaflet 中的子组件在创建相应的 Leaflet 实例时使用它们的 props 作为选项,如 Leaflet 的文档中所述。
默认情况下,这些 props 应该被视为不可变的,只有 props 在此页面中明确记录为可变的将影响传单 元素改变时。
因此,您将需要一个额外的组件来使用 map.addLayer()
切换地图底图 tilelayer,并且您不需要使用 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} />
</>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。