WebGIS入门（一）--------在线加载ESRI地图

一、首先要添加在线的arcGIS的样式css库和js库，代码如下：

<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<script src="http://js.arcgis.com/3.11/"></script>

这里另外再提一点，arcgis api for javascript提供了下面几种css样式：

http://js.arcgis.com/3.11/dijit/themes/claro/claro.css
http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css
http://js.arcgis.com/3.11/dijit/themes/nihilo/nihilo.css
http://js.arcgis.com/3.11/dijit/themes/soria/soria.css

大家可以根据不同的样式风格进行选择。

二、在body部分加入一个放置地图的div，代码如下：

<body class="claro">
		<div id="mapDiv"></div>
</body>

三、开始编写js代码，代码如下：

<script>
	var map;
	require([
		"esri/map",
		"dojo/domReady!"
	],function(Map){
		map=new Map("mapDiv",{
				center:[110,32],
				zoom:4,
				basemap:"streets"
			});	
		});
</script>

下面对这几句代码分别进行解释：

arcgis api for js是在Dojo基础上写的，所以引用对象使用require（）语句，语句里面"esri/map"是指调用esri地图对象，"dojo/domReady!"是指保证当DOM对象已经加载完成时，再调用function中的语句，否则当引用对象较多的时候可能会报对象为null的错误。下面再解释function里面的代码：

首先定义了一个map，并将其绘制在咱们之前已经写好的div里面（通过绑定div的id），然后center属性是指地图页面上显示的视野中心经纬度；zoom属性是指地图放大的级别；basemap属性是指arcgis在线地图的一个瓦片地图服务。

四、我们还可以自己设置一下地图显示的样式css，这里我简单地让地图充满，并且没有任何间距，代码如下：

<style>
	html,body,#map{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
</style>

这样我们就能在线加载一个地图啦。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
		<title>在线加载地图</title>
		<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
		<script src="http://js.arcgis.com/3.11/"></script>
		<script>
			var map;
			require([
				"esri/map",
				"dojo/domReady!"
			],function(Map){
				map=new Map("mapDiv",{
					center:[110,32],
					zoom:4,
					basemap:"streets"
				});	
			});
		</script>
		<style>
			html,body,#map{
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body class="claro">
		<div id="mapDiv"></div>
	</body>
</html>

测试一下即可加载世界地图！

WebGIS入门（一）--------在线加载ESRI地图

猜你喜欢