您的位置：首页 > Web前端 > JavaScript

ArcGIS api for javascript-图层控制（图层树）

2013-02-16 17:53 507 查看
使用ArcGIS js api和jquery-easyui实现树形图层控制功能

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">

<title>图层控制</title>
<link rel="stylesheet" type="text/css"
href="http://localhost:8080/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css"
href="http://localhost:8080/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" />
<script type="text/javascript">
dojoConfig = {
parseOnLoad : true
};
</script>
<script type="text/javascript"
src="http://localhost:8080/arcgis_js_api/library/3.2/jsapi/init.js"></script>

<script type="text/javascript" src='../resources/jquery/jquery-1.7.2.min.js'></script>
<link rel="stylesheet" type="text/css" href='../resources/jquery/themes/gray/easyui.css'>
<link rel="stylesheet" type="text/css" href="../resources/jquery/themes/icon.css">
<script type="text/javascript" src='../resources/jquery/jquery.easyui.min.js'></script>
<script type="text/javascript" src='../resources/jquery/locale/easyui-lang-zh_CN.js' charset="utf-8"></script>
<script>
dojo.require("esri.map");

var layer, map, visible = [];

function init() {
map = new esri.Map("map");
layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://192.168.10.200:8399/arcgis/rest/services/toctree/MapServer");

if (layer.loaded) {
buildLayerList(layer);
} else {
dojo.connect(layer, "onLoad", buildLayerList);
}
}

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() ;
}
}
}

function buildLayerList(layer) {
　　　　//构建图层树形结构
　　　　 var layerinfos = layer.layerInfos ;
var treeList = [] ;//jquery-easyui的tree用到的tree_data.json数组
var parentnodes = [] ;//保存所有的父亲节点
var root = {"id":"rootnode","text":"所有图层","children":[]} ;//增加一个根节点
var node = {} ;
if (layerinfos != null && layerinfos.length > 0) {

for(var i=0,j=layerinfos.length;i<j;i++){
var info = layerinfos[i] ;
if (info.defaultVisibility) {
visible.push(info.id);
}
　　　　　　　　　//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) ;
root.children.push(node) ;
}else{
getChildrenNodes(parentnodes, node);
parentnodes.push(node) ;
}
}
}
treeList.push(root) ;
//jquery-easyui的树
$('#toc').tree({
data:treeList ,
checkbox :true, //使节点增加选择框
onCheck:function (node,checked){//更新显示选择的图层
var visible = [];

var nodes = $('#toc').tree("getChecked") ;
dojo.forEach(nodes, function(node) {
visible.push(node.id);
});
//if there aren't any layers visible set the array to be -1
if (visible.length === 0) {
visible.push(-1);
}
layer.setVisibleLayers(visible);
}
});

layer.setVisibleLayers(visible);
map.addLayer(layer);
}

dojo.ready(init);
</script>

</head>
<body class="easyui-layout">

<div data-options="region:'west',split:true,title:'菜单'" style="width:200px;padding:10px;">
<div id="panelHeader"
style="width: 100%; height: 100%;">
图层控制：<br />
<ul id="toc" class="easyui-tree"></ul>
</div>
</div>
<div data-options="region:'center',title:'地图'">
<div id="map"
style="width: 100%; height: 100%; "></div>
</div>
</body>
</html>


预览图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航