背景
最近在做一個(gè)vue項(xiàng)目里面需要實(shí)現(xiàn)一個(gè)地圖卷簾功能帮掉，本來(lái)是打算使用arcgis api 來(lái)實(shí)現(xiàn)這個(gè)功能唐含，后來(lái)發(fā)現(xiàn)leaflet中的有一個(gè)leaflet-side-by-side的插件可以直接使用，于是決定嘗試使用leaflet的插件來(lái)實(shí)現(xiàn)秕硝。本以為有插件的存在，肯定可以很快實(shí)現(xiàn)洲尊，沒(méi)想到每一步都是坑（主要原因我是菜雞）远豺。下面講一下我的爬坑之路。
官網(wǎng)使用方法
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.創(chuàng)建一個(gè)map實(shí)例
2.加載左邊的地圖
3.加載右邊的地圖
4.將兩個(gè)地圖放入到sideByside的控件中就可以了坞嘀。
就是這么簡(jiǎn)單躯护。然而實(shí)際的操作中卻是一步一坑啊。為了實(shí)現(xiàn)它丽涩，在這個(gè)過(guò)程中用到了很多其他的插件棺滞，下面具體介紹。
用到的插件
leaflet矢渊，
esri-leafle,
proj4继准，
proj4leaflet，
leaflet-side-by-side
實(shí)現(xiàn)流程
引入插件
import L from 'leaflet';#通過(guò)npm安裝
import'leaflet/dist/leaflet.css';#
import"../../assets/sliderbyslider/leaflet-side-by-side.js";#通過(guò)git地址下載直接引用
import "proj4";#通過(guò)npm安裝
import "proj4leaflet";#通過(guò)npm安裝
var esri = require('esri-leaflet')#通過(guò)npm安裝矮男，直接使用import不起作用移必，只能通過(guò)這種方式。
leaflet, Proj4Leaflet這些都可以使用npm直接安裝毡鉴，為了使用Proj4leaflet時(shí)候不出現(xiàn)問(wèn)題恢氯，把proj4也直接引用到了工程中敏弃。leaflet-side-by-side.js通過(guò)git官網(wǎng)下載，記得把樣式拷入到工程文件中。我一開(kāi)始就是忘記引入樣式問(wèn)題赶站，地圖一直出不來(lái)，控件錯(cuò)亂启搂。因?yàn)槲业牡貓D服務(wù)是通過(guò)arcgis server發(fā)布的地圖服務(wù)窖式，所以用到了esri-leaflet。使用的時(shí)候犯了難，不清楚是什么原因含潘，直接import,使用其中的方法都是實(shí)現(xiàn)未定義饲做，最后在網(wǎng)上找到了上述的進(jìn)行引用。
地圖參數(shù)配置
leaflet中默認(rèn)加載的地圖只有以下幾種遏弱，本項(xiàng)目中使用的地圖是CGCS2000的坐標(biāo)系盆均，需要使用proj4.js和Proj4leaflet.js來(lái)自定義坐標(biāo)系。具體可參考https://blog.csdn.net/aliasone/article/details/80355184漱逸，這種方法我只能實(shí)現(xiàn)標(biāo)準(zhǔn)的坐標(biāo)系泪姨，但是地方自定義坐標(biāo)系，沒(méi)有成功饰抒，如果有大神有更好的方法肮砾，希望熱心告知。
本文參數(shù)配置如下：
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], //地圖中心點(diǎn)
const CRS = new L.Proj.CRS(mapConfig.EPSG,mapConfig.epsginfo,// EPSG:4490的PROJ.4描述
{
origin: mapConfig.origin,
resolutions: mapConfig.resolutions,
}
);
地圖實(shí)例化
this.Lmap = L.map('leafletmap',{
crs: CRS, // 定義的坐標(biāo)系
center: mapConfig.center,
zoom: 3,
});
圖層添加
使用esri-leaflt中的方法加載arcgis 發(fā)布的地圖服務(wù)袋坑，具體可以參考eari-leaflet網(wǎng)站仗处。本文加載切片服務(wù)
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)
})
實(shí)現(xiàn)左右地圖動(dòng)態(tài)切換
動(dòng)態(tài)切換地圖服務(wù)，實(shí)現(xiàn)多個(gè)地圖的對(duì)比枣宫。
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);
};
實(shí)現(xiàn)效果
參考
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/
