您的位置：首页 > Web前端 > JavaScript

arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

2014-10-22 16:04 609 查看

图层控制是很多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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航