iClient for Leaflet卷帘功能实现

最新推荐文章于 2024-05-09 09:20:26 发布

原创最新推荐文章于 2024-05-09 09:20:26 发布 · 2.4k 阅读

15 ·

CC 4.0 BY-SA版权

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

文章标签：

#leaflet #iclient #卷帘

WebGIS 专栏收录该内容

145 篇文章

订阅专栏

本文介绍了一款自定义的Leaflet卷帘插件，不仅支持上下左右卷帘，还兼容多种图层类型，如栅格、矢量和标记层。通过调整不同图层的显示顺序和裁剪矩形的CSS，实现了更灵活的地图图层对比功能。

作者：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

<!-- leaflet库文件 -->
<script type="text/javascript" src="../leaflet/include-leaflet.js"></script>
<!-- 卷帘插件 -->
<script type="text/javascript" src="../leaflet/leaflet-side-by-side_udlr_iclient.js"></script>

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才行。

 //创建不同层级的pane
    map.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裁剪。

 //tilelayer
	  var 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);
  //vectorlayer
	  var 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)
 //markerlayer
	  var 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.youkuaiyun.com/download/supermapsupport/11966799
插件源码见leaflet目录下的leaflet-side-by-side_udlr_iclient.js文件
实现代码见html目录下的roller.html文件