描述
这个示例创建一个地图并 ArcGIS Online增加连个图层到地图。ArcGIS Online是由ESRI体提供的一组切片地图服务，可以用来通过高质量的地图和数据增强应用。这个示例增加影像和运输层来创建一个基础地图。可以将示例作为开始点并在上面增加自己的图层。
由于ArcGIS Online图层是 cached的，因此通过 ArcGISTiledMapServiceLayer表示。 图层顺序由 map.addLayer方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。在这个示例中，运输图层被放置在影像图层上面。
注意顶层图层通过使用 setOpacity方法被设置为轻微透明:
dynamicMapServiceLayer.setOpacity(0.85);
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>ArcGIS Online tiled maps.</title> 8 9 <link rel="stylesheet" type="text/css" href="styles.css" 10 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"> 11 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 12 <script type="text/javascript"> 13 dojo.require("esri.map"); 14 function init(){ 15 var map = new esri.Map("mapDiv"); 16 //切片地图服务层 17 var imagerPrime = new esri.layers.ArcGISTiledMapServiceLayer( 18 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" 19 ); 20 map.addLayer(imagerPrime); 21 //略透明的动态地图服务层 22 var transportationReference = new esri.layers.ArcGISDynamicMapServiceLayer( 23 "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/ESRI_BoundariesPlaces_World_2D/MapServer",{"opacity":0.85} 24 ); 25 map.addLayer(transportationReference); 26 } 27 dojo.addOnLoad(init); 28 </script> 29 </head> 30 31 <body class="tundra"> 32 <div id="mapDiv" style="800px;height:600px;border:1px solid #000;"></div> 33 <div>Creates a map and adds two ArcGIS Online map service layers via ArcGISTiledMapServiceLayer.<br> 34 <ul> 35 <li>Drag to pan</li> 36 <li>SHIFT + Click to recenter</li> 37 <li>SHIFT + Drag to zoom in</li> 38 <li>SHIFT + CTRL + Drag to zoom out</li> 39 <li>Mouse Scroll Forward to zoom in</li> 40 <li>Mouse Scroll Backward to zoom out</li> 41 <li>Use Arrow keys to pan</li> 42 <li>+ key to zoom in a level</li> 43 <li>- key to zoom out a level</li> 44 <li>Double Click to Center and Zoom in</li> 45 </ul> 46 </div> 47 </body> 48 </html>