SuperMap iClient for OpenLayers图层组控制实现方法

作者：Carlo

前景：在使用SuperMap iClient for JavaScript产品过程中，经常有一些小伙伴会问如何用iClient for OpenLayers实现类似于Classic官网（https://iclient.supermap.io/examples/classic/editor.html#others_layerGroup）的图层组控制效果，下面我将为大家提供实现思路以及示例代码展示效果。

• 步骤一：引入OpenLayers脚本库

<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>

• 步骤二：与服务器交互得到子图层信息

function getLayersInfo() {
		new ol.supermap.LayerInfoService(url).getLayersInfo(function(result){
				if (result.result) {
				      {
				          handleTreeData(result.result.subLayers.layers, 1);
				          showWindow();
				          $.fn.zTree.init($("#tree"), setting, treeNodes);
				      }
				  }
				  createTempLayer();
	         })
	}

• 步骤三：配置图层组控制菜单

var setting = {
	    view: {
	        dblClickExpand: false,
	        showLine: false,
	        showIcon: false,
	        selectedMulti: false
	    },
	    check: {
	        enable: true
	    },
	    data: {
	        simpleData: {
	            enable: true,
	            idKey: "id",
	            pIdKey: "pId",
	            rootPId: "0"
	        }
	    },
	    callback: {
	        beforeClick: function (treeId, treeNode) {
	            var zTree = $.fn.zTree.getZTreeObj("tree");
	            if (treeNode.isParent) {
	                zTree.expandNode(treeNode);
	                return false;
	            }
	        },
	        onCheck: setLayerStatus
	    }
	};
	
	var treeNodes = [];
	var layerID = 0;
	//处理layers中的子图层信息为 ztree所需的数据格式
	function handleTreeData(layers) {
	    var length = layers.length;
	    for (var i = 0; i < length; i++) {
	        var node = {};
	        node.id = i + 1;
	        node.pId = 0;
	        node.name = layers[i].name;
	        node.open = true;
	        node.isChild = false;
	        if (layers[i].visible) {
	            node.checked = true;
	        }
	        treeNodes.push(node);
	
	        if (layers[i].subLayers.layers && layers[i].subLayers.layers.length > 0) {
	            for (var j = 0; j < layers[i].subLayers.layers.length; j++) {
	                var node = {};
	                node.id = (i + 1) * 10 + j;
	                node.pId = i + 1;
	                node.name = layers[i].subLayers.layers[j].name;
	                node.isChild = true;
	                node.layerID = j;
	                layerID++;
	                if (layers[i].subLayers.layers[j].visible) {
	                    node.checked = true;
	                }
	                treeNodes.push(node);
	            }
	        }
	    }
	
	}

• 步骤四：创建临时图层来初始化当前地图显示

function createTempLayer() {
        //子图层控制参数必设：url、mapName、SetLayerStatusParameters
        var layerStatusParameters = new SuperMap.SetLayerStatusParameters();
        layerStatusParameters = getLayerStatusList(layerStatusParameters);
		new ol.supermap.LayerInfoService(url).setLayerStatus(layerStatusParameters,function(result){
		        //console.log(result);
				if(result){
					createTempLayerCompleted(result);
				}
				else{
					createTempLayerFailed();
				}
		     })
}
//与服务器交互成功，创建临时图层
function createTempLayerCompleted(createTempLayerEventArgs) {
	    tempLayerID = createTempLayerEventArgs.result.newResourceID;
	    //创建地图控件
		map = new ol.Map({
		        target: 'map',
		        controls: ol.control.defaults({attributionOptions: {collapsed: false}})
		            .extend([new ol.supermap.control.Logo()]),
		        view: new ol.View({
		            center: [0, 0],
		            zoom: 2,
		            projection: 'EPSG:4326',
		            multiWorld: true
		        })
		    });
		    layer = new ol.layer.Tile({
		        source: new ol.source.TileSuperMapRest({
		            url: url,
					transparent: true,
					cacheEnabled: false,
					redirect: true,
		            wrapX: true
		        }),
		        projection: 'EPSG:4326'
		    });
		    map.addLayer(layer);
	}
	
	//显示错误信息
	function createTempLayerFailed(result) {
	    widgets.alert.showAlert(result.error.errorMsg, false);
	}

• 步骤五：获取当前地图子图层的状态信息

function getLayerStatusList(parameters) {
		for (var i = 0; i < treeNodes.length; i++) {
	        if (treeNodes[i].isChild) {
	            var layerStatus = new SuperMap.LayerStatus();
	            layerStatus.layerName = treeNodes[i].name;
	            layerStatus.isVisible = false;
	            parameters.layerStatusList.push(layerStatus);
	
	        }
	    }
	    //设置资源在服务端保存的时间，单位为分钟，默认为10
	    parameters.holdTime = 30;
	    return parameters;
	}

• 步骤六：通过子图层layersID可见性控制

function setLayerStatus() {
		var zTree = $.fn.zTree.getZTreeObj("tree"),
	        checkCount = zTree.getCheckedNodes(true);
	    var checkLength = checkCount.length;
	    //通过layersID 控制图层的显示和隐藏
	    var str = "[0:";
	    for (var i = 0; i < checkLength; i++) {
	        if (checkCount[i].isChild) {
	            if (i < checkLength) {
	                str += (checkCount[i].pId - 1).toString() + "." + checkCount[i].layerID.toString();
	            }
	            if (i < (checkLength - 1)) {
	                str += ",";
	            }
	        }
	    }
	
	    str += "]";
	    //当所有图层都不可见时
	    if (str.length < 5) {
	        str = "[]";
	    }
		layer.setSource(new ol.source.TileSuperMapRest({
		            url: url,
					transparent: true,
					cacheEnabled: false,
					redirect: true,
		            wrapX: true,
					layersID: str
		        }))
		console.log(layer.getSource());
	}

• 效果展示：
  图层组控制前：
  
  图层组控制后：
  
  完整示例可以参考资源链接：https://download.csdn.net/download/supermapsupport/86244981