并排反应传单 [英] React leaflet side-by-side
本文介绍了并排反应传单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想并排显示两个图块层,就像传单的插件并排显示(
解决方案
只需创建一个组件并在导入插件后使用 useEffect
中的原生传单代码即可.
导入并排放置的小叶";...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",{归因:'& copy;< a href ="http://osm.org/copyright"> OpenStreetMap</a>贡献者的}).addTo(map);var stamenLayer = L.tileLayer("https://stamen-tiles- {s} .a.ssl.fastly.net/watercolor/{z}/{x}/{y} .png",{归因:'通过< a href ="http://stamen.com"> Stamen Design</a>绘制地图图块,'+'< a href ="http://creativecommons.org/licenses/by/3.0"> CC BY 3.0</a>& mdash;'+地图数据{attribution.OpenStreetMap}",minZoom:1maxZoom:16}).addTo(map);L.control.sideBySide(stamenLayer,osmLayer).addTo(map);},[]);返回< div id ="map"/> ;;};
I wanted to show two tile layers side by side, like the plugin side-by-side for leaflet (https://github.com/digidem/leaflet-side-by-side).
However, I am not sure how to do this with react. Is there a way to use the above mentioned plugin in react? Do you have any other suggestions on how to accomplish this functionality?
解决方案
Just create a component and use the native leaflet code inside a useEffect
after importing the plugin.
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" />;
};
这篇关于并排反应传单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文