描述

这个示例加入一个通过ArcGISTiledMapServiceLayer表示的cachedArcGIS Server地图服务,和一个通过ArcGISDynamicMapServiceLayer表示的非缓存服务到同一个地图。

图层顺序由map.addLayer方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。 在这个示例中,动态图层被在切片图层的上面。动态图层放置在切片图层上方是常用的方案,因为基础地图数据通常适合用ArcGIS Server的地图缓存而覆盖图经常需要修改和实时更新,因此不适合用缓存。

注意顶层图使用setOpacity方法设置为半透明:

dynamicMapServiceLayer.setOpacity(0.5);
 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>TiledMap And DynamicMap</title>
<style type="text/css">
@import
"http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init(){
var map = new esri.Map("map");
//添加地图的URL,可缓存的切片地图
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(
"http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer"
);
map.addLayer(tiledMapServiceLayer);
//非缓存地图服务URL-动态地图服务层,放在上面,并设置为半透明
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(
"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {"opacity":0.5}
);
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad(init);
</script> </head> <body class="tundra">
<div id="map" style="width:900px;height:600px;border:1px solid #000;"></div>
Creates a map and adds an ArcGISDynamicMapServiceLayer and an ArcGISTiledMapServiceLayer.<br>
Map navigation using mouse:
<ul>
<li>Drag to pan</li>
<li>SHIFT + Click to recenter</li>
<li>SHIFT + Drag to zoom in</li>
<li>SHIFT + CTRL + Drag to zoom out</li>
<li>Mouse Scroll Forward to zoom in</li>
<li>Mouse Scroll Backward to zoom out</li>
<li>Use Arrow keys to pan</li>
<li>+ key to zoom in a level</li>
<li>- key to zoom out a level</li>
<li>Double Click to Center and Zoom in</li>
</ul>
</body>
</html>
05-24 10:52