arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
图层控制是非常多GIS系统里面必须的一个小功能，本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式。首先看图：
实现效果
重点有下面两点：1、获取ArcGISDynamicMapServiceLayer的图层；2、控制图层的显示。
图层的获取可通过layerInfos实现，图层的显示通过setVisibleLayers实现，源码例如以下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style type="text/css">
@import "http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dojo/resources/dojo.css";
@import "http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/dijit.css";
@import "http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script>
var map, mapCenter;
var visible=[], setLayerVisibility;;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer",
"dojo/_base/Color",
"dojox/charting/Chart2D",
"dojo/dom-construct",
"dojo/domReady!"],
function(Map,
Tiled,
FeatureLayer,
GraphicsLayer,
Point,
PictureMarkerSymbol,
SimpleLineSymbol,
SimpleRenderer,
Color,
Chart2D,
domConstruct)
{
map = new Map("map", {logo:false,slider: true});
var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");
map.addLayer(tiled,0);
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/china/MapServer");
map.addLayer(dynamicMapServiceLayer,1);
var chartLayer = new GraphicsLayer({"id":"chartLayer"});
map.addLayer(chartLayer,2);
mapCenter = new Point(103.847, 36.0473, map.spatialReference);
map.centerAndZoom(mapCenter,4); dojo.connect(dynamicMapServiceLayer,"onLoad",loadLayerList);
function loadLayerList(layers){
var html=""
var infos=layers.layerInfos;
for(var i= 0,length=infos.length;i<length;i++){
var info = infos[i];
//图层默认显示的话就把图层id加入到visible
if(info.defaultVisibility)
{
visible.push(info.id);
}
//输出图层列表的html
html=html+"<div><input id='"+info.id+"' name='layerList' class='listCss' type='checkbox' value='checkbox' onclick='setLayerVisibility()' "+(info.defaultVisibility ? "checked":"")+" />"+info.name+"</div>";
}
//设置可视图层
dynamicMapServiceLayer.setVisibleLayers(visible);
//在右边显示图层名列表
dojo.byId("toc").innerHTML=html;
}
setLayerVisibility = function()
{
//用dojo.query获取css为listCss的元素数组
var inputs = dojo.query(".listCss");
visible = [];
//对checkbox数组进行变量把选中的id加入到visible
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].checked)
{
visible.push(inputs[i].id);
}
}
//设置可视图层
dynamicMapServiceLayer.setVisibleLayers(visible);
}
});
</script>
</head> <body>
<div id="map">
<div id="toc" style="position: absolute; left: 10px; bottom: 20px; border: 1px solid #9c9c9c; background: #fff; width: 100px; height: auto; z-index: 99;padding: 10px;"></div>
</div>
</body>
</html>
arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现的更多相关文章
- arcgis for javascript ArcGISDynamicMapServiceLayer 过滤图层点
记录下过滤 ArcGISDynamicMapServiceLayer 图层服务的方法 function filterArcGISDynamicMapServiceLayer(){ map.graphi ...
- Arcgis javascript api 动态图层自图层可见性设置
Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...
- arcgis api for js入门开发系列七图层控制(含源代码)
上一篇实现了demo的地图分屏对比模块,本篇新增图层控制模块,截图如下(源代码见文章底部): 图层控制模块实现的思路如下: 1.在地图配置文件map.config.js里面配置图层目录树节点信息,作为 ...
- arcgis api 3.x for js 入门开发系列七图层控制（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- Arcgis for javascript map操作addLayer具体解释
本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...
- 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...
- Arcgis for javascript map操作addLayer详解
本节的内容很简单,说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种,如下图: addLayer方法 在addLa ...
- openlayers自定义图层控制的实现
好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...
- arcgis for javascript 隐藏或显示底图
arcgis for javascript展示地图的时候,有图层的概念,一层一层的,类似photoshop,在应用界面上控制图层的显隐,是极常见的功能. 但是,如果是控制底图的显示或隐藏呢,怎么搞? ...
随机推荐
- SQL 查找某个字段的首字母
执行以下SQL语句 SELECT ,--或得首字母出现的位置 ),--要替换的字符串 ),''),--替换后的结果 OrderId, * FROM dbo.OrderSync 得到结果如下
- delphi 操作 TWebBrowser 实现自动填表(JQuery脚本与 OleVariant 方法)
版本:DELPHI XE8 操作交通银行信用卡申请表单(2016-03-23),网址如下: https://creditcardapp.bankcomm.com/applynew/front/appl ...
- 你真的会玩SQL吗？内连接、外连接
原文:你真的会玩SQL吗?内连接.外连接 大多数人一般写多表查询会这样写select * from tbA ,tbB 没有用到JOIN关键字,太Low了,官网标准建议是用JOIN明确表间的关系,下面 ...
- C语言的本质（26）——C标准库之数值字符串转换
C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串. #include <stdlib.h> int atoi(const char *nptr); a ...
- 学习笔记之--java EE 环境的搭建
一.前期准备.(apache-maven-3.0.5.apache-tomcat-7.0.23-windows-x86.eclipse-jee-kepler-SR1-win32.jdk-7u45-wi ...
- 网易云课堂_C++程序设计入门(上)_第5单元：万类霜天竞自由 – 对象和类的更多内容_第5单元作业【4】 - 在线编程（难度：难）
第5单元作业[4] - 在线编程(难度:难) 查看帮助 返回 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系 ...
- 专题开发十三：JEECG微云高速开发平台-附录
专题开发十三:JEECG微云高速开发平台-附录 12.1UI库经常使用控件參考演示样例 序号 控件 解决方式 參考演示样例 1 datagrid数据列表.字段採用数据字典显示文本 <t:dgCo ...
- asp.net文件操作类
/** 文件操作类 **/ #region 引用命名空间 using System; using System.Collections.Generic; using System.Text; usin ...
- aspx后台生成json对象
json对象应用很广,有时,我们要把一些数据转化为json对象,就需要用到以下方法了. 1.使用Newtonsoft.Json.DLL (推荐使用) 下载地址:http://files.cnblogs ...
- 动态获取UIWebView的真正高度
场景 在 App 中使用UIWebView加载网页, 与原生的 UI 显示在一起,一般情况下,webView 的 内容一页是肯定不够的,换句话说,webView 的高度是不定的,那如果原生的 UI是一 ...