我想并排显示两个图 block 层,就像并排的传单插件 ( https://github.com/digidem/leaflet-side-by-side )。
但是,我不知道如何用 react 来做到这一点。有没有办法在react中使用上述插件?您对如何实现此功能还有其他建议吗?
最佳答案
只需创建一个组件,并在导入插件后在 useEffect
中使用 native 传单代码。
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" />;
};
关于javascript - 并排 react 传单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59374092/