iclient for openlayer 控制子图层显隐

  1. 获取子图层列表
  2. 控制子图层显隐
<div>
<div id="map"></div>
<div class="layer-control ol-control" id="layers">
			<button type="button"  onclick="toggleLayerList(this);">«</button>
			<div id ="layerList">
				<div class="title"><label>图层列表</label></div>
	      		<ul id="layers-content" class="ztree"></ul>
      		</div>
  </div>    		
</div>
//获取子图层列表并封装为树形结构
new ol.supermap.LayerInfoService(url).getLayersInfo(function (serviceResult) {
           let treeNodes = handleTreeData(serviceResult.result.subLayers.layers);
           let setting = {
               check: {
                   enable: true
               },
               data: {
                   simpleData: {
                       enable: true,
                       rootPId: "0"
                   }
               },
               callback: {
                   beforeClick: function (treeId, treeNode, clickFlag) {
                       let zTree = $.fn.zTree.getZTreeObj(treeId);
                       if (treeNode.isParent) {
                           zTree.expandNode(treeNode);
                           return false;
                       }
                   },
                   onCheck: function(event, treeId, treeNode){
                	   let zTree = $.fn.zTree.getZTreeObj(treeId),
                	   nodes = zTree.getNodes();
	                	let parameters = new SuperMap.SetLayerStatusParameters();
	                    for (let node of nodes) {
	                    	if(node.children.length>0){
	                    		for(let layer of node.children){
	                    			let layerStatus = new SuperMap.LayerStatus({layerName:layer.layerName,isVisible:layer.checked});
	                    			parameters.layerStatusList.push(layerStatus);
	                    			
	                    		}
	                    	}
	                    }
	                    setLayerStatus(parameters);  
                   }
               }
           };
           $.fn.zTree.init($("#layers-content"), setting, treeNodes);
       });

//处理layers中的子图层信息为 ztree所需的数据格式
function handleTreeData(layers) {
	var treeNodes = [],parent= new Set(), length = layers.length;
	
    for (let i = 0; i < length; i++) {
    	let layer = layers[i];
		let info = map.getLayerInfo({layerName:layer.caption});
		let pId = 0,pName = '其他';
		if(info != undefined){
			pId = info.group_id,pName = info.group_name
		}
		
		if(!parent.has(pId)){
			parent.add(pId);
			treeNodes.push({id:pId,name:pName,})
		}
 	   	let name = (info!=undefined) ?info.title:layer.caption;
        let node = {
        		id:i+1,
        		pId:pId,
        		name:name,
        		layerName:layer.name,
        		open:true,
        		isChild :false,
        		checked:layer.visible
        };
        treeNodes.push(node);
    }
    return treeNodes;

}
//重新请求子图层
function setLayerStatus(layerStatusParameters){
   let url = _map.url;
   new ol.supermap.LayerInfoService(url).setLayerStatus(layerStatusParameters,function(data){
	   var tempLayerID = data.result.newResourceID;
	   console.log(data);
       var layer = new ol.layer.Tile({
       	source: new ol.source.TileSuperMapRest({
		        url: url,
		        cacheEnabled:false,
				extent:_map.getView().getProjection().getExtent(),
		        layersID:tempLayerID,
		        crossOrigin: 'anonymous',
       	 }),
        });
       _map.addLayer(layer);
   });
   
} 

最终效果图:

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值