看别人搞的GIS应用，常常有勾选、取消某个图层的操作，然后地图上就有相应的图形显隐，觉得好酷。

咋实现的？

其实说起来好像也不是特别复杂。在WEB端，实现该功能的原理和步骤是：

1、WEB端加载地图服务的时候，可以拿到图层信息，包括名称，ID，父ID，子图层数组，默认可见性，等等。

2、如此，即可以在WEB端列出图层信息矣

3、在列出图层的同时，可根据图层的默认可见性来控制图层的显隐，这是初始化阶段

4、之后，手动勾选每个图层前面的复选框，每勾选一次，则遍历图层列表，凡checked=true的，都将该图层ID放入某个数组，然后该数组作为参数，调用设置函数，如此，可相应控制图层显隐矣。

由4可知，控制任一图层的显示或隐藏，策略都是重绘地图。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>zt</title>

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.15/3.15/dijit/themes/tundra/tundra.css"/>

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.15/3.15/esri/css/esri.css" />

    <style type="text/css">

      .block{

        border:1px solid #999;

        height:600px;

      }

      .list_item{

      }

    </style>

  </head>

  <body class="tundra">

    <div id="mapDiv" style="float:right;width:85%;" class="block"></div>

    <div id="layer_list" style="float:right;width:13%;margin-right:10px;" class="block"></div>

  </body>

</html>

<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.15/3.15/init.js"></script>

<script type="text/javascript">

  dojo.require("esri.map");

  var map,visible = [];

  var layer;

  function init() {

    map = new esri.Map("mapDiv", {logo:false});

    layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://WIN-NH9JATPNTFA:6080/arcgis/rest/services/ZT/MapServer");

    if (layer.loaded) {

        buildLayerList(layer);

    }

    else {

        dojo.connect(layer, "onLoad", buildLayerList);

    }

  }

  function buildLayerList(layer) {

    var items = dojo.map(   // 适用于回调到给定数组中的每个元素，并返回一个数组的结果。

        layer.layerInfos,   // 在服务返回可见的图层的数组，默认是可见的

        function(info,index){

            if(info.parentLayerId != -1){

              if (info.defaultVisibility) {

                  visible.push(info.id);  // 将id编号放入数组中

              }

              return "<div><input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "(" + info.parentLayerId + ")</label></div>";

            }

        }

    );

    dojo.byId("layer_list").innerHTML = items.join(' ');

    layer.setVisibleLayers(visible,true);   // setVisibleLayers(ids, doNotRefresh?)  默认为false（及时刷新）

    map.addLayer(layer);    // 将图层加入到地图中

  }

  function updateLayerVisibility() {

    var inputs = dojo.query(".list_item"), input;   // 使用dojo.query()方法查询  

    visible = [];  

    // 遍历每一个文本框

    dojo.forEach(inputs,function(input){

      if (input.checked) {

          visible.push(input.id);   // 填充数组值

      }

    });

    // 如果它们中有任何一个不显示的图层将 设置数组为 -1

    if(visible.length === 0){

      visible.push(-1);

    }

    layer.setVisibleLayers(visible);

  }

  dojo.addOnLoad(init);

</script>

有个东西忘了讲，如果父层默认显示，并且选中，则子层的勾选没有意义，任你怎么点，都没啥反应，全部都是可见。所以我在代码中，并没有将根层列出来。

WEBGIS控制图层的显示的更多相关文章

  1. (二十)WebGIS中图层树功能的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS的桌面工具中,比如arcgis desktop或者S ...

  2. ArcGIS AO中控制图层中要素可见状态的总结

    一.DefinitionExpression 实现新建查询图层,查询结果要素为选中状态 该接口可以通过两种方法来控制要素的可见状态. 思路1 通过该接口的 DefinitionExpression 方 ...

  3. AE控制图层中要素可见状态的几种方法

    转自原文 AE控制图层中要素可见状态的几种方法 工作中常有这样的需求,一个作业图层由几个作业员来操作,我们要 控制每一个作业员只能看到他负责的区域.作业员的可见区域控制有时候是按空间区域划分,有时候是 ...

  4. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. [转] 使用反射机制控制Toast的显示时间

    大体上说就是利用toast的内部类TN 来控制show和hide ,这是一个反射机制 怎么控制toast的显示时间呢?这个就是通过tn类的show和hide的方法 http://blog.csdn.n ...

  6. C# 计算字符串在控制台中的显示长度

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  7. js中控制小数点的显示位数的技术整理

    js中自带方法控制小数点的显示位数(四舍五入) alert((12.9299).toFixed(2)); //12.93 alert((12.9243).toFixed(2)); //12.92 小数 ...

  8. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  9. jQuery控制TR的显示隐藏

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td ...

随机推荐

  1. python3--命名空间字典

    命名空间字典 我们学到了模块的命名空间实际上是以字典的形式实现的,并且可以由内置属性__dict__显示这一点.类和实例对象也是如此:属性点号运算其实内部就是字典的索引运算,而属性继承其实就是搜索连结 ...

  2. Leetcode 402.移掉k位数字

    移调k位数字 给定一个以字符串表示的非负整数 num,移除这个数中的 k 位数字,使得剩下的数字最小. 注意: num 的长度小于 10002 且 ≥ k. num 不会包含任何前导零. 示例 1 : ...

  3. “玲珑杯”ACM比赛 Round #19

    A -- A simple math problem Time Limit:2s Memory Limit:128MByte Submissions:1599Solved:270 DESCRIPTIO ...

  4. BZOJ 1007 [HNOI2008]水平可见直线 ——半平面交 凸包

    发现需要求一个下凸的半平面上有几个交点. 然后我们把它变成凸包的问题. 好写.好调.还没有精度误差. #include <map> #include <ctime> #incl ...

  5. spring之Autowire

    当使用spring为一个对象的属性注入时,通常使用xml文件的property元素和ref属性,但是我们也可以使用spring中的autowire进行注入 使用方法如下 <bean id=&qu ...

  6. Ionic 如何把左上角的按钮去掉？

    代码实现: <ion-header > <ion-toolbar> <ion-buttons start> <a href="#"> ...

  7. Autorelease对象什么时候释放？

    Autorelease机制是iOS开发者管理对象内存的好伙伴,MRC中,调用[obj autorelease]来延迟内存的释放是一件简单自然的事,ARC下,我们甚至可以完全不知道Autorelease ...

  8. 洛谷 P 1330 封锁阳光大学

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  9. StringBuffer笔记

    简要的说, String 类型和 StringBuffer 类型的主要性能区别其实在于 String 是不可变的对象因此在每次对 String 类型进行改变的时候其实都等同于生成了一个新的 Strin ...

  10. P3378 堆【模板】 洛谷

    https://www.luogu.org/problem/show?pid=3378 题目描述 如题,初始小根堆为空,我们需要支持以下3种操作: 操作1: 1 x 表示将x插入到堆中 操作2: 2 ...