iClient for Leaflet子图层控制实现方法

作者：LX

背景

        在使用SuperMap iClient for JavaScript 9D产品过程中，经常有一些小伙伴会问如何用iClient for Leaflet实现子图层控制，本文就是针对这个问题写了一个例子，供大家参考和借鉴。

其实实现这个功能很简单，主要是通过如下几个步骤：

1. 引入Leaflet脚本库
2. 与服务器交互得到子图层信息
3. 组装操作面板，显示子图层列表
4. 创建临时图层来初始化当前地图显示
5. 控制子图层可见性
6. 获取当前地图子图层状态信息,刷新地图

实现代码

1.引入Leaflet脚本库

2.与服务器交互得到子图层信息

   function getLayersInfo() {
            // 获取地图状态参数必设：url
            //获取图层信息的方法是getLayersInfo
			L.supermap
		   .layerInfoService(url)
		   .getLayersInfo(function(getLayersInfoEventArgs){
		        var subLayers = new Array();
		        if (getLayersInfoEventArgs.result) {
                    {
					 if (getLayersInfoEventArgs.result.subLayers) {
                            for (var j = 0; j < getLayersInfoEventArgs.result.subLayers.layers.length; j++) {
                                subLayers.push(getLayersInfoEventArgs.result.subLayers.layers[j]);
                            }
                        }
                    }
                }
			 installPanel(subLayers);
		   });
            }

3.组装操作面板，显示子图层列表

            //组装操作面板，显示子图层列表
            function installPanel(subLayers) {
                var layersList = "";
                for (var i = 0; i < subLayers.length; i++) {
                    if (eval(subLayers[i].visible) == true) {
                        layersList += '' + subLayers[i].name + '';
                    }
                    else {
                        layersList += '' + subLayers[i].name + '';
                    }
                }
                showWindow(layersList);
                $(".checkbox").click(setLayerStatus);

                //样式为BootStrap框架设置
                $(".checkbox").hover(function () {
                    $(this).addClass("label-success");
                }, function () {
                    $(this).removeClass("label-success");
                });
                createTempLayer();
            }

4.创建临时图层来初始化当前地图显示

//创建临时图层来初始化当前地图显示
    function createTempLayer() {
	var params=new SuperMap.SetLayerStatusParameters();
	layerStatusParameters = getLayerStatusList(params);
	var callback=function(createTempLayerEventArgs){
	    tempLayerID = createTempLayerEventArgs.result.newResourceID;
	    map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [0, 0],
        maxZoom: 18,
        zoom: 1
        });
        layer=L.supermap.tiledMapLayer(url,{layersID:tempLayerID});	
		layer.addTo(map);
     }
	L.supermap
   .layerInfoService(url)
   .setLayerStatus(layerStatusParameters,callback);
    }

5.控制子图层可见性
通过勾选和取消勾选控制子图层可见性

$(".checkbox").click(setLayerStatus);

6.获取当前地图子图层状态信息,刷新地图

        //子图层可见性控制
        function setLayerStatus() {
            var layersList = document.getElementsByName("layersList");
            var str = "[0:";
            for (var i = 0; i < layersList.length; i++){
                if(eval(layersList[i].checked) == true)
                {
                    if(i

下图是子图层控制前后对比图：
初始时地图的状态：
控制continent_T@World图层不显示地图的状态：
以下链接是我实现子图层控制的一个例子，供大家参考：
https://download.csdn.net/download/supermapsupport/11941451