ArcGIS API for JavaScript入门教程 ArcGIS API for JavaScript

ArcGIS API for JavaScript入门教程_第一章_介绍

4

2016-03-17

ArcGIS API for JavaScript的总体介绍

作为ArcGIS平台的一部分，ArcGIS API for JavaScript使得开发者能够丰富的地理web应用程序。本次课程，将在ArcGIS 平台的背景下学习ArcGIS API for JavaScript内容。将了解平台提供的资源和解决方案，以及利用他们开发自己的地理web应用程序。

学习内容
· ArcGIS 平台
· 开发者资源
· API结构
· 开发流程

学习目标
· 掌握ArcGIS开发者能够获取到的资源
· 列举出ArcGIS API for JavaScript的特性和组件
· 使用API在html页面中添加Map

ArcGIS平台
ArcGIS平台，提供了丰富的SDK和API使开发者能够开发许多地理应用程序。平台以Web GIS为核心，由portal，应用程序，内容和设施组成用来支持以地理核心的工作流。开发者通过这些工具能够在不同的web端和移动开发自己的应用程序用来创造，展示和分析地理信息。ArcGIS API for JavaScritp就是这样的API工具用来构建自己的web地理应用程序。

开发准备
为了使用ArcGIS Javascript 开发一个web应用程序，你需要配置环境来获取GIS 服务和来自portal和ArcGIS Online中的内容。你也需要开发工具用来开发和测试应用程序。一般推荐配置如下工具：

a. WebStorm或者Sublim Text或者NotePad++
b. Chrome或fireBug
c. Fiddler

一般的解决方案是使用WebStorm，Sublime Text或者NotePad++ 来进行代码的编写，然后使用带开发者工具的Chrome 浏览器进行测试。而使用Fiddler来监控前端和服务器端的交互。

开发资源
ESRI 给出了许多的帮助文档，实例等资源来帮助开发者学习ArcGIS APIs和SDKs。

ArcGIS API for JavaScript 主页
JavaScripte 的主页是ArcGIS for Developers 网站（developers.argis.com）的一部分。开发者网站旨在帮助开发者发现如何构建富客服端的地理应用程序。该网站对不熟悉Esri 和API的新开发者来说是一个巨大的资源库。Developers网站还提供免费Online 服务，授权和其他ArcGIS 平台中账号。

在该网站中开发者既能使用免费的开发和测试订阅也可企业级订阅，使用企业级订阅可以：
· 使用ArcGIS 平台注册应用程序
· 创建托管的要素服务
· 使用和下载开发sdks
· 测试Online 服务

ArcGIS API（js.arcgis.com）的主页使得开发者能开始获取和使用API。该页面为新的JavaScript开发者提供了良好的入门资源也为熟练的开发者提供更为详细的API参考

GitHub
ESRI采用GitHub（esri.github.io）作为其开源平台，开发者能够克隆和提交其中的代码库。ESRI的开发库严格按照GitHub的标准规范要求，包含README文件，问题处理和wiki说明文档。使用GitHub开发者能够实时获取ESRI 发现的问题，有那些问题被处理，新提交了那些代码等。

GeoNet
GeoNet 为ArcGIS用户提供的一个社区来分享和讨论GIS和地理空间相关的话题。论坛中的用户来自世界各地。它不简简单单的为一个用来提问和获取答案的论坛，其提供了一个社交平台，通过平台能够分享许多的资源，包括博客，视频，文档，上传文件和其他内容。

ArcGIS 知乎
ArcGIS 知乎（zhihu.esrichina.com.cn）是esri china 推出的自助问答社区。为中国的用户提供关于ArcGIS 产品的相关帮助。

ArcGIS for JavaScript API的使用
ArcGIS API for JavaScript的使用一般遵循四个部分，这四个部分如下图所示：

在使用API构建web应用程序之前，首先需要告知应用程序如何获取API，然后添加需要的功能模块。
目前API的sample中给出的实例均是使用在线的URL。当有新版本的API出现，可以直接可以更换为新版本URL。
API支持异步模块定义（AMD）语法。使用dojo的加载其和AMD语法可以异步的加载模块，提高应用程序的使用性能。代码如下所示：

//load the map module form the ESRI namespace

 var map, dialog;

        require([ "esri/map",function(Map){            

            //构建地图对象

            var myMap=new Map("divMap",{});         

        };

添加底图
在编写代码，需要给应用程序添加地图，而ArcGIS Online中托管了一系列的底图。ArcGIS API for JavaScript中将这些地理底图加载到应用程序非常的便捷。在Map类的构造中包含一个名为baseMap的可选参数。该参数接受字符串值用来指定对应的地图。如下图所示：

除了底图，ArcGIS 平台还提供了许多其他的即拿即用的内容，可以参考Sample code中的一些示例：

练习1：创建一个简单的题图应用
完成本课程后，你已经掌握了使用ArcGIS for JavaScript的基本知识和技巧。这个时候你想写一个简单的应用程序。在本次练习中，将学习如下内容：

· 添加ArcGIS API for JavaScript应用
· 添加Map到应用程序中
· 调整地图的参数和样式

STEP1. 创建html页面
· 打开WebStorm
· 创建或者打开一个project
· 创建一个新的index.html页面

STEP2：引用ESRI的JS库
· 打开index.html页面
· 打开浏览器访问js.arcgis.com，从主页中获取必须使用的<link>和<script>标签。

这些标签用来引用ESRI 的css文件和ArcGIS JavaScript 文件。拷贝这些链接到index.html页面中。除了在js.arcgis.com中获取这些链接，也可以从sample中获取这些链接。

注：如果是在本地开发环境下，将这些链接替换成本地部署对应的文件链接。

STEP3：添加地图
显示Map需要API的esri/map 模块。ArcGIS JavaScript的API使用的AMD模式来异步加载模块。

· 使用require() 语句添加模块
该模块添加两个参数，第一个参数为模块名，此处为esri/map 和 dojo/domReady 。第二个参数添加一个空的匿名函数function().并使用Map作为匿名函数的别名参数。
· 在匿名函数中实例化一个Map类，并将实例赋值给myMap对象
· 在html的<body>对象中，添加一个div用来展示map。此处将该div的id命名为divMap
· 将divMap作为实例化Map类的第一个参数。后面的参数为可选参数，根据实际的情况选择添加。
· 启动浏览器进行浏览，此时可以看到图

STEP4：调整地图参数和样式
目前地图默认的是全图显示，且地图没有充满整个浏览器，这个时候，需要指定和调整地图选项。让地图打开就显示到某个特定位置，此处以san Francisco 为例。
· 修改Map的构造参数

  center: [-122.45, 37.75], // longitude, latitude

          zoom: 13

· 修改css，使得hmtl，body和mydiv的高度都为100%

小结
通过本节课程了解ArcGIS API for JavaScript在整个ArcGIS 平台中的作用；掌握从事JavaScript API 开发能够获取到的资源以及构建一个web应用程序的基础流程。

思考题
1. 在API的主页能够获取那些资源？
2. 使用ArcGIS API for JavaScript的场景有那些？

本教程所有章节链接：
ArcGIS API for JavaScript入门教程_第一章_介绍：http://zhihu.esrichina.com.cn/?/article/556
ArcGIS API for JavaScript入门教程_第二章_Map操作：http://zhihu.esrichina.com.cn/?/article/557

4

2016-03-17