描述
本例循環地圖服務里的所有圖層並增加每個圖層到一個帶checkbox的列表,checkbox能設置圖層的顯示或隱藏。動態創建列表的優勢是所有的圖層都會包含在列表中,即使服務器管理員刪除或增加了圖層。如果不想包含所有圖層,僅僅要一個子集,見示例 Explicitly create layer list。
注意本例在建立圖層列表以前檢查圖層是否被完全加載。
函數buildLayerList()循環訪問每個圖層並作為一個HTML checkbox加入列表。該函數建立了一個圖層列表。默認每個圖層的可見行被保存在列表中。
每當某人選擇或不選checkbox,函數updateLayerVisibility()被調用。 函數循環訪問列表中的每個圖層,記錄哪些圖層是可見的數組,然后調用 ArcGISDynamicMapServiceLayer.setVisibleLayers()方法。地圖服務里的地圖數組可以通過這個方法被設置。
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 7 <title>動態創建圖層列表</title> 8 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"> 9 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 10 <script type="text/javascript"> 11 dojo.require("esri.map"); 12 13 var dynamicMapServiceLayer,map,visible = []; 14 15 function init() { 16 map = new esri.Map("map"); 17 18 dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer( 19 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer" 20 ); 21 22 if (dynamicMapServiceLayer.loaded) { 23 buildLayerList(dynamicMapServiceLayer); 24 }else{ 25 dojo.connect(dynamicMapServiceLayer,"onLoad",buildLayerList); 26 } 27 } 28 29 function buildLayerList(layer) { 30 var infos = layer.layerInfos, info; 31 var items = []; 32 for (var i=0,j=infos.length;i<j;i++) { 33 info = infos[i]; 34 if (info.defaultVisibility) { 35 visible.push(info.id); 36 } 37 items[i] = "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id +"' onclick='updateLayerVisibility();'/><label for='" +info.id+ "'>" +info.name+ "</label>"; 38 } 39 dojo.byId("layer_list").innerHTML = items.join(); 40 41 layer.setVisibleLayers(visible); 42 map.addLayer(layer); 43 44 } 45 46 function updateLayerVisibility() { 47 var inputs = dojo.query(".list_item"), input; 48 visible = []; 49 for (var i=0,j=inputs.length;i<j;i++) { 50 if(inputs[i].checked) { 51 visible.push(inputs[i].id); 52 } 53 } 54 dynamicMapServiceLayer.setVisibleLayers(visible); 55 56 } 57 dojo.addOnLoad(init); 58 59 </script> 60 61 </head> 62 63 <body > 64 This sample loads an ArcGISDynamicMapServiceLayer.<br /> 65 It determines the layers in the map service and presents them as checkboxes that can be used to toggle their visibility.<br /> 66 <br /> 67 Layer List: <span id="layer_list"></span><br /> 68 <br /> 69 <div id="map" class="tundra" style="width: 900px;height: 600px;border: 1px solid #000"></div> 70 </body> 71 </html>