當前位置：
首頁 >
通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制
發(fā)布時間：2025/3/21
37
豆豆
生活随笔
收集整理的這篇文章主要介紹了
通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ?項目上要一個圖層控制功能，當時也找到一些別人分享的，但是只能實現對一個動態(tài)服務圖層的控制，然而項目上疊加了好幾個圖層，需要實現對多個服務圖層的控制。一開始想簡單了，覺得有幾個圖層構建幾次樹不就完事了，這肯定是不行的，你會發(fā)現最后構建完成之后只有一個圖層（最后構建的那個）。仔細想想其實就是在原來的圖層之上再加一個層級關系。要把圖層控制樹顯示出來問題不大，關鍵在于如何通過勾選框實現各個圖層的顯示與隱藏，代碼寫的有點亂。
效果圖：
?
?
詳細代碼：
<!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": [] };//增加一個根節(jié)點var root2 = {};//二級根節(jié)點，對應動態(tài)地圖服務圖層個數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 = [];//保存所有的父親節(jié)點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, //使節(jié)點增加選擇框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];//如果是父子關系，為父節(jié)點增加子節(jié)點，退出for循環(huán) ?if (pnode.id == node.pid) {pnode.state = "closed";//關閉二級樹 ?pnode.children.push(node);return;} else {//如果不是父子關系，刪除父節(jié)點棧里當前的節(jié)點， ?//繼續(xù)此次循環(huán)，直到確定父子關系或不存在退出for循環(huán) ?parentnodes.pop();}}}})</script></body> </html>?
?
? ? ? 如果遇到樹結構顯示不全問題，可能是圖層未加載完成，獲取不到LayerInfo信息，可以把構建樹的操作放在ArcGIS JS API? 里面的狀態(tài)監(jiān)聽事件。
if(layer.loaded){buildLayerList(layers);}else{layer.on('load', function () {buildLayerList(layers);}); }總結
以上是生活随笔為你收集整理的通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义ArcGIS JavaScript
- 下一篇： 基于ArcGIS JS API 的点击查