<!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. 如何通过outline为SQL语句指定执行计划

    创建测试表 以用户jyu连接,创建测试表 SQL> conn jyu/jyu; Connected. SQL> create table t (id number, name varcha ...

  2. 安装 MongoDB。

    1.安装 MongoDB. 1.为软件包管理系统导入公钥. Ubuntu 软件包管理工具为了保证软件包的一致性和可靠性需要用 GPG 密钥检验软件包.使用下列命令导入 MongoDB 的 GPG 密钥 ...

  3. Shell编程进阶 1.2 shell结构及执行

    创建一个shell脚本 mkdir shell vim first.sh #!/bin/bash ##The first test shell script. ##Written by wangsha ...

  4. apache server和tomcat集群配置一：水平负载

    下载apache  server,最新链接http://archive.apache.org/dist/httpd/binaries/win32 当前实验版本2.2.4 下载apache  tomca ...

  5. Yaffs2根文件系统制作

    Yaffs2根文件系统制作 环境: 交叉编译环境:4.4.6 开发平台:s3c2416 1,编译busybox 获取busybox源码busybox-1.17.2.tar (http://www.bu ...

  6. 服务机器人的小脑——SLAM技术

    博客转载自:https://www.leiphone.com/news/201706/DZlMscTwdIzFyodg.html 雷锋网(公众号:雷锋网)按:本文作者SLAMTEC(思岚科技公号sla ...

  7. Mat的迭代器使用

    如果你熟悉 C++的 STL 库,那一定了解迭代器(iterator)的使用.迭代器可以方便地遍历所有元素.Mat 也增加了迭代器的支持,以便于矩阵元素的遍历.下面的例程功能跟上一节的例程类似,但是由 ...

  8. Charles常见问题汇总

    Charles是一款很好用的抓包修改工具,但是如果你不是很熟悉这个工具的话,肯定会遇到各种感觉很莫名其妙的状况,这里就来帮你一一解答下面再说说charles的一些其他常用的功能. 选择请求后,右键可以 ...

  9. arp绑定

    Windows xp 在CMD中执行 arp -s ip mac 例如 arp -s 192.168.2.101 40-5f-c2-c1-97-fb Windwos 7 在 Windows 7/Vis ...

  10. Linux文件概念

    大多数资源,Linux都是以文件的方式来访问. Linux系统上的文件部分类型说明 –普通文件. •就是储存到磁盘上大家所操作的各种数据文件: –管道文件. •是一个从一端发送数据,从另一端接收数据的 ...