描述
本例展示了如何在地圖里指出顯示的緩存或切片的細節等級（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;width: 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>