场景

Vue+Leaflet实现加载OSM显示地图：

Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

Vue+Leaflet实现加载Stamen显示地图：

Vue+Leaflet实现加载Stamen显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面加载显示两种地图显示的基础上，怎样实现两边对着查看，实现卷帘效果。

官网插件说明：

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的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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: '&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>

Vue+Leaflet-side-by-side插件实现拉帘对比效果相关推荐

Leaflet中使用leaflet-search插件实现搜索定位效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件实现搜索定位效果 ...
Leaflet中使用awesome-markers插件显示带图标的marker
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,实现Marker上带图标 ...
Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样实现地图全屏效果. ...
Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件Moving ...
开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue分页+spring boot +分页插件pagehelper
vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013
vue 分享给好友点击分享按钮_基于vue+leaflet+echart的足迹分享评论平台
系统操作https://www.zhihu.com/video/1160268313283821568 基于vue+leaflet+Cesium的足迹分享评论平台 (其实题目是随便取的,目的只是用来证 ...
Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...

Vue+Leaflet-side-by-side插件实现拉帘对比效果

场景

实现

Vue+Leaflet-side-by-side插件实现拉帘对比效果相关推荐

最新文章

热门文章