1、前言
ArcGIS API for JavaScript 3.10版本使用Dojo1.9.1。dgrid升级到0.3.14版本。put-selector version版本升级到0.3.5和xstyle版本升级到0.1.3。
2、建立第一个应用程序HelloWord
2.1 、创建一个简单的HTML文档
首先我们先创建一个简单的Html文档，具体事例如下图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWord</title>
</head>
<body>
</body>
</html>
2.2、引用的ArcGIS API JavaScript
要开始使用ArcGIS API为JavaScript工作，添加下面的脚本和链接到<head>标签中：
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <script src="http://js.arcgis.com/3.12/"></script>
script标签加载的ArcGIS API为JavaScript库。当新的JavaScript API的版本发布时，可更到新的版本号以匹配新版本的API。
esri.css样式表中包含特定于ESRI的部件和组件的样式。有关这个样式表的详细信息，请参阅上的帮助主题所需的CSS。
对于各种不同的主题样式表的URL如下：
http://js.arcgis.com/3.12/dijit/themes/claro/claro.css http://js.arcgis.com/3.12/dijit/themes/tundra/tundra.css http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css http://js.arcgis.com/3.12/dijit/themes/soria/soria.css
2.3、加载模块
添加<SCRIPT>标签并从API加载指定的模块。JavaScript代码将直接在其内部增加。
<script>
require(["esri/map"], function(Map) { ... });
</script>
2.4、确保DOM是可用
使用dojo/ domready！确保执行任何代码之前DOM是可用的。一旦DOM是可用的，则该函数传递给 require()将运行。该函数的代码会创建地图并添加底图。
<script>
require(["esri/map", "dojo/domReady!"], function(Map) {
// code to create the map and add a basemap will go here
});
</script>
2.5、创建地图
通过加载esri/map模块的Map类，可用创建一个新的地图。“mapDiv”字符作为包含了地图的div元素的id号被传给Map。并指定其他地图的属性，如底图和起始中心点和缩放级别，在地图初始化的构造函数中。
var map ;
require ([ "esri/map" , "dojo/domReady!" ], function ( Map ) {
map = new Map ( "mapDiv" , {
center : [- 56.049 , 38.485 ],
zoom : 3 ,
basemap : "streets"
});
});
其他底图选项是："satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"。可通过沙箱修改底图来替换不同的底图。查看附加的地图选项来查看地图类的更多细节。
2.6、定义页面内容
现在JavaScript已经在某一位置创建了地图，下一步是添加相关的HTML。此示例中，HTML页面是非常简单的：主体标记，它定义了浏览器中可见的内容，并且单个div元素将在被创建的地图主体中。
<body class="claro">
<div id="mapDiv"></div>
</body>
2.7、页面设计
在本教程中，地图需要填充浏览器窗口。为了达到这一效果，需要早页面<head>标记中添加以下的CSS ：
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%; }
</style>
2.8、完整页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWord</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<script src="http://js.arcgis.com/3.12/"></script>
<script>
var map ;
require ([ "esri/map" , "dojo/domReady!" ], function ( Map ) {
map = new Map ( "mapDiv" , {
center : [- 56.049 , 38.485 ],
zoom : 3 ,
basemap : "streets"
});
});
</script>
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%; }
</style>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
3、参考链接
https://developers.arcgis.com/javascript/jshelp/intro_firstmap_amd.html
https://developers.arcgis.com/javascript/jshelp/intro_firstmap.html