<!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基础知识（15）----StringBuffer与StringBuilder

    StringBuffer字符串缓冲区: 构造一个其中不带字符的字符串缓冲区,初始容量为 16 个字符.特点:1:可以对字符串内容进行修改.2:是一个容器.3:是可变长度的.4:缓冲区中可以存储任意类型 ...

  2. ABP工作单元

    简介 Unit of work:维护受业务事务影响的对象列表,并协调变化的写入和并发问题的解决.即管理对象的CRUD操作,以及相应的事务与并发问题等.Unit of Work是用来解决领域模型存储和变 ...

  3. Ubuntu16.04下同时安装Anaconda2与Anaconda3

    转自:http://blog.csdn.net/juezhanangle/article/details/78922888 由于编程时同时需要有python2/3的环境和大量的依赖包,本文的思路是先根 ...

  4. doker 笔记（1） 架构

    Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器 ...

  5. AndroidStudio 中使用FFMPEG

    1.下载 FFmpeg 源码 git clone https://git.ffmpeg.org/ffmpeg.git 这一步可能会花比较长的时间 2.编译 FFmpeg for Android 2.1 ...

  6. 基于ActiveMQ的Topic的数据同步——消费者持久化

    前面一章中介绍了activemq的初步实现:基于ActiveMQ的Topic的数据同步——初步实现 下面来解决持久化订阅的问题: (1)使用queue,即队列时,每个消息只有一个消费者,所以,持久化很 ...

  7. 下载Django

    Django下载教程以及学习教程https://code.ziqiangxuetang.com/django/django-queryset-api.html 或者直接搜索自强学堂

  8. URL网址参数解析类

    /** * Created by myc on 2015/12/9. */ import android.text.TextUtils; import java.util.HashMap; impor ...

  9. MyBatis02 MyBatis基础知识之Mapper映射器

    1 Mapper映射器是什么 是符合映射文件要求的接口 接口要求 a. 方法名要与sql的id一致. b. 方法的参数类型要与parameterType一致. c. 方法的返回类型要与resultTy ...

  10. 101334E Exploring Pyramids

    传送门 题目大意 看样例,懂题意 分析 实际就是个区间dp,我开始居然不会...详见代码(代码用的记忆化搜索) 代码 #include<iostream> #include<cstd ...