通过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);
});
}
转载自：https://blog.csdn.net/wml00000/article/details/82957538
