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>


显示效果如下:

 

你可能感兴趣的:(ArcGIS For JavaScript API 添加 terrain basemap with operational layer(与业务层相关的地形底图)————(二))