背景
最近在做一个vue项目里面需要实现一个地图卷帘功能，本来是打算使用arcgis api 来实现这个功能，后来发现leaflet中的有一个leaflet-side-by-side的插件可以直接使用，于是决定尝试使用leaflet的插件来实现。本以为有插件的存在，肯定可以很快实现，没想到每一步都是坑（主要原因我是菜鸡）。下面讲一下我的爬坑之路。
官网使用方法
var map = L.map('map').setView([51.505, -0.09], 13);
var myLayer1 = L.tileLayer(...).addTo(map);
var myLayer2 = L.tileLayer(...).addTo(map)
L.control.sideBySide(myLayer1, myLayer2).addTo(map);
1.创建一个map实例
2.加载左边的地图
3.加载右边的地图
4.将两个地图放入到sideByside的控件中就可以了。
就是这么简单。然而实际的操作中却是一步一坑啊。为了实现它，在这个过程中用到了很多其他的插件，下面具体介绍。
用到的插件
leaflet，
esri-leafle,
proj4，
proj4leaflet，
leaflet-side-by-side
实现流程
引入插件
import L from 'leaflet';#通过npm安装
import'leaflet/dist/leaflet.css';#
import"../../assets/sliderbyslider/leaflet-side-by-side.js";#通过git地址下载直接引用
import "proj4";#通过npm安装
import "proj4leaflet";#通过npm安装
var esri = require('esri-leaflet')#通过npm安装，直接使用import不起作用，只能通过这种方式。
leaflet, Proj4Leaflet这些都可以使用npm直接安装，为了使用Proj4leaflet时候不出现问题，把proj4也直接引用到了工程中。leaflet-side-by-side.js通过git官网下载，记得把样式拷入到工程文件中。我一开始就是忘记引入样式问题，地图一直出不来，控件错乱。因为我的地图服务是通过arcgis server发布的地图服务，所以用到了esri-leaflet。使用的时候犯了难，不清楚是什么原因，直接import,使用其中的方法都是实现未定义，最后在网上找到了上述的进行引用。
地图参数配置
leaflet中默认加载的地图只有以下几种，本项目中使用的地图是CGCS2000的坐标系，需要使用proj4.js和Proj4leaflet.js来自定义坐标系。具体可参考https://blog.csdn.net/aliasone/article/details/80355184，这种方法我只能实现标准的坐标系，但是地方自定义坐标系，没有成功，如果有大神有更好的方法，希望热心告知。
本文参数配置如下：
origin: [-400.0, 399.9999999999998], //
EPSG: "EPSG:4490", //地图空间参考值
epsginfo: '+proj=longlat +ellps=GRS80 +no_defs', //proj4描述
resolutions: [
1.5228550437313792E-4,
7.614275218656896E-5,
3.807137609328448E-5,
1.903568804664224E-5,
9.51784402332112E-6,
4.75892201166056E-6,
2.37946100583028E-6,
1.18973050291514E-6,
5.9486525145757E-7,
2.97432625728785E-7,
], //分辨率
center: [32.05898506104946, 118.83657915219665], //地图中心点
const CRS = new L.Proj.CRS(mapConfig.EPSG,mapConfig.epsginfo,// EPSG:4490的PROJ.4描述
{
origin: mapConfig.origin,
resolutions: mapConfig.resolutions,
}
);
地图实例化
this.Lmap = L.map('leafletmap',{
crs: CRS, // 定义的坐标系
center: mapConfig.center,
zoom: 3,
});
图层添加
使用esri-leaflt中的方法加载arcgis 发布的地图服务，具体可以参考eari-leaflet网站。本文加载切片服务
this.leftlayer = esri.tiledMapLayer({url:lefturl}).addTo(this.Lmap);
this.rightlayer = esri.tiledMapLayer({url:righturl}).addTo(this.Lmap);
this.sidecontrol = L.control.sideBySide(this.leftlayer,this.rightlayer).addTo(this.Lmap);
this.Lmap.on('layeradd', function(params) {
setTimeout(function update() {
this.sidecontrol._updateClip();
}, 100)
})
实现左右地图动态切换
动态切换地图服务，实现多个地图的对比。
var that = this;
var sidecontrol =that.sidecontrol;
var Lmap =that.Lmap;
var leftlayer =that.leftlayer;
if (sidecontrol && Lmap && leftlayer) {
if ( that.lefturl== that.righturl) {
return;
}
if (Lmap.hasLayer(leftlayer)) {
Lmap.removeLayer(leftlayer);
}
leftlayer = esri.tiledMapLayer({url:that.lefturl});
Lmap.addLayer(leftlayer);
that.leftlayer = leftlayer
that.sidecontrol.setLeftLayers(leftlayer);
};
实现效果
参考
1.https://github.com/digidem/leaflet-side-by-side
2.https://blog.csdn.net/aliasone/article/details/80355184
3.https://blog.csdn.net/liyuanxiang1984/article/details/54947345
4.https://blog.csdn.net/qq_34790644/article/details/89308133
5.https://epsg.io/2439
6.http://esri.github.io/esri-leaflet/
