通過Easy-UI 樹外掛實現ArcGIS多個服務圖層的圖層控制
阿新 • • 發佈：2018-12-14
專案上要一個圖層控制功能，當時也找到一些別人分享的，但是隻能實現對一個動態服務圖層的控制，然而專案上疊加了好幾個圖層，需要實現對多個服務圖層的控制。一開始想簡單了，覺得有幾個圖層構建幾次樹不就完事了，這肯定是不行的，你會發現最後構建完成之後只有一個圖層（最後構建的那個）。仔細想想其實就是在原來的圖層之上再加一個層級關係。要把圖層控制樹顯示出來問題不大，關鍵在於如何通過勾選框實現各個圖層的顯示與隱藏，程式碼寫的有點亂。
效果圖：
詳細程式碼：
<!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 裡面的狀態監聽事件。
map.on('load', function () {
buildLayerList(layers);
});