通过 ArcGIS API for JavaScript 来构建 WebGIS 应用。
引用库文件
我们使用 ArcGIS API for JavaScript库来构建Web地图,那么引入其文件是必须的。同其他框架库一样,我们是需要引入css、js文件。
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<script src="http://js.arcgis.com/3.7/"></script>
创建初始js代码
通过require()函数导入资源:ersi/map是需要使用资源,dojo/domReady!是dojo中确保DOM可用的插件,还有一个匿名函数。
<script>
require(["esri/map", "dojo/domReady!"], function(Map) {
//……
});
</script>
创建地图
前面通过require函数引入了esri/map资源模块,意味着可以使用其中的Map类来创建一个Map对象。通过Map对象的构造函数来创建一个地图实例,构造函数接受两个参数,第一个是页面承载地图的div容器的ID值(设置为map);第二个是设置地图的键值对,它被设置为一个JSON对象。
basemap定义地图的内容,如streets、topo、gray、oceans;zoom定义地图的初始缩放级别,minZoom、maxZoom定义最小、最大缩放等级;center定义初始显示地图的中心点,其值为经纬度坐标值。
首先定义全局的变量map,然后再匿名函数中通过Map构造函数定义map对象。
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map",{
basemap: "topo",
center: [-122.45,37.75],
zoom: 13,
sliderStyle: "small"
});
});
</script>
创建地图容器
在HTML中定义一个div元素,并设置其ID属性map。然后为body元素定义一个类属性,为了配合引入的dojo的样式表,设置为claro。
<body class="claro">
<div id="map"></div>
</body>
页面样式
在地图已经加载如页面后,还可以简单设置其显示样式,使其居中适应整个浏览器页面。
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
完整代码
在浏览器看到地图效果,它仅仅加载了一个底图图层,你可以实现缩放和拖动功能。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>a map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "gray",
center: [-122.45,37.75],
zoom: 13,
sliderStyle: "small"
});
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
“学习ArcGIS API for JavaScript” 未完待续 ^_^ ……