并排反应传单
React leaflet side-by-side
我想并排显示两个图块层,就像传单的插件并排显示 (https://github.com/digidem/leaflet-side-by-side)。
但是,我不确定如何使用 React 来做到这一点。有没有办法在反应中使用上述插件?您对如何实现此功能还有其他建议吗?
只需创建一个组件并在导入插件后在 useEffect
中使用本机传单代码。
import "leaflet-side-by-side";
...
const Map = () => {
useEffect(() => {
const map = L.map("map").setView([51.505, -0.09], 13);
const osmLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var stamenLayer = L.tileLayer(
"https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png",
{
attribution:
'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' +
"Map data {attribution.OpenStreetMap}",
minZoom: 1,
maxZoom: 16
}
).addTo(map);
L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
}, []);
return <div id="map" />;
};
我想并排显示两个图块层,就像传单的插件并排显示 (https://github.com/digidem/leaflet-side-by-side)。
但是,我不确定如何使用 React 来做到这一点。有没有办法在反应中使用上述插件?您对如何实现此功能还有其他建议吗?
只需创建一个组件并在导入插件后在 useEffect
中使用本机传单代码。
import "leaflet-side-by-side";
...
const Map = () => {
useEffect(() => {
const map = L.map("map").setView([51.505, -0.09], 13);
const osmLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var stamenLayer = L.tileLayer(
"https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png",
{
attribution:
'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' +
"Map data {attribution.OpenStreetMap}",
minZoom: 1,
maxZoom: 16
}
).addTo(map);
L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
}, []);
return <div id="map" />;
};