ArcGIS For JavaScript API 添加 terrain basemap with operational layer(与业务层相关的地形底图)————（二）
描述
此示例显示了如何添加到您的应用程序的多个层。该示例包含三个层次，一个底图，人口统计数据，并最终与参考层边界和地名。
The World Terrain Base，ArcGIS Online上缓存的地图服务。
首先加入。此服务被设计为用作附加层，如人口统计数据，显示在最前面的底图。
其次，自定义数据添加到地图中。这ArcGIS.com网站或您自己发布的地图服务可以参考的数据。当的地图addingthis层的不透明度设置为0.50，底图下的人口数据是可见的。
var layerURL = http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer;
var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer(layerURL,{"opacity":0.5});
最后，World Reference Overlay被添加在上面。这项服务的目的是要叠加底图和专题地图。此服务包括行政边界，城市，水景，公园，地标等。
对于额外的数据“选项，浏览ArcGIS Online的网站或使用ArcGIS Server作为服务发布自己的地理数据。
显示地址联接：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_terraindemographic/index.html
相关方法，属性和参数请参考API：http://help.arcgis.com/en/webapi/javascript/arcgis/index.html
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>自定义数据的地形底图</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
</style>
<script type="text/javascript">
var djConfig = { // dojo配置格式
parseOnLoad : true // 用来处理页面装载解析widgets和添加代码
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
// 类似导入包
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
function init() {
// 设置区域范围 最小和最大的X-和Y-坐标的边界框。创建一个新的扩展对象。坐标表示的左下角和右上角的边界框。还需要一个空间参考。
// 另外还有2种方式构建：esri.geometry.Extent(xmin, ymin, xmax, ymax, spatialReference) 和 esri.geometry.Extent(json)
var initExtent = new esri.geometry.Extent({
"xmax" : 44.46, // 右上角X坐标
"xmin" : -5.54, // 左下角X坐标
"ymax" : 58.35, // 右上角y坐标
"ymin" : 40.81, // 左下角y坐标
"spatialReference" : { // 空间参考
"wkid" : 4326
}
});
// 创建map地图并设置区域
map = new esri.Map("map", {
extent : esri.geometry.geographicToWebMercator(initExtent)// 从地理单元，以Web墨卡托单位的转换几何。返回geometry
});
//将地形的服务添加到地图中。 ArcGIS Online的网站服务http://arcgisonline/home/search.html?t=content&f=typekeywords:service 全球
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
map.addLayer(basemap); //在中间添加自定义的服务。这是典型的数据，如人口统计数据，土壤，地质等。
// 一个ArcGIS Server REST API 动态地图服务资源ArcGISDynamicMapServiceLayer 该层通常是部分不透明的，因此，base layer 是可见的。 土壤
var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer(
"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer",
{
"opacity" : 0.5 // 设置透明度
}
);
map.addLayer(operationalLayer);
// 缓存图层 ArcGISTiledMapServiceLayer 街道
var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");
map.addLayer(referenceLayer);
dojo.connect(map, 'onLoad', function(theMap) { //当浏览器调整，调整地图的大小
dojo.connect(dijit.byId('map'), 'resize', map, map.resize); // 添加resize监听事件
});
}
dojo.addOnLoad(init); // 加载事件
</script>
</head>
<body class="claro">
<!-- 引入了dijit中的小部件;dojotype：dojo容器类型，design：样式，gutters：装订线 -->
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow: hidden;"></div>
</div>
<div style="height:200px"><p></p><p>这个例子中使用了3个服务图层相叠加形成的效果。</p><p></p></div>
</body>
</html>
显示效果如下：