场景

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>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136121.html

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

场景

实现

相关推荐

发表回复