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

素颜马尾好姑娘i 2023-10-01 11:55 67阅读 0赞

## 场景 ##

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

[Vue+Leaflet实现加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Vue_Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]

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

[Vue+Leaflet实现加载Stamen显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Vue_Leaflet_Stamen_BADAO_LIUMANG_QIZHI_-CSDN]

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

![30c68cea79194ef0b48d41044129b6cd.gif][]

官网插件说明：

[Plugins - Leaflet - a JavaScript library for interactive maps][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

github地址：

[GitHub - digidem/leaflet-side-by-side: A Leaflet control to add a split screen to compare two map overlays][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,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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 {
      width: 100%;
      height: 400px;
    }
    </style>

[Vue_Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394
[Vue_Leaflet_Stamen_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122318989
[30c68cea79194ef0b48d41044129b6cd.gif]: https://img-blog.csdnimg.cn/30c68cea79194ef0b48d41044129b6cd.gif
[Plugins - Leaflet - a JavaScript library for interactive maps]: https://leafletjs.com/plugins.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6f28121df0b043de919f243951197530.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[GitHub - digidem_leaflet-side-by-side_ A Leaflet control to add a split screen to compare two map overlays]: https://github.com/digidem/leaflet-side-by-side
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e3def4e8fb844d2ea9b8083c79cfef4e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16