ArcGIS api for javascript——显示多个ArcGIS Online服务

描述

本例展示了如何使用按钮在地图里的两个不同的图层间切换。所有地图里的图层恰巧是来自ArcGIS Online的 ArcGISTiledMapServiceLayers。按钮是Dojo dijit按钮，不过也可以使用HTML按钮，radio按钮等调用相同的函数。

当应用运行时，发生下面的事情：

1.init函数被调用，创建一个地图并且通过map.addLayer方法直接加入影像图层。函数也填充了图层名字的数组，但是没有创建除影像图层之外的任何图层。

2.用户单击按钮，调用changeMap函数。一个包含与按钮一致的图层ID的单个项目数组作为输入参数被传递给changeMap函数。

3.changeMap直接调用hideImageTiledLayers函数，传给hideImageTiledLayers函数同样的包含和被点击的按钮一致的图层ID的单个项目的数组。hideImageTiledLayers函数循环访问地图里的每个图层，和传入函数的图层ID不匹配的图层ID的图层被隐藏。

4.函数当hideImageTiledLayers函数完成，changeMap函数循环访问图层数组里的每个图层，并调用函数initLayer。记住数组仅仅包含一个图层，和被单击的按一致的图层

5.initLayer函数创建图层，然后增加图层到地图里。

6.changeMap函数显示图层(使图层可见)。

 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>显示多个ArcGIS Online服务</title>
 8     <script type="text/javascript">djConfig = { isDebug:true };</script>
 9     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
10     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
11     <script type="text/javascript">
12         dojo.require("esri.map");
13         dojo.require("dijit.form.Button");
14         
15         var map;
16         var streetMap, imageryPrime, shadedRelief, ngsTopoUS, boundariesWorld;
17         
18         function init(){
19             map = new esri.Map("map");
20             imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer", {id:"imageryPrime"});
21                map.addLayer(imageryPrime);
22 
23             streetMap = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer", "streetMap");
24             shadedRelief = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_ShadedRelief_World_2D/MapServer", "shadedRelief");
25             ngsTopoUS = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer", "ngsTopoUS");
26             boundariesWorld = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/ESRI_BoundariesPlaces_World_2D/MapServer", "boundariesWorld");
27         
28         }
29         function initLayer(url, id) {
30             var layer = new esri.layers.ArcGISTiledMapServiceLayer(url, {id:id, visible:false});
31                map.addLayer(layer);
32                return layer;
33         }
34         
35         function changeMap(layers) {
36             hideImageTiledLayers(layers);
37             for (var i=0;i<layers.length;i++) {
38                 layers[i].show();
39             }
40         
41         }
42         
43         function hideImageTiledLayers(layers) {
44         
45         alert(map.layerIds.length);
46             for(var i=0,j=map.layerIds.length;i<j;i++) {
47                   
48                 var layer = map.getLayer(map.layerIds[i]);
49                 if(dojo.indexOf(layers,layer) == -1) {//没有找到
50                     layer.hide();
51                 }
52             
53             }
54         
55         } 
56         
57       
58         dojo.addOnLoad(init);
59     </script>
60  
61   </head>
62 
63   <body class="tundra">
64       <div id="map" style=" 1100px;height: 600px;border: 1px solid #000"></div>
65       <div  style="position: absolute;right: 175px;top: 10px;z-index: 999;">
66           <button dojoType="dijit.form.Button" onclick="changeMap([imageryPrime]);"> imageryPrime</button>
67           <button dojoType="dijit.form.Button" onclick="changeMap([imageryPrime,boundariesWorld]);">imageryPrime,boundariesWorld </button>
68           <button dojoType="dijit.form.Button" onclick="changeMap([streetMap]);"> streetMap</button>
69           <button dojoType="dijit.form.Button" onclick="changeMap([ngsTopoUS]);">ngsTopoUS </button>
70           <button dojoType="dijit.form.Button" onclick="changeMap([shadedRelief]);">shadedRelief </button>
71       </div>
72   
73   </body>
74 </html>