ArcGIS For JavaScript API Dynamically create layer list(动态创建图层列表)————(八)

描述:

此示例遍历所有的地图服务中的图层,并添加到每一个复选框到列表中,可以切换和关闭的图参考示例Toggle layer visibility.

 

buildLayerList)函数:遍历每一层并把它添加一个HTML复选框这将生成图层列表保存在列表中的每一层的默认可见性

updateLayerVisibility)函数:更新显示层

引用联接:http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_dynamiclayerlist/index.html

Dojo在线帮助API:http://dojotoolkit.org/api/

ArcGIS For JavaScript API :http://help.arcgis.com/en/webapi/javascript/arcgis/index.html

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples  on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Dynamically Create Map Service Layer List</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
	  //类似导入包
      dojo.require("esri.map");

      var layer, map, visible = [];		// 创建图层,地图和显示数组
      /**
      	* 初始化函数
      	*/
      function init() {
        map = new esri.Map("map");
		 
        // 创建一个动态服务图层
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/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.defaultVisibility) {
		           	visible.push(info.id);	// 将id编号放入数组中
		       	}
		       	return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
        	}
        );
        dojo.byId("layer_list").innerHTML = items.join(' ');
		alert(items);
        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>
</head>

<body>
这个例子中加载一个  ArcGISDynamicMapServiceLayer.<br />
它决定了层在地图服务中,并将其显示为复选框,可以用来切换他们的显示。
<br />
图层列表 : <span id="layer_list"></span><br />
<br />
<div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>

 

显示结果如下:


ArcGIS For JavaScript API Dynamically create layer list(动态创建图层列表)————(八)_第1张图片

 

 

 

 

 

 

 

 

你可能感兴趣的:(arcgis,ForJavaScript,ARCGIS二次开发)