当前位置：
首页 >
通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制
发布时间：2025/3/21
71
豆豆
生活随笔
收集整理的这篇文章主要介绍了
通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
项目上要一个图层控制功能，当时也找到一些别人分享的，但是只能实现对一个动态服务图层的控制，然而项目上叠加了好几个图层，需要实现对多个服务图层的控制。一开始想简单了，觉得有几个图层构建几次树不就完事了，这肯定是不行的，你会发现最后构建完成之后只有一个图层（最后构建的那个）。仔细想想其实就是在原来的图层之上再加一个层级关系。要把图层控制树显示出来问题不大，关键在于如何通过勾选框实现各个图层的显示与隐藏，代码写的有点乱。
效果图：
详细代码：
<!DOCTYPE html> <html><head lang="zh-CN"><meta charset="UTF-8"><title>TOC</title><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.25/3.25/dijit/themes/tundra/tundra.css"><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" /><link rel="stylesheet" href="easyui/themes/default/easyui.css"><script type="text/javascript" src="easyui/jquery.min.js "></script><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js "></script><script type="text/javascript" src="easyui/jquery.easyui.min.js "></script><script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.25/3.25/init.js"></script><style type="text/css">*{margin:0px;padding:0px;}html,body{height:100%;width:100%;position: relative;overflow: hidden;}</style></head><body class="tundra"><div id="mapDiv" style="float:left;width: 70%;height: 100%;"></div><div id="toc" style="float:left;width: 30%;height: 100%;"></div><script type="text/javascript">require(['dojo/on','esri/map','esri/layers/ArcGISDynamicMapServiceLayer'],function(on,Map,ArcGISDynamicMapServiceLayer){var map=new Map('mapDiv');var layer1 = new ArcGISDynamicMapServiceLayer("http://10.200.223.191:6080/arcgis/rest/services/SDKD/MapServer", {id:"DynamicLayer1"});var layer2 = new ArcGISDynamicMapServiceLayer("http://10.200.223.191:6080/arcgis/rest/services/SDKD2/MapServer", {id:"DynamicLayer2"});var layers = [];layers.push(layer1);layers.push(layer2);map.addLayer(layer2);map.addLayer(layer1);map.on('load', function () {buildLayerList(layers);});/*** 构建图层树形结构*/function buildLayerList(layers) {var treeList = [];//jquery-easyui的tree用到的tree_data.json数组var root = { "id": "rootnode", "text": "所有图层", "children": [] };//增加一个根节点var root2 = {};//二级根节点，对应动态地图服务图层个数let me = this;dojo.forEach(layers,function (layer) {root2 = {"id": layer.id,"text": layer.id,"pid":-1,"checked": layer.visible ? true : false,"children": []};root.children.push(root2);var layerinfos = layer.layerInfos;var parentnodes = [];//保存所有的父亲节点var node = {};if (layerinfos != null && layerinfos.length > 0) {for (var i = 0; i < layerinfos.length; i++) {var info = layerinfos[i];//node为tree用到的json数据node = {"id": info.id,"text": info.name,"pid": info.parentLayerId,"checked": info.defaultVisibility ? true : false,"children": []};if (info.parentLayerId == -1) {parentnodes.push(node);root2.children.push(node);} else {getChildrenNodes(parentnodes, node);parentnodes.push(node);}}}});treeList.push(root);//jquery-easyui的树$('#toc').tree({data: treeList,checkbox: true, //使节点增加选择框lines:true,onCheck: function (node, checked) {//更新显示选择的图层var visible = [];var tempVisible = [];for(var i=0; i<layers.length; i++){visible[i] = tempVisible; //二维数组}var nodes = $('#toc').tree("getChecked");dojo.forEach(nodes, function (node) {if (!isNaN(node.id)){var tempNode = $('#toc').tree('getParent',node.target);//只找叶子结点，if(node.pid != -1){for(var i=0; i<layers.length; i++){ //判断属于哪个图层服务var layerId = $('#toc').tree('getParent',tempNode.target).id;if(layerId === layers[i].id){visible[i].push(node.id);}}}}});for(var i=0; i<layers.length; i++){layers[i].setVisibleLayers(visible[i]);}}});}function getChildrenNodes(parentnodes, node) {for (var i = parentnodes.length - 1; i >= 0; i--) {var pnode = parentnodes[i];//如果是父子关系，为父节点增加子节点，退出for循环 if (pnode.id == node.pid) {pnode.state = "closed";//关闭二级树 pnode.children.push(node);return;} else {//如果不是父子关系，删除父节点栈里当前的节点， //继续此次循环，直到确定父子关系或不存在退出for循环 parentnodes.pop();}}}})</script></body> </html>
如果遇到树结构显示不全问题，可能是图层未加载完成，获取不到LayerInfo信息，可以把构建树的操作放在ArcGIS JS API 里面的状态监听事件。
if(layer.loaded){buildLayerList(layers);}else{layer.on('load', function () {buildLayerList(layers);}); }总结
以上是生活随笔为你收集整理的通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 自定义ArcGIS JavaScript
- 下一篇： Mybatis报错 TooManyRes