<!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. java selenium webdriver第一讲 seleniumIDE

    Selenium是ThoughtWorks公司,一个名为Jason Huggins的测试为了减少手工测试的工作量,自己实现的一套基于Javascript语言的代码库 使用这套库可以进行页面的交互操作, ...

  2. 如何使用安装光盘为本机创建yum repository

    在CentOS 6上可以使用系统安装光盘为本机创建yum repository,创建过程如下. 创建光盘mount点 [root@centos62 ~]# mkdir /media/CentOS mo ...

  3. xcopy 命令行

    https://www.cnblogs.com/yang-hao/p/6003308.html xcopy-参数详解   XCOPY——目录复制命令  1．功能:复制指定的目录和目录下的所有文件连同目 ...

  4. App启动原理和启动过程

        一.程序启动原理 1.1.main函数中执行了一个UIApplicationMain这个函数UIApplicationMain(int argc, char *argv[], NSString ...

  5. lombok与spring的恩怨

    下面是lombok按照 Java Bean 的规范生成的 下面是spring mvc里jackson 需要的 xXxx问题还是顺势而为吧

  6. OpenCV笔记 1

    Structure  Contains  Represents CvPoint int x, y  Point in image CvPoint2D32f float x, y  Points in ...

  7. JAVA基础知识总结13（同步）

    好处:解决了线程安全问题. 弊端:相对降低性能,因为判断锁需要消耗资源,还容易产生了死锁. 定义同步是有前提的: 1,必须要有两个或者两个以上的线程,才需要同步. 2,多个线程必须保证使用的是同一个锁 ...

  8. solr-用mmseg4j配置同义词索引和检索（IKanlyzer需要修改源码适应solr接口才能使用同义词功能）

    概念说明:同义词大体的意思是指,当用户输入一个词时,solr会把相关有相同意思的近义词的或同义词的term的语段内容从索引中取出,展示给用户,提高交互的友好性(当然这些同义词的定义是要在配置文件中事先 ...

  9. 使用foreach获取数据列表的全部信息

    先把代码列出来:(在admin/listAdmin.php中) <?php foreach($rows as $row):?> //注意,这里的foreach($rows as $row) ...

  10. Android 菜单之子菜单SubMenu

    子菜单就是在点击了菜单中的选项后弹出的要对菜单中选项操作的菜单           他的操作与之前的两种类型的菜单操作差不多 动态添加 @Override public boolean onCreat ...