第一个JavaScript API应用_javascript api应用系统-CSDN博客

开始学习基于ArcGIS API for JavaScript
好久没碰GIS，相当激动！！

运行效果

在这里插入图片描述

代码

<html>
	<head>
		<meta charset="UTF-8"/>
		<title>第一个JavaScript API应用</title>
		//在head部分增加引用ESRI提供的样式表 esri.css样式表主要用于ESRI提供的小部件与组件（例如地图、信息框等）。
		<link rel="stylesheet"  href="http://js.arcgis.com/3.8/js/esri/css/esri.css"/>
		<style type="text/css">
			html,body,#mapDiv
			{
				padding: 0;
				margin: 0;
				height: 100%;
			}
		</style>
		//引用ArcGIS API for JavaScript 
		<script src='http:js.arcgis.com/3.8/'></script>
		//加载地图模块并确保DOM已经可用
		<script type="text/javascript">
			require(['esri/map','esri/layers/ArcGISTiledMapServiceLayer','dojo/domReady!'],function(Map,ArcGISTiledMapServiceLayer)
			{
				//创建地图与加入底图
				//初始化地图以及在地图中加入内容，在require函数指定的回调函数中加入如下代码
				//使用map类（加载自esri/map模块）来创建一个新的地图。mapDiv是在HTML页面中包含地图的DIV名称。
				var map=new Map('mapDiv');
				//指定了一个地图服务的URL
				var agoServiceURL='http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer';
				//根据地图服务的URL创建一个地图切片图层
				var agoLayer=new ArcGISTiledMapServiceLayer(agoServiceURL,{displayLevels:[0,1,2,3,4,5,6,7]});
				//将创建好的地图切片图层（缓存图层）加入到地图中
				map.addLayer(agoLayer);
			});
		</script>
	</head>
	//在body区域增加一个div元素，用于显示地图，并通过设置类型应用到前面的风格中
	<body class="tundra">
		<div id="mapDiv"></div>
	</body>
</html>