2.3 使用ArcGIS API for JavaScript创建应用程序的基本步骤
使用ArcGIS API for JavaScript创建任何GIS地图应用程序，都需要遵循一些步骤。假如想让地图成为应用程序的一部分，那么就需要你按照这些步骤来执行。在阅读本书时，我很难想象你不按照这些步骤来做会遇到怎样糟糕的情况。简而言之，你需要遵循以下步骤。
1．创建页面HTML代码。
2．引用ArcGIS API for JavaScript和样式表。
3．加载模块。
4．确保DOM可用。
5．创建地图。
6．定义页面内容。
7．页面样式。
这里仅仅是一个必需步骤的简短描述，我们将在接下来的介绍中对每个步骤进行详细说明。
2.3.1 创建Web页面HTML代码
在前面章节中，你已经掌握了HTML、CSS和JavaScript的基础概念。现在我们就来将这些技术应用到实际开发示例中去。首先你需要创建一个简单的HTML文档作为最终的地图容器。当我们开始使用ArcGIS API for JavaScript沙盒时，这些步骤就已经为你准备好了。但是，我想让你花点时间去看这些代码，从而能更好地掌握这些概念。在沙盒的左侧面板中，你看到下列示例中加粗显示的代码是引用自Web页面中基本的HTML代码，当然这里也有一些其他的HTML和JavaScript代码，但是下列代码构成一个Web页面的基本组成部分。这段代码包括几个基本的标签，包括< html >、< head >、< title >、< body >等。
<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user- scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/ themes/claro/claro.css">
<link rel="stylesheet" href=" http://js.arcgis.com/3.7/js/esri/css/ esri.css">
<style>
html,body,#mapDiv{
padding:0;
margin:0;
height:100%;
}
</style>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
dojo.require("esri.map");
function init(){
var map = new esri.Map("#mapDiv",{
center:[-56.049,38.485],
zoom:3,
basemap:"streets"
});
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>
2.3.2 引用ArcGIS API for JavaScript
使用ArcGIS API for JavaScript进行开发时，必须要添加样式和API引用。在沙盒中，下列几行代码已经添加到了
标签内部。
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.7/"></script>
< script >标签加载的是ArcGIS API for JavaScript。在编写本章时，它的当前版本是3.7。当一个新版本的API发布的时候，你需要相应地修改这个数字。< link >标签加载的是esri.css这个ESRI工具和组件的特定样式。
你可以选择性地添加一种DojoDijit主题样式。ArcGIS API for JavaScript是直接建立在DojoJavaScript框架上的。Dojo包括Claro、Tundra、Soria和Nihilo这四个预先定义的主题，它们用于控制添加到应用程序中的用户界面工具的外观样式。下列代码示例引用了Claro主题样式。
<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ claro/claro.css">
其他样式可以参考下列示例代码进行引用，当然你也可以不引用任何一种样式。但是假如你添加Dojo用户界面组件（Dijits），你就需要通过加载其中的一种样式来控制组件的外观。
<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis/com/3.7/js/dojo/dijit/themes/ soria/soria.css">
2.3.3 加载模块
在创建地图对象之前，必须首先通过使用一个名为require()的函数来完成对地图资源的引用。
过时或者AMD Dojo
无论是使用过时的Dojo还是使用新的AMD，对于大多数开发者来说都是一件沮丧的事情。异步模型定义（AMD）是在1.7版本的Dojo中产生的。ArcGIS API for JavaScript3.4是使用新的AMD方式进行所有模块重写后的第一个版本。过时的遗产和AMD方式都可以使用，但是建议在编写任何一个新的应用程序时都使用新的AMD方式。在本书中，我们要遵守这个规定，但是我们还要意识到在3.4版本的API发布之前编写的应用程序和一些ESRI示例仍然是以老版的代码风格呈现的。
在Web页面中使用require()函数来导入资源时，ArcGIS API for JavaScript提供了很多种资源，其中包括esri/map这个在创建地图或者使用Geometry、Graphic和Symbols之前必须用到的资源。一旦提供了资源的引用，你就可以使用Map()构造函数来创建地图。下面是如何在沙盒中运行代码的要点。
在向沙盒中添加代码之前，最好先移除下列加粗显示的代码，删除的代码是使用ArcGIS API for JavaScript过时的方式编写的。以后我们打算使用新的AMD方式，在未来的沙盒版本中，可能就不需要删除这些代码了，希望ESRI会最终将这个基本代码块迁移到更新的AMD方式上去。
<script>
dojo.require("esri.map");
function init(){
var map = new esri.Map("mapDiv",{
center:[-56.049,38.485],
zoom:3,
basemap:"streets"
});
}
dojo.ready(init);
</script>
导入的资源需要包括在一个新的< script >标签内。添加下列加粗显示行的代码到沙盒中的< script >标签内，require()函数中的参数名称可以按照你的习惯命名，但是无论是Esri还是Dojo都提供了一系列首选参数。我建议大家在向require回调函数中命名参数的时候使用Esri的首选参数。类似地，Dojo也有一系列首选参数别名。例如，在下列添加的代码中，我们提供了esri/map资源的引用，然后在内部的匿名函数中，又提供了一个Map的首选参数。在require()函数中引用的每一个资源都有一个相应的参数用于提供访问到该资源对象。
<script>
require(["esri/map","dojo/domReady!"],function(Map){
});
</script>
2.3.4 确保DOM可用
当一个网页加载时，所有组成页面的HTML元素都被加载并且解析。这就是大家熟知的文档对象模型（DOM），它能保证JavaScript不能访问到网页上的任何元素直至所有的网页元素都被加载完毕。假如你的JavaScript代码试图去访问一个还没有加载的网页元素，就很明显会报错。为了避免这种情况的发生，Dojo中有一个ready()函数，可以将其包括在require()函数中，它仅会在HTML元素和任何模块加载之后才会执行。
另一种方法是你可以使用dojo/domReady!插件去保证所有的HTML元素都被加载。在这个练习中我们将使用第二种方法。
在先前的代码当中，我们已经使用dojo/domReady!插件并且将其添加到了require()函数中。
虽然可以直接添加JavaScript代码到基本的HTML文件中，但是更好的办法是创建一个单独的JavaScript文件（后缀名为.js）。本书为了简单起见，大部分代码都是直接写在了HTML文件内，但是当应用程序变得庞大且复杂的时候，希望你遵循将JavaScript代码写在一个单独的文件中的原则。
2.3.5 创建地图
创建一个新的Map地图是通过esri/map这个先前步骤中所引入模块中的Map类来实现的。在require()函数内部，使用构造函数来创建一个新的Map对象。Map对象的构造函数中接收两个参数，第一个是在Web页面上用于承载地图的
标签的引用，还有一个是可选参数，其作用是定义各种地图加载选项。这个可选项被定义成一个包括一系列键/值对的JSON对象。
可能最常见的选项是basemap，通过它你可以从ArcGIS.com中选择一个预先定义的basemap，包括：streets、satellite、hybrid、topo、gray、oceans、national-geographic或osm。zoom选项用来定义地图初始缩放级别，它是一个整数对应一个预先定义的缩放范围等级。minZoom和maxZoom选项分别定义地图最小和最大范围缩放等级。center选项定义初始显示地图时显示的中心点，这个点是一个Point对象，包括一个经度/纬度坐标值对。当向Map对象的构造函数中传递参数时，还有一些其他的额外选项。
首先，我们创建一个全局的变量map以及require()函数，添加下列加粗显示的代码行。
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
});
</script>
添加下列加粗代码到require()函数中，这些代码是新的Map对象的构造函数。传递到该构造函数中的第一个参数是承载地图的< div >标签的ID引用，我们到现在还没有定义这个< div >标签，但是在下面步骤中很快就会定义。第二个传递到构造函数中的参数是一个JSON对象，包括地理坐标的可选项，如地图中心、缩放级别和topo基础地图。
basemap.require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("mapDiv", {
basemap: "topo",
center: [-122.45,37.75], // long, lat
zoom: 13,
sliderStyle: "small"
});
});
2.3.6 创建页面内容
最后的一个步骤是创建用来承载地图容器的HTML< div >标签，你需要为这个< div >标签分配一个唯一的ID编号，这样JavaScript代码就能引用到它。在沙盒中这个 < div >标签已经创建好了，唯一标识符为mapDiv，如下列加粗代码行所示。另外，还需要为
标签定义一个类属性，它应该引用你引入的dojo样式表。在下列代码中，你可以看到< body >标签已经在沙盒中创建了并且完成了先前的两个步骤。
<body class="claro">
<div id="mapDiv"></div>
</body>
2.3.7 页面样式
你可以向< head >标签中添加样式信息来为Web网页定义各种样式。在这个例子中，样式已经在沙盒中为你创建好了，如下列代码所示。本例中的样式包括设置地图，以适应整个浏览器窗口。
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
</style>
2.3.8 完整代码
这个简单例子的完整代码应该是这样的。
<!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>Simple 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: "topo",
center: [-122.45,37.75], // long, lat
zoom: 13,
sliderStyle: "small"
});
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
通过单击Run按钮来运行代码，假如代码一切正常的话，你可以看到如图2-3所示的输出结果。
