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

来源：互联网发布：慢慢买怎么看淘宝价格编辑：程序博客网时间：2024/05/16 14:55
转：http://www.cnblogs.com/lwenbo/archive/2013/02/16/2913590.html
<!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>
预览图：
0 0