場(chǎng)景

Vue+Leaflet實(shí)現(xiàn)加載OSM顯示地圖：

Vue+Leaflet實(shí)現(xiàn)加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客

Vue+Leaflet實(shí)現(xiàn)加載Stamen顯示地圖：

Vue+Leaflet實(shí)現(xiàn)加載Stamen顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面加載顯示兩種地圖顯示的基礎(chǔ)上，怎樣實(shí)現(xiàn)兩邊對(duì)著查看，實(shí)現(xiàn)卷簾效果 。

官網(wǎng)插件說(shuō)明：

Plugins - Leaflet - a JavaScript library for interactive maps

github地址：

GitHub - digidem/leaflet-side-by-side: A Leaflet control to add a split screen to compare two map overlays

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、安裝leaflet-side-by-side插件

npm install leaflet-side-by-side --save

2、新建地圖并添加兩個(gè)圖層

?this.map = L.map('map').setView([51.505, -0.09], 13);var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="OpenStreetMap<\/a'" DESIGNTIMESP=9853>OpenStreetMap<\/a'" DESIGNTIMESP=9840>http://osm.org/copyright">OpenStreetMap<\/a> contributors'}).addTo( this.map);var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {attribution:'Map tiles by <a href="Stamen'" DESIGNTIMESP=9858>Stamen'" DESIGNTIMESP=9845>http://stamen.com">Stamen Design<\/a>, ' +'<a href="CC'" DESIGNTIMESP=9860>CC'" DESIGNTIMESP=9847>http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +'Map data {attribution.OpenStreetMap}',minZoom: 1,maxZoom: 16}).addTo(this.map)?

3、地圖添加到插件，插件添加到地圖

L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map);

4、完整代碼

? <template><div id="map" class="map"></div> </template><script> import 'leaflet/dist/leaflet.css' import L from 'leaflet' import 'leaflet-side-by-side' export default {name: "leafletSideBySide",data() {return {map:null,};},mounted() {this.initMap();},methods: {initMap() {this.map = L.map('map').setView([51.505, -0.09], 13);var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="OpenStreetMap<\/a'" DESIGNTIMESP=9890>http://osm.org/copyright">OpenStreetMap<\/a> contributors'}).addTo( this.map);var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {attribution:'Map tiles by <a href="Stamen'" DESIGNTIMESP=9895>http://stamen.com">Stamen Design<\/a>, ' +'<a href="CC'" DESIGNTIMESP=9897>http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +'Map data {attribution.OpenStreetMap}',minZoom: 1,maxZoom: 16}).addTo(this.map)L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map);},}, }; </script><style scoped> .map {width: 100%;height: 400px; } </style>?

總結(jié)

以上是生活随笔為你收集整理的Vue+Leaflet-side-by-side插件实现拉帘对比效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。