ArcGIS api for javascript——放大时切换图层

描述

本例展示了如何在地图里指出显示的缓存或切片的细节等级（LODs）。当打开示例地图，可以看到一些来自ArcGIS Online ESRI_Imagery_World_2D图层的影像。这个应用程序配置这个影像仅LOD 0 - 11是可见的，即使在源缓存中存在其他的等级。直接放大最终会切换到来自ArcGIS Online CSP_Imagery_World_2D图层的详细的user-contributed影像。该应用程序配置了user-contributed影像仅仅在LODs 12 -17是可见的。

本例为地图创建了一组LODs，这组LODs合并了在多个缓存服务中的LODs。在ArcGIS JavaScript API 1.2版本以前，仅仅能是使用增加的第一个服务的LODs。注意设置在ArcGISTiledMapServiceLayer中的displayLevels[]如何转为图层的tileInfo.lods。随后，他们被联接为一个自定义的地图的一组LODs(customLods[])。

放大时可以显示自己的一组数据，而缩小时显示ArcGIS Online或一些其他数据。要执行这个图层转换的类型，匹配的缓存切片方案是必需的。在本例中的两个服务使用ArcGIS Online的缓存切片方案。

 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     <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("esri.layers.agstiled");
14         
15         var customLods = [];
16         var loadCount = 0;
17         
18         function init() {
19         
20         var esriImageLayer = new esri.layers.ArcGISTiledMapServiceLayer(
21             "http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer",
22             {displayLevels:[0,1,2,3,4,5,6,7,8,9,10,11]}
23         );      
24         if (esriImageLayer.loaded) {
25             addLods(esriImageLayer);
26         }else {
27             dojo.connect(esriImageLayer,"onLoad",addLods);
28         }
29         
30         var cspImageryLayer = new esri.layers.ArcGISTiledMapServiceLayer
31                 ("http://services.arcgisonline.com/ArcGIS/rest/services/CSP_Imagery_World_2D/MapServer",
32                 {displayLevels:[12,13,14,15,16,17]}); //Levels at which this layer will be visible
33         if (cspImageryLayer.loaded) {
34           addLods(cspImageryLayer);
35         } else {
36           dojo.connect(cspImageryLayer, "onLoad", addLods);
37         }
38         
39         }
40         
41         //用层次细节填充数组
42         function addLods(layer) {
43             customLods = customLods.concat(layer.tileInfo.lods);
44             loadCount++;
45             
46             if(loadCount === 2) {
47              initMap();
48             }
49         
50         }
51         //创建地图并且用自定义的层次细节
52         function initMap() {
53             var map = new esri.Map("map",{
54               lods:customLods,
55               extent:new esri.geometry.Extent(-82.05,34.87,-80.05,34.99,new esri.SpatialReference({wkid:4326}))
56             
57             });
58             
59             dojo.connect(map,"onExtentChange",changeScale);
60             map.addLayer(esriImageLayer);
61             map.addLayer(cspImageryLayer);
62         
63         }
64         //报告哪一层将被显示
65         function changeScale(extent,delta,outLevelChange,outLod) {
66             dojo.byId("scale").innerHTML = "LOD Level: <i>" + outLod.level;
67             if (outLod.level < 12) {
68                 dojo.byId("visibleLayer").innerHTML = "Layer:<i>ESRI_Imagery_World_2D</i>";
69             }else{
70                 dojo.byId("visibleLayer").innerHTML = "Layer:<i>CSP_Imaery_World_2D</i>";
71             }
72         }
73         
74         dojo.addOnLoad(init);
75     </script>
76  
77   </head>
78 
79   <body >
80       <div id="map" class="tundra" style="position: relative; 900px;height: 600px;border: 1px solid #000">
81       <span id="scale" style="position: absolute;right: 10px;bottom: 10px;z-index: 100;color: yellow;font-size: 150%;"></span>
82       <span id="visibleLayer" style="position: absolute;right: 10px;bottom: 10px;z-index: 100;color: yellow;font-size: 150%;"></span>
83       </div>
84        <p>Zoom in to the city below to switch to user-contributed imagery from ESRI's content sharing program</p>
85   </body>
86 </html>