描述
這個示例加入一個通過 ArcGISTiledMapServiceLayer表示的 cachedArcGIS Server地圖服務，和一個通過 ArcGISDynamicMapServiceLayer表示的非緩存服務到同一個地圖。
圖層順序由 map.addLayer方法調用的順序決定。第一個被增加的圖層被放置在下方。后來的圖層放置在上面。 在這個示例中，動態圖層被在切片圖層的上面。動態圖層放置在切片圖層上方是常用的方案，因為基礎地圖數據通常適合用ArcGIS Server的地圖緩存而覆蓋圖經常需要修改和實時更新，因此不適合用緩存。
注意頂層圖使用 setOpacity方法設置為半透明:
dynamicMapServiceLayer.setOpacity(0.5);
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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>TiledMap And DynamicMap</title> 8 <style type="text/css"> 9 @import 10 "http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"; 11 </style> 12 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 13 <script type="text/javascript"> 14 dojo.require("esri.map"); 15 function init(){ 16 var map = new esri.Map("map"); 17 //添加地圖的URL,可緩存的切片地圖 18 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer( 19 "http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer" 20 ); 21 map.addLayer(tiledMapServiceLayer); 22 //非緩存地圖服務URL-動態地圖服務層,放在上面，並設置為半透明 23 var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer( 24 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {"opacity":0.5} 25 ); 26 map.addLayer(dynamicMapServiceLayer); 27 } 28 dojo.addOnLoad(init); 29 </script> 30 31 </head> 32 33 <body class="tundra"> 34 <div id="map" style="width:900px;height:600px;border:1px solid #000;"></div> 35 Creates a map and adds an ArcGISDynamicMapServiceLayer and an ArcGISTiledMapServiceLayer.<br> 36 Map navigation using mouse: 37 <ul> 38 <li>Drag to pan</li> 39 <li>SHIFT + Click to recenter</li> 40 <li>SHIFT + Drag to zoom in</li> 41 <li>SHIFT + CTRL + Drag to zoom out</li> 42 <li>Mouse Scroll Forward to zoom in</li> 43 <li>Mouse Scroll Backward to zoom out</li> 44 <li>Use Arrow keys to pan</li> 45 <li>+ key to zoom in a level</li> 46 <li>- key to zoom out a level</li> 47 <li>Double Click to Center and Zoom in</li> 48 </ul> 49 </body> 50 </html>