iClient for Leaflet卷帘功能实现

作者：LX

背景

对于Leaflet卷帘功能的实现，Leaflet插件库中有个插件Leaflet.Control.SideBySide，相信用过的小伙伴应该都知道这个插件是有一定局限性的，这个卷帘插件只支持左右卷帘功能，只对栅格图层有效，而且左右两边分别只对一个图层有效。但是有些项目中需要用到上下卷帘和多个不同类型的图层实现卷帘的效果，为此小编给大家重新写了一个插件可以支持上下左右卷帘还可以支持栅格、矢量、marker等多个图层。
话不多说，先看效果吧！

实现思路：

将不同的图层渲染在不同的div容器中，然后给图层所在的div容器设置了一个裁剪裁剪矩形的css。

实现代码:

插件代码可点击文末链接下载资源，在资源文件夹里面的leaflet目录下找到leaflet-side-by-side_udlr_iclient.js文件，在项目中引用即可。
下面小编给大家介绍一下具体的用法：
1、引用leaflet库文件和leaflet-side-by-side_udlr_iclient.js

2、创建地图

var map = L.map('map', {crs: L.CRS.EPSG4326,center: {lon: 0, lat: 0},maxZoom: 18,zoom: 2});

3、创建不同层级的pane，用于控制图层的显示顺序。由于tilelayer所在的容器tilePane的zIndex 是200，所以叠加在tilelayer之上的图层所在的pane的zIndex 应该大于200才行。

 //创建不同层级的panemap.createPane('polygon1');map.getPane('polygon1').style.zIndex =205;map.createPane('polygon2');map.getPane('polygon2').style.zIndex =206;map.createPane('markerlayer');map.getPane('markerlayer').style.zIndex =207;map.createPane('markerlayer1');map.getPane('markerlayer1').style.zIndex =207;

4、定义不同类型的图层，分别设置pane属性，并添加到地图上。因为默认的矢量要素全部放在一个pane中不能裁剪，需要把不同的矢量图层分别放置在不同的div中才能针对div实现css裁剪。

 //tilelayervar osmLayer = L.supermap.tiledMapLayer(host + '/iserver/services/map-world/rest/maps/世界地图_Night', {noWrap: true}).addTo(map);var stamenLayer = L.supermap.tiledMapLayer(host + '/iserver/services/map-world/rest/maps/World', {noWrap: true}).addTo(map);//vectorlayervar polygon1 = L.polygon([[0, 0], [-30, 0], [-10, 30], [0, 0]], {color: 'red',pane:'polygon1'}).addTo(map);var polygon2 = L.polygon([[-10, -10], [-30, 0], [-10, -30], [-10, -10]], {color: 'red',pane:'polygon2'}).addTo(map)//markerlayervar markerlayer=L.marker([20, 20],{pane:'markerlayer',icon:L.icon({iconUrl: './leaf-green.png',shadowUrl: './leaf-shadow.png',iconSize: [44, 44]})}).addTo(map);var markerlayer1=L.marker([-30, -30],{pane:'markerlayer1',icon:L.icon({iconUrl: './airportRed.png',iconSize: [44, 44]})}).addTo(map);

5、创建卷帘控件。
卷帘初始化需要设置三个参数leftLayers, rightLayers, options
leftLayers：在左右卷帘中，传左边显示的图层；在上下卷帘中，传上面显示的图层。
rightLayers：在左右卷帘中，传右边显示的图层；在上下卷帘中，传下面显示的图层。
options：可以传三个参数，thumbSize是滑块自身的大小，padding滑块的padding，都是以像素为单位；sbsctrdirection表示卷帘方向参数,可以设值leftright和updown。

 var sbsControl=null;createsbs();//创建卷帘function createsbs(){//获取被选中的input框的value值var sbsdirection=$('input[type=radio][name="roller-category"]:checked').val();//根据选中状态创建初始化卷帘控件switch (sbsdirection) {case 'rl-roller':sbsControl=L.control.sideBySide([osmLayer,polygon2,markerlayer1], [stamenLayer,polygon1,markerlayer],{sbsctrdirection:"leftright"});break;case 'ud-roller':sbsControl=L.control.sideBySide([stamenLayer,polygon2,markerlayer], [osmLayer,polygon1,markerlayer1],{sbsctrdirection:"updown"});break;}sbsControl.addTo(map);}   //监听input框的选中状态切换卷帘显示方向$('input[type=radio][name="roller-category"]').on("input propertychange", function () {if(sbsControl){sbsControl.remove();createsbs();}})

6、清除卷帘，直接调remove方法

 //清除卷帘function removesbs(){sbsControl.remove();}

卷帘插件和用法的完整代码点击如下链接下载：
https://download.csdn.net/download/supermapsupport/11966799
插件源码见leaflet目录下的leaflet-side-by-side_udlr_iclient.js文件
实现代码见html目录下的roller.html文件

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