您的位置：首页 > Web前端 > JavaScript

ArcGIS For JavaScript API 添加 terrain basemap with operational layer(与业务层相关的地形底图)————（二）

2013-01-06 12:50 417 查看

描述

此示例显示了如何添加到您的应用程序的多个层。该示例包含三个层次，一个底图，人口统计数据，并最终与参考层边界和地名。

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>

显示效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航