[英]React leaflet side-by-side
我想并排显示两个平铺层,就像传单的并排插件( https://github.com/digidem/leaflet-side-by-side )。
但是,我不确定如何通过反应来做到这一点。 有没有办法在反应中使用上述插件? 您对如何完成此功能还有其他建议吗?
只需在导入插件后创建一个组件并在useEffect
使用本机传单代码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" />;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.