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、SetLayerStatusParametersvar 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);}}//设置资源在服务端保存的时间，单位为分钟，默认为10parameters.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

SuperMap iClient for OpenLayers图层组控制实现方法相关推荐

SuperMap iClient for Openlayers 实现WFS查询功能
SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Openlayers客户端的示例,在此文章中将简单介 ...
SuperMap iClient for JavaScript常见问题解答集锦（十二）
作者:皇皇问:如果您在OpenStack平台中创建虚拟机时出现以下错误信息Build of instance aborted: Flavor is disk is too small for req ...
iClient for OpenLayers之快速获取UGCV5，MVT出图参数
作者:yangjl 前言最近还是有很多小伙伴们,一遇到非wgs84坐标的ugcv5或mvt切图瓦片发布的地图服务,便不能对接出图了,或者是出了图但是看着地图边界比较模糊.今天我在这里讲干货,让小 ...
SuperMap iClient for JavaScript 实现拖动半径进行距离查询
作者:sniper 前一段时间有很多朋友问我,怎么用SuperMap iClient for JavaScript实现类似百度地图或高德地图那样拖动一个按钮选择半径,从而查询附近的地理要素.因此,我们 ...
在SuperMap iClient 9D for MapboxGL中使用ECharts和MapV
作者: MR. SuperMap iClient 9D 是云GIS网络客户端开发平台.基于现代Web技术栈全新构建,是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端.集成了领先的开 ...
SuperMap iClient for Leaflet入门学习
Leaflet是一个开源的地图Javascript库: SuperMap iClient for Leaflet 在线示例: https://iclient.supermap.io/examples/ ...
python控制手机自动刷新闻_Python脚本利用adb进行手机控制的方法
一. adb 相关命令: 1. 关闭adb服务:adb kill-server 2. 启动adb服务 adb start-server 3. 查询当前运行的所有设备 adb devices 4. 可能 ...
无盘服务器读写缓存,无盘系统中实现网络磁盘本地写缓存控制的方法
1. 一种无盘系统中实现网络磁盘本地写缓存控制的方法,所述的无盘系统中包括通过网络与远程服务器相连接的客户端,其特征在于,所述的方法包括以下步骤:(1)客户端进行启动和初始化操作:(2)客户端根据服 ...
mysql数据库限流方案_用于对MySQL数据库的并发操作进行控制的方法及装置的制造方法_3...
的数据库操作特点,预先设置的所述第一限流类型可以不同于本实施例中的设置,同样可以实现本申请的技术方案,也在本申请的保护范围之内. [0103]步骤102-3:判断MySQL数据库的threads_ru ...

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

SuperMap iClient for OpenLayers图层组控制实现方法相关推荐

最新文章

热门文章