<!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 javascript-图层控制（图层树）的更多相关文章

  1. ArcGIS api for javascript——动态创建图层列表

    描述 本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表,checkbox能设置图层的显示或隐藏.动态创建列表的优势是所有的图层都会包含在列表中,即使服务器管理员删除或增加了图层 ...

  2. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  3. 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述

    原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...

  4. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

  5. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  6. ArcGIS API for JavaScript：Layer之间那点儿事

    先来看一个模型: |–TiledMapServiceLayer  |       |–ArcGISTiledMapServiceLayer  |–DynamicLayer  |       |–Dyn ...

  7. ArcGIS API for JavaScript开发初探——基础知识

    1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...

  8. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  9. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  10. ArcGIS API for JavaScript FeatureLayer服务属性编辑

    首先说一下感想吧,刚入行时感觉深似海,掉到了GIS开发的陨石大坑里了,首先是学了小半年的Flex,用到了ArcGIS API for Flex,接着又是半年的ArcEngine开发,现在终于摸到了一点 ...

随机推荐

  1. 开源JS代码前面加!,+的意义

    我们都知道,函数的声明方式有这两种 function fnA(){alert('msg');}//声明式定义函数 var fnB = function(){alert('msg');}//函数赋值表达 ...

  2. bash姿势-没有管道符执行结果相同于管道符

    听起来比较别口: 直接看代码: shell如下: [root@sevck_linux ~]# </etc/passwd grep root root:x:::root:/root:/bin/ba ...

  3. vue-cli脚手架build目录中的webpack.dev.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方 ...

  4. SpringMVC的Date与String互转

    摘要:        项目里经常需要用到日期和String之间的转换,比如后台的Date对象以Json形式返回给前端页面的时候,希望转换为yyyy-MM-dd HH:mm:ss格式的字符串,而前端页面 ...

  5. CSS——display

    display的主要属性: 1.none: 不显示: 不保留其在页面中的位置,即相当于html文档中没有这个元素: visible:hidden虽然也不显示:但依然保存着他的位置和大小. 2.bloc ...

  6. 10-17C#语句（3）--跳转语句、异常处理语句

    回顾: 穷举法(重点掌握):虽然运用for...嵌循环语句,但是也要找到执行for...循环的规律, 即一个题目中,需要得到哪个值,首先定义它初始变量:哪个条件需要改变,它对应的就是for...循环的 ...

  7. 问题：C#控制台；结果：C#限制程序只能运行一個实例 （防多开）

    C# Console类的具体用法 作者: 字体:[增加 减小] 类型:转载 时间:2013-03-08 这篇文章主要介绍C# Console类的具体用法,需要的朋友可以参考下   Console.Wr ...

  8. Android Studio Build APK没有报错，但是Generate signed apk报错

    有时候 ,我们在调试APK,直接Build是可以正常生成,没有报错,但是当我们将自己的签名文件加上去,就会报错.一般情况下,我们可以在build.gradle中的android{}里面添加一个东西 l ...

  9. C#如何生成JSON字符串?（序列化对象）

    第一章:C#如何拿到从http上返回JSON数据? 第二章:C#如何解析JSON数据?(反序列化对象) 第三章:C#如何生成JSON字符串?(序列化对象) 第四章:C#如何生成JSON字符串提交给接口 ...

  10. 解决html中的乱码问题

    1.最简单粗暴的方法就是加一个meta标签,不过值得我们注意的是我们的meta标签是与我们的head标签是同一级的,所以千万不能将meta标签加到我们的head标签中. <meta http-e ...