ArcGIS api for javascript——动态创建图层列表
描述
本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表,checkbox能设置图层的显示或隐藏。动态创建列表的优势是所有的图层都会包含在列表中,即使服务器管理员删除或增加了图层。如果不想包含所有图层,仅仅要一个子集,见示例 Explicitly create layer list。
注意本例在建立图层列表以前检查图层是否被完全加载。
函数buildLayerList()循环访问每个图层并作为一个HTML checkbox加入列表。该函数建立了一个图层列表。默认每个图层的可见行被保存在列表中。
每当某人选择或不选checkbox,函数updateLayerVisibility()被调用。 函数循环访问列表中的每个图层,记录哪些图层是可见的数组,然后调用ArcGISDynamicMapServiceLayer.setVisibleLayers()方法。地图服务里的地图数组可以通过这个方法被设置。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>动态创建图层列表</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript">
dojo.require("esri.map"); var dynamicMapServiceLayer,map,visible = []; function init() {
map = new esri.Map("map"); dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(
"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer"
); if (dynamicMapServiceLayer.loaded) {
buildLayerList(dynamicMapServiceLayer);
}else{
dojo.connect(dynamicMapServiceLayer,"onLoad",buildLayerList);
}
} function buildLayerList(layer) {
var infos = layer.layerInfos, info;
var items = [];
for (var i=0,j=infos.length;i<j;i++) {
info = infos[i];
if (info.defaultVisibility) {
visible.push(info.id);
}
items[i] = "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id +"' onclick='updateLayerVisibility();'/><label for='" +info.id+ "'>" +info.name+ "</label>";
}
dojo.byId("layer_list").innerHTML = items.join(); layer.setVisibleLayers(visible);
map.addLayer(layer); } function updateLayerVisibility() {
var inputs = dojo.query(".list_item"), input;
visible = [];
for (var i=0,j=inputs.length;i<j;i++) {
if(inputs[i].checked) {
visible.push(inputs[i].id);
}
}
dynamicMapServiceLayer.setVisibleLayers(visible); }
dojo.addOnLoad(init); </script> </head> <body >
This sample loads an ArcGISDynamicMapServiceLayer.<br />
It determines the layers in the map service and presents them as checkboxes that can be used to toggle their visibility.<br />
<br />
Layer List: <span id="layer_list"></span><br />
<br />
<div id="map" class="tundra" style="width: 900px;height: 600px;border: 1px solid #000"></div>
</body>
</html>
ArcGIS api for javascript——动态创建图层列表的更多相关文章
- ArcGIS api for javascript——使用图层定义显示地图
描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...
- ArcGIS api for javascript——明确的创建图层列表
描述 本例展示了如何确切地创建一个地图服务里的图层列表.这个列表由HTML checkboxe组成,可用用于开关图层的可见性. 函数updateLayerVisibility()包含开关图层的逻辑.函 ...
- ArcGIS API for JavaScript(2)-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- 转:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- 创建ArcGIS API for JavaScript的第一个示例程序
原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...
- arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...
- ArcGIS API for JavaScript介绍
ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...
- ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译
内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
随机推荐
- Unknown column 't_user.id' in 'where clause'(通过字段名删除不了数据)
创建员工信息表t_user CREATE TABLE t_user( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(20) , passwor ...
- Acme Corporation UVA - 11613 费用流
Code: #include<cstdio> #include<cstring> #include<vector> #include<queue> #i ...
- js上传文件获取文件流
上传文件获取文件流 <div> 上传文件 : <input type="file" name = "file" id = "file ...
- exe文件作为服务启动
一. 准备软件 instsrv.exe srvany.exe 这两个都是 Microsoft Windows Resource Kits 里面的小工具 链接:http://pan.baidu.com/ ...
- 紫书 例题 11-5 UVa 10048 (Floyd求最大权值最小的路径)
这道题是Floyd的变形 改成d[i][j] = min(d[i][j], max(d[i][k], d[k][j]))就好了. #include<cstdio> #include< ...
- Windows下安装Linux虚拟机的用途和好处
Windows一般是办公界面,主要做代码编辑查看,资料查找,还有发邮件,也可以用Windows下的其他的有用软件,Linux主要作为编译工具,基本上开发都是在Linux平台下编译,例如编译驱动就需要在 ...
- Android设置头像,手机拍照或从本地相冊选取图片作为头像
[Android设置头像,手机拍照或从本地相冊选取图片作为头像] 像微信.QQ.微博等社交类的APP,通常都有设置头像的功能,设置头像通常有两种方式: 1,让用户通过选择本地相冊之类的图片库中已 ...
- 整合大量开源库项目(五)跳动的TextView JumpingBeans,良好体验的滚动条ConvenientBanner
转载请注明出处:王亟亟的大牛之路 时间过得非常快,这一系列已经写了第五篇了(感觉还要写好久).今天又引入了2个非常好用的库JumpingBeans,ConvenientBanner.首先.先看一下效果 ...
- HDU 2112 HDU Today <SPFA算法+map函数>
HDU Today Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- A. Ilya and Diplomas( Codeforces Round #311 (Div. 2) )
A. Ilya and Diplomas time limit per test 1 second memory limit per test 256 megabytes input standard ...