通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制
生活随笔
收集整理的這篇文章主要介紹了
通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? ? ?項(xiàng)目上要一個(gè)圖層控制功能，當(dāng)時(shí)也找到一些別人分享的，但是只能實(shí)現(xiàn)對(duì)一個(gè)動(dòng)態(tài)服務(wù)圖層的控制，然而項(xiàng)目上疊加了好幾個(gè)圖層，需要實(shí)現(xiàn)對(duì)多個(gè)服務(wù)圖層的控制。一開(kāi)始想簡(jiǎn)單了，覺(jué)得有幾個(gè)圖層構(gòu)建幾次樹(shù)不就完事了，這肯定是不行的，你會(huì)發(fā)現(xiàn)最后構(gòu)建完成之后只有一個(gè)圖層（最后構(gòu)建的那個(gè)）。仔細(xì)想想其實(shí)就是在原來(lái)的圖層之上再加一個(gè)層級(jí)關(guān)系。要把圖層控制樹(shù)顯示出來(lái)問(wèn)題不大，關(guān)鍵在于如何通過(guò)勾選框?qū)崿F(xiàn)各個(gè)圖層的顯示與隱藏，代碼寫(xiě)的有點(diǎn)亂。
效果圖：
?
?
詳細(xì)代碼：
<!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);});/*** 構(gòu)建圖層樹(shù)形結(jié)構(gòu)*/function buildLayerList(layers) {var treeList = [];//jquery-easyui的tree用到的tree_data.json數(shù)組var root = { "id": "rootnode", "text": "所有圖層", "children": [] };//增加一個(gè)根節(jié)點(diǎn)var root2 = {};//二級(jí)根節(jié)點(diǎn)，對(duì)應(yīng)動(dòng)態(tài)地圖服務(wù)圖層個(gè)數(shù)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é)點(diǎn)var node = {};if (layerinfos != null && layerinfos.length > 0) {for (var i = 0; i < layerinfos.length; i++) {var info = layerinfos[i];//node為tree用到的json數(shù)據(jù)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的樹(shù)$('#toc').tree({data: treeList,checkbox: true, //使節(jié)點(diǎn)增加選擇框lines:true,onCheck: function (node, checked) {//更新顯示選擇的圖層var visible = [];var tempVisible = [];for(var i=0; i<layers.length; i++){visible[i] = tempVisible; //二維數(shù)組}var nodes = $('#toc').tree("getChecked");dojo.forEach(nodes, function (node) {if (!isNaN(node.id)){var tempNode = $('#toc').tree('getParent',node.target);//只找葉子結(jié)點(diǎn)，if(node.pid != -1){for(var i=0; i<layers.length; i++){ //判斷屬于哪個(gè)圖層服務(wù)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];//如果是父子關(guān)系，為父節(jié)點(diǎn)增加子節(jié)點(diǎn)，退出for循環(huán) ?if (pnode.id == node.pid) {pnode.state = "closed";//關(guān)閉二級(jí)樹(shù) ?pnode.children.push(node);return;} else {//如果不是父子關(guān)系，刪除父節(jié)點(diǎn)棧里當(dāng)前的節(jié)點(diǎn)， ?//繼續(xù)此次循環(huán)，直到確定父子關(guān)系或不存在退出for循環(huán) ?parentnodes.pop();}}}})</script></body> </html>?
?
? ? ? 如果遇到樹(shù)結(jié)構(gòu)顯示不全問(wèn)題，可能是圖層未加載完成，獲取不到LayerInfo信息，可以把構(gòu)建樹(shù)的操作放在ArcGIS JS API? 里面的狀態(tài)監(jiān)聽(tīng)事件。
if(layer.loaded){buildLayerList(layers);}else{layer.on('load', function () {buildLayerList(layers);}); }總結(jié)
以上是生活随笔為你收集整理的通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 自定义ArcGIS JavaScript
- 下一篇： 基于ArcGIS JS API 的点击查