注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

程序员驿站

淘宝店:http://shop106888457.taobao.com

 
 
 

日志

 
 

ArcGIS api for javascript-图层控制(图层树)  

2014-06-07 10:28:58|  分类: Javascript(ArcGi |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

使用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>
复制代码

 

预览图:

ArcGIS api for javas<wbr>cript-图层控制(图层树) - dingtao-wgs - 程序员驿站

 

  评论这张
 
阅读(759)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017