1 建立一个简单的HTML文件

首先，建立一个基本的HTML文件，这里有个例子：

<!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">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
<title></title>
</head>

</html>

2 引入ArcGIS API forJavaScript

在使用 ArcGIS API for JavaScript前，将下面的脚本和链接标签添加到<head>中：

<link rel="stylesheet"href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>

这个脚本标签加载了ArcGIS API for JavaScript，当新版本的JavaScript API发布后，可以更新版本号以匹配新发布的API版本。

Esri.css样式单包含专门的Esri widgets（小工具）和组件，关于这些样式单的更多信息，可以参考required CSS帮助专题。

可以随意包含Dojo Dijit主题（theme）的样式单，有四个主题可供使用：claro，tundra，soria 和nihilo。Dijit theme tester是预览不同Dojo Dijit各自的主题是如何设计的最快方法。Tundra和claro是在API实例中最频繁使用的。使用不同主题进行实验可以找到你最喜欢的。另外，使用Dojo Dijit是个人选择，但是这样是实现API中小工具统一观感的简单方法。不同主题样式单的URL如下：

http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/tundra/tundra.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/nihilo/nihilo.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/soria/soria.css

3 加载模块

使用第二个<script>从API中加载特定模块。不需要再这个script标签引入URL，JavaScript代码直接在内部添加。

<script>
  dojo.require("esri.map");
</script>

建立一个简单的页面或者实验时，将JavaScript嵌入script标签是很有用的，但不适用与建立大型应用，这时需要将所有JavaScript放在独立的.js文件中。

模块通过dojo.require()加载(Dojo提供)，ESRI的JavaScript API建立在Dojo之上并依靠Dojo，因为它的模块系统和其他要素如矢量地图、定位以及浏览器的抽象方式都不同。更多有关Dojo和JavaScript关系的信息参见Working with Dojo和Why Dojo。

4 确保DOM可用

接下来，一旦DOM可用，用dolo.ready来指定执行一个函数。这个函数由dojo.ready访问，叫做init，地图将被创建并且地图图层也被加载。地图图层来自于ArcGIS.com服务。

<script>
  dojo.require("esri.map");
  function init() {
    // code to create the map and add a basemap will go here 
  }
  dojo.ready(init);
</script>

5 创建地图

一个新的地图由esri.map创建，它是地图类的引用，通过esri.map模块加载。传递给esri.map的字符串“mapDiv”是包含地图的div要素的id。指定其他地图属性如底图、起始中心点和上升水平，都传递给地图构造函数。

var map;
  function init() {
    map = new esri.Map("mapDiv", {
      center: [-56.049, 38.485],
      zoom: 3,
      basemap: "streets"
    });
  }
  dojo.ready(init);

因为地图变量声明在全局函数的外面，在测试或者调试时是很有用的因为浏览器开发控制台可以与地图交互。

其余的底图选项是："satellite", "hybrid", "topo", "gray", "ocean", "osm", "national_geographic"。通过在sandbox修改底图选项交替使用底图。查看Map class获取更多地图选项的细节信息。

6 定义页面内容

由于JavaScript创建地图要在适合的地方，下一步是添加项关联的HTML。对这个实例来讲，HTML非常简单：一个<body>标签，定义什么在浏览器里是可见的；body中创建地图的地方一个单独的div元素。

扫描二维码关注公众号，回复： 5416265 查看本文章

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

div有一个“mapDiv”的id要与传入地图构造函数里面的id相同。body标签有个“claro”的类属性，这是用于将页面上包含在head标签中的claro样式单中的样式应用于小工具（widgets）。如果使用不同的主题如tundra，则用class=”tundra”。

7 设计页面样式

在本教程里，地图填充整个浏览器窗口。要实现该功能需要添加下面css在页面的<head>标签中：

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

ArcGIS API for JavaScript之创建第一个应用