<!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. JCTF 2014(Reverse)

    小菜一碟: 点击下载附件 下载的附件没有后缀,用c32打开看看 是apk文件,用Smali2JavaUI打开 程序把输入框的字符串反转,然后进行MD5加密,最后进行base64编码,与NzU2ZDJm ...

  2. 第十一章 Tomcat的系统架构与设计模式（待续）

    Tomcat总体设计 Tomcat中的设计模式

  3. form(去掉关闭按钮，禁止调整大小)

    禁止Form窗口调整大小方法:FormBorderStyle 设为FixedSingle: 不能使用最大化窗口: MaximuzeBox 设为False: 不能使用最小化窗口:   MinimizeB ...

  4. tomcat是一个应用服务器

    总的来说,tomcat的身份可以看作一个WEB容器,但实际上是一个应用程序服务器.为什么这么说?1.因为你从tomcat内部看你会发现其实tomcat内置了一个轻量级的WEB服务器,用于转发html文 ...

  5. 关于android studio中使用class.forname()方法动态获取类实例报NO CLASS FOUND异常的几种处理方法

    最近在做一个项目的时候需要用到反射来回调子类的方法,但是在反射过程中总是在class.forname()方法抛出NO CLASS FOUND异常,经过几部检查,问题解决,在此总结一下引起该问题的原因 ...

  6. ElasticSearch入门一

    ElasticSearch入门一 1 安装ElasticSearch,配置环境变量,并且存在Java环境,而且是Java环境: 下图是安装的目录: 进入bin目录之后,请看bin目录: 启动elast ...

  7. java虚拟机垃圾回收机制详解

    首先,看一下java虚拟机运行的时候内存分配图: jvm虚拟机栈:一个是线程独有的,每次启动一个线程,就创建一个jvm虚拟机栈,线程退出的时候就销毁.这里面主要保存线程本地变量名和局部变量值. 本地方 ...

  8. Swing的MVC结构

    --------------siwuxie095                             工程名:TestMVC 包名:com.siwuxie095.mvc 类名:Test.java ...

  9. SqlServer中把结果集放到到临时表的方法(转)

    一. SELECT INTO   1. 使用select into会自动生成临时表,不需要事先创建   select * into #temp from sysobjects   01. 把存储过程结 ...

  10. Blender 工具使用——模式切换

    Blender 工具使用--模式切换 制作骨架时 在物件模式(Object Mode)下使用鼠标右键选中一个骨架,按Tab键,可以切换为编辑模式(Edit Mode),按Ctrl + Tab可以进入骨 ...