leaflet 添加分屏，比较两个地图的叠加sideBySide

1. 效果如图所示：（分屏效果，可左右滑动，查看叠加效果）

    

2. 首先需要下载leaflet-side-by-side.js，

    可到官网代码中下载：https://github.com/digidem/leaflet-side-by-side

3. 下载的js文件可放到assets中

    然后引入到项目中，本文引用到angular.json中

4. 官网调用方法如下：

    

 var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> 
        contributors'}).addTo(map);


 var stamenLayer = L.tileLayer('https://stamen-tiles- 
                   {s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', { attribution:
                   'Map tiles by <a href="http://stamen.com">Stamen Design<\/a>, ' +
            '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' 
            +'Map data {attribution.OpenStreetMap}',minZoom: 1,maxZoom: 16}).addTo(map)
   

 L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
    

 5. 本文调用如下所示：

     

//左边地图图层
var myLayer1 = L.esri.tiledMapLayer({

url: "mapserver地址",

}).addTo(map)


//右边地图图层
var myLayer2 = L.esri.tiledMapLayer({

url: "mapserver地址",

}).addTo(map);


//两个图层统一放到地图上，且进行分割
var sideLayer = L.control.sideBySide(myLayer1,myLayer2).addTo(map);

6. 这样就可以了，是不是效果出来了呢