leaflet 多个影像进行卷帘，leaflet卷帘移除

单个影像卷帘：

leaflet 卷帘，比较两个地图的叠加sideBySide_小武的博客-CSDN博客_leaflet 分屏

多个影像只是把单个的变成数组就可以,效果如下图所示：

多个影像需要修改sideByside源代码：如下所示：

leaflet-side-by-side.js-Web开发文档类资源-CSDN下载

先定义全局变量

//左右影像集合数组
leftAllLayer= []
rightAllLayer=[]

 添加卷帘效果

var leftLayer = L.tileLayer(url, {maxZoom: 22}).addTo(map);var leftLayer2 = L.tileLayer(url, {maxZoom: 22}).addTo(map);//左影像集合this.leftAllLayer.push(leftLayer);this.leftAllLayer.push(leftLayer2);var rightAllLayer=[]var rightLayer= L.tileLayer(url, {maxZoom: 22}).addTo(map);var rightLayer2 = L.tileLayer(url, {maxZoom: 22}).addTo(map);//右影像集合this.rightAllLayer.push(rightLayer);this.rightAllLayer.push(rightLayer2 );this.siderLayer=L.control.sideBySide(this.leftAllLayer, this.rightAllLayer).addTo(map);

卷帘移除：

  单个影像卷帘移除：

  if (map.hasLayer(this.leftLayer)) {map.removeLayer(this.leftLayer);} if (map.hasLayer(this.rightLayer)) {map.removeLayer(this.rightLayer);}   //移除的中间的卷帘条 if (this.sideLayer != undefined) {map.removeControl(this.sideLayer);}

  多个影像卷帘移除：

    this.leftAllLayer.filter(e => {if (map.hasLayer(e)) {map.removeLayer(e);}})this.rightAllLayer.filter(e => {if (map.hasLayer(e)) {map.removeLayer(e);}})if (this.sideLayer != undefined) {map.removeControl(this.sideLayer);}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！