vue+leaflet卷帘（side-by-side）：实现单侧地图切换效果

初始化地图

this.showLayer为了方便remove操作，直接使用this.rightLayer/this.leftLayer/this…compareLayer也是可以的

this.map = L.map("mapContainer", {
        crs: L.CRS.EPSG4326,
        zoom: 14,
        attributionControl: false,
        zoomControl: false
      }).setView([this.center.lat, this.center.lng])
      // 添加放大缩小控件
      this.map.addControl(L.control.zoom({position: 'topright'}))
      // 添加卷帘图层
      this.showLayer.leftLayer = L.supermap.tiledMapLayer(this.layersList[0].server_path, {noWrap: true}).addTo(this.map)
      this.showLayer.rightLayer = L.supermap.tiledMapLayer(this.layersList[1].server_path, {noWrap: true}).addTo(this.map)
      this.showLayer.compareLayer = L.control.sideBySide(this.showLayer.leftLayer, this.showLayer.rightLayer).addTo(this.map)

切换效果

currentLayer为需要切换显示的图层，loc为切换左/右侧的地图

if (loc == 'left') {
        this.map.removeLayer(this.showLayer.leftLayer)
        this.showLayer.leftLayer = L.supermap.tiledMapLayer(currentLayer.server_path, {noWrap: true}).addTo(this.map)
        this.showLayer.compareLayer.setLeftLayers(this.showLayer.leftLayer)
      } else if (loc == 'right') {
        this.map.removeLayer(this.showLayer.rightLayer)
        this.showLayer.rightLayer = L.supermap.tiledMapLayer(currentLayer.server_path, {noWrap: true}).addTo(this.map)
        this.showLayer.compareLayer.setRightLayers(this.showLayer.rightLayer)
      }

监听卷帘事件

//监听卷帘移动
      this.showLayer.compareLayer.on('dividermove', function (e) {
        console.log(e)
      })

注意点

1. 切换时需要先移除当前图层，再添加，否则会造成卷帘时，被卷帘部分为上一个图层的现象。
2. set方法是基于compareLayer的
3. 参考网站：https://github.com/digidem/leaflet-side-by-side