看别人搞的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. [adb 命令学习篇] adb 命令总结

    https://testerhome.com/topics/2565 Android 常用 adb 命令总结 针对移动端 Android 的测试, adb 命令是很重要的一个点,必须将常用的 adb ...

  2. BZOJ 3143 [Hnoi2013]游走 ——概率DP

    概率DP+高斯消元 与博物馆一题不同的是,最终的状态是有一定的概率到达的,但是由于不能从最终状态中出来,所以最后要把最终状态的概率置为0. 一条边$(x,y)$经过的概率是x点的概率$*x$到$y$的 ...

  3. BZOJ 1072 [SCOI2007]排列perm ——状压DP

    [题目分析] 没什么好说的,水题. 代码比较丑,结果需要开long long 时间爆炸 [代码] #include <cstdio> #include <cstring> #i ...

  4. 洛谷P3759 - [TJOI2017]不勤劳的图书管理员

    Portal Description 给出一个\(1..n(n\leq5\times10^4)\)的排列\(\{a_n\}\)和数列\(\{w_n\}(w_i\leq10^5)\),进行\(m(m\l ...

  5. 升级完Android Studio3.2后,打包release出现的错误

    升级完Android Studio2.3后,打包release出现的错误 Error:Execution failed for task ':qq:lintVitalRelease'.> Lin ...

  6. 「CodePlus 2018 3 月赛」白金元首与莫斯科

    $n \leq 17,m \leq 17$,$n*m$的01矩形,对每一个0问:当他单独变成1之后,在其他0处放多米诺牌(不一定放满,可以不放)的方案数.膜$1e9+7$. 直接$dp$是$n^42^ ...

  7. Ajax && json(原始)

    function findSend() { $.ajax({ // async: false, // cache: true, type: "POST", url: "I ...

  8. 487. Max Consecutive Ones II

    Given a binary array, find the maximum number of consecutive 1s in this array if you can flip at mos ...

  9. .net core webapi jwt 更为清爽的认证 ,续期很简单

    我的方式非主流,控制却可以更加灵活,喜欢的朋友,不妨花一点时间学习一下 jwt认证分为两部分,第一部分是加密解密,第二部分是灵活的应用于中间件,我的处理方式是将获取token放到api的一个具体的co ...

  10. vue之列表渲染

    一.v-for循环用于数组 v-for 指令根据一组数组的选项列表进行渲染. 1.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组名, item 是数组元 ...