场景
Vue+Leaflet实现加载OSM显示地图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394
Vue+Leaflet实现加载Stamen显示地图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122318989
在上面加载显示两种地图显示的基础上,怎样实现两边对着查看,实现卷帘效果 。
官网插件说明:
https://leafletjs.com/plugins.html
github地址:
https://github.com/digidem/leaflet-side-by-side
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、安装leaflet-side-by-side插件
npm install leaflet-side-by-side --save
2、新建地图并添加两个图层
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: '© <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> — ' + '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: '© <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> — ' + 'Map data {attribution.OpenStreetMap}', minZoom: 1, maxZoom: 16 }).addTo(this.map) L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map); }, }, }; </script> <style scoped> .map { 100%; height: 400px; } </style>