ArcGIS API for Javascript 开发教程

1

ArcGIS API for Javascript

开发教程

2013年3月

易智瑞（中国）信息技术有限公司

2

——制定及修订记录——

* 修订类型分为A - ADDED M - MODIFIED D – DELETED

注：对该文件内容增加、删除或修改均需填写此记录，详细记载变更信息，以保

证其可追溯性。

目录

1基本概念 (9)

Javascript介绍 (9)

Dojo介绍 (10)

REST介绍 (10)

JSON 介绍 (11)

ArcGIS API for Javascript介绍 (13)

ArcGIS API for Javascript介绍 (13)

ArcGIS API for Javascript主要特点 (13)

ArcGIS for Server服务类型 (14)

主要服务具备的能力 (15)

2应用开发起步 (18)

集成开发环境和API的准备 (18)

ArcGIS API for Javascript离线部署 (19)

ArcGIS API for Javascript帮助的离线部署 (20)

关于智能提示 (21)

第一个应用程序 (21)

3基础入门 (26)

基本概念 (26)

地图 (26)

图层 (26)

Geometry (27)

Symbol (28)

Graphic (29)

Render (29)

FeatureSet (29)

常用控件（小部件） (30)

鹰眼图 (30)

Scalebar (32)

3

书签 (34)

InfoWindow (36)

编辑控件 (38)

图例 (39)

时间滑块 (42)

4服务访问 (45)

预备知识 (45)

Dojo基本函数 (46)

动态2D地图服务加载 (49)

动态2D地图服务主要方法 (49)

主要属性 (50)

动态2D地图服务加载示例 (50)

切片服务加载（缓存2D地图服务） (52)

切片服务加载示例 (53)

要素服务加载 (53)

如何使用要素服务 (54)

要素图层按需模式显示示例 (54)

影像服务加载 (58)

什么是影像服务 (58)

ArcGIS影像服务可以做什么 (59)

ArcGISImageServiceLayer介绍 (60)

影像服务动态处理 (61)

影像服务加载示例 (63)

影像服务的时态展示示例 (64)

OpenStreetMap地图服务 (68)

OpenStreetMap加载示例代码 (68)

OGC标准服务 (69)

WMS服务加载示例 (70)

GraphicsLayer (71)

GraphicsLayer的主要方法 (72)

GraphicsLayer的主要属性 (72)

GraphicsLayer示例 (72)

动态图层 (76)

4

什么是动态图层 (76)

如何注册工作空间 (77)

动态图层使用示例 (78)

5地图操作 (80)

地图 (80)

Map 的主要方法 (81)

属性 (82)

事件 (84)

地图操作示例 (85)

导航 (86)

Navigation 定义的主要方法 (86)

事件 (86)

导航示例 (87)

绘图 (87)

绘图工具的主要方法 (88)

属性 (89)

事件 (89)

绘图示例 (90)

图形编辑 (90)

编辑工具的主要方法 (91)

事件 (91)

6符号渲染 (92)

渲染器 (92)

简单符号渲染 (93)

示例 (93)

唯一值渲染 (94)

示例 (94)

分级渲染 (95)

示例 (95)

7任务知多少 (96)

查询检索 (97)

QueryTask (97)

5

查询统计 (103)

FindTask (104)

IdentifyTask (107)

关联查询 (112)

ImageServiceTask (115)

查询检索小结 (120)

服务器端渲染 (122)

示例 (122)

地址匹配 (125)

Geocode 服务发布 (126)

示例 (127)

网络分析 (131)

示例 (131)

Geoprocessing (136)

地处理服务介绍 (136)

返回矢量数据示例 (139)

返回栅格数据示例 (142)

服务器端打印 (146)

示例 (146)

8几何操作 (149)

几何操作简介 (149)

示例 (150)

核心代码 (151)

展示结果 (153)

9关系运算 (154)

关系运算简介 (154)

示例 (158)

核心代码 (158)

展示结果 (159)

10在线编辑 (160)

在线编辑简介 (160)

示例 (160)

6

核心代码 (160)

展示结果 (161)

11开发进阶 (162)

InfoWindow高级定制 (162)

简单的InfoWindow (162)

复杂的InfoWindow (164)

使用InfoWindowBase扩展 (167)

自定义专题图 (171)

示例 (172)

核心代码 (172)

更加复杂的图表展现 (174)

第三方地图资源加载 (174)

切片服务的源头-TiledMapServiceLayer (175)

天地图 (175)

百度地图 (180)

Google地图 (184)

轨迹移动 (187)

简单的轨迹移动代码示例 (188)

复杂的轨迹移动代码示例 (190)

业务数据整合（Web Service整合） (191)

Web Service介绍 (191)

和Web Service 相关的名词 (192)

示例 (193)

使用SOE扩展ArcGIS for Server (198)

SOE介绍 (198)

使用SOE示例 (200)

代理 (203)

为什么需要代理 (203)

代理原理 (203)

ArcGIS API for Javascript何时需要代理 (204)

代理配置 (204)

额外内容-为什么可以直接使用ArcGIS Online在线的API? (206)

ExtJS,JQuery整合 (206)

ExtJS (206)

7

JQuery (209)

12应用部署 (212)

应用部署 (213)

在Visual Stuido 2010中发布 (213)

禁用目录浏览功能 (215)

添加默认文档 (216)

小结 (219)

13参考资料 (219)

14学习资料 (220)

15附录 (220)

如何发布动态2D地图服务 (220)

如何发布要素服务 (229)

使用要素服务的准备条件 (230)

如何发布影像服务 (233)

GP服务发布（最短路径分析为例） (238)

如何创建SOE (241)

8

1基本概念

Javascript介绍

Javascript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，是Java与HTML折衷的选择，具有以下几个基本特点：

1、是一种脚本语言

Javascript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样，Javascript同样也是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++等类似，但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、基于对象的语言。

Javascript是一种基于对象的语言，同时以可以看作一种面向对象的开发语言。这意味着它能运用自己已经创建的对象。

3、简单性

Javascript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4、安全性

Javascript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性

9

Javascript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性

Javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持Javascript 的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

Dojo介绍

Dojo是一个强大的面向对象Javascript框架。主要由三大模块组成：Core、Dijit、DojoX。其中Core 提供Ajax、events、packaging、CSS-based querying、animations、JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid、charts、离线应用、跨浏览器矢量绘图等。

Dojo的特点可从下面几部分说起：

1、Dojo是一个纯Javascript库，后台只要提供相应的接口就能够将数据以Json的格式输出给前台。

2、Dojo自身定义了完整的函数库，屏蔽了浏览器的差异。

3、Dojo自身定义了界面组件库，其组件代码采用了面向对象的思想，便于继承及扩展。

4、当对前端界面联动需求较为复杂的时候，基于dojo的页面组件将是首选，因为其可以将界面中某一个具有共性的区域抽象出来，封装这一区域的界面行为以及数据，可以用搭积木的方式完成复杂页面的开发。

REST介绍

REST（Representational State Transfer）是Roy Fielding 博士在2000 年他的博士论文中提出来的一种软件架构风格。REST 本身并不涉及任何新的技术，它基于HTTP 协议，比起SOAP 和XML-RPC 来说它更加地简洁、高效，现在越来越多的大型网站正在使用REST 风格来设计和实现。

REST最突出的特点就是用URI 来描述互联网上所有的资源，Roy Fielding 博士通过观察互联网

10

的运作方式对其进行了抽象，他认为：设计良好的网络应用表现为一系列的虚拟“网页”，或者说这些虚拟网页就是资源状态的表现（Representational）；用户选择这些链接导致下一个虚拟的“网页”传输到用户端展现给使用的人，而这正代表了资源状态的转发（State Transfer）。

REST 主要有以下的特点：

1、资源通过URI 来指定和操作

2、对资源的操作包括获取、创建、修改和删除资源，这些操作正好对应HTTP 协议提供的GET、POST、PUT 和DELETE 方法

3、连接是无状态性

4、能够利用Cache 机制来提高性能

JSON 介绍

JSON是一种轻量级的数据交换格式，易于人阅读和编写。JSON能够描述四种简单的类型（字符串、数字、布尔值及null）和两种结构化类型（对象及数组）。JSON对象由一对大括号（以“{”开始，以“}”结束）包围着零个或多个Key/Value对（或者是成员）。Key是string类型的，每个Key后面跟一个冒号，把Key与Value分开，逗号则隔开紧跟在值后的另一个Key。下面就是一个JSON对象的例子：

11

12

ArcGIS API for Javascript介绍

ArcGIS API for Javascript介绍

ArcGIS API for Javascript 是由美国Esri 公司推出，跟随ArcGIS 9.3同时发布的，是Esri基于dojo 框架和REST风格实现的一套编程接口（目前最新版本为3.3，dojo1.8）。通过ArcGIS API for Javascript 可以对ArcGIS for Server进行访问，并且将ArcGIS for Server提供的地图资源和其它资源（ArcGIS Online）嵌入到Web应用中。

ArcGIS API for Javascript主要特点

1、空间数据展示：加载地图服务，影像服务,WMS等。

2、客户端Mashup：将来自不同服务器、不同类型的服务在客户端聚合后统一呈现给客户。

3、图形绘制：在地图上交互式地绘制查询范围或地理标记等。

4、符号渲染：提供对图形进行符号化,要素图层生成专题图和服务器端渲染等功能。

5、查询检索：基于属性和空间位置进行查询，支持关联查询，对查询结果的排序、分组以及对属性数据的统计。

6、地理处理：调用ArcGIS for Server 发布的地理处理服务（GP 服务），执行空间分析、地理处理或其他需要服务器端执行的工具、模型、运算等。

7、网络分析：计算最优路径、临近设施和服务区域。

8、在线编辑：通过要素服务编辑要素的图形、属性、附件,进行编辑追踪。

9、时态感知：展示、查询具有时间特征的地图服务或影像服务数据。

10、影像处理：提供动态镶嵌、实时栅格函数处理等功能。

11、地图输出：提供多种地图图片导出和服务器端打印等功能。

13

ArcGIS for Server服务类型

服务简单的来说就是ArcGIS for Server发布的GIS资源，不同的资源可以被发布为不同的服务，不同的服务具有不同的功能，详细信息如下表：

表：1-6-1 ArcGIS for Server 服务及功能服务类型使用的GIS资源功能描述

2D地图服务2D地图文档(.mxd, .pmf) 显示，查询和分析2D地图，支持动

态的和缓存的地图服务

地理编码服务地址定位器(.loc, .mxs, SDE batch

locator)

在服务器上执行地址匹配

空间数据服务数据库连接文件(.sde) 或者文件数据

库或者引用版本化数据库数据的地图文

档提供对Geodatabase 的访问、查询、更新和管理

几何服务不需要GIS资源没有GIS资源的服务，提供对几何图

形的操作，如简化，投影等

地理处理服务执行成功的地理处理工具提供空间分析和地理处理服务

3D地图服务3D地图文档(.3dd, .pmf) 显示，查询和分析3D地图

影像服务栅格数据集、镶嵌数据集、栅格图层、

镶嵌图层

提供对栅格、影像数据的访问服务搜索服务文件夹或者数据库连接文件(.sde) 提供对企业级GIS 数据资源的检索服

务。目前叧能在ArcGIS for Desktop

软件中使用该服务,该服务只能在桌面

中使用

14

15

主要服务具备的能力

上面我们介绍了服务对应的资源类型和服务具备的能力，不同的服务具有不同的能力以及支持不同的操作，在使用ArcGIS API for Javascript 的时候，其实就是在使用这些REST API 使用这些服务对外的能力，了解每种服务的具体功能，在开发的时候就可以根据需求做到游刃有余。

发布好一个地图服务时，我们进入到ArcGIS for Server 的管理页面，可以看到非常详细的信息，下图是我发布的一个叫做JsMap 的2D 地图动态服务，在功能选项卡中可以看到该服务可以支持的功能以及每种功能支持的操作。

图：1-7-1（地图服务的地图功能支持Map ，Query 和Data 操作）

1.6.1.1 2D 地图服务

表：

1-7-1 地图服务具备的能力

服务能力 功能描述

Mapping 提供对地图文档内容的显示，访问等。地图服务始终具备该功能。Feature Access 提供对地图上矢量要素的访问和编辑。

Mobile Data Access 允许从移动设备访问地图文档中的数据。

WMS 使用符合OGC WMS标准服务提供的操作。

KML 允许使用KML服务规范提供的操作。

Network Analysis 使用网络分析扩展模块解决交通网络的分析问题。

WFS 使用符合OGC WFS标准的服务提供的操作。

WCS 创建符合OGC WCS标准的服务提供的操作。

Schematics 提供对逻辑示意图的查询和编辑

1.6.1.2影像服务

表：1-7-2影像服务具备的能力

服务能力功能描述

Imaging 提供对栅格数据集或镶嵌数据集的访问，包括像素值、属性、元数据和波段。

影像服务自动具备该能力。

JPIP当使用JPEG 2000 文件和配置来自ITTVIS 的JPIP 服务器时提供JPIP

流能力。

W MS 使用符合OGC WMS标准的服务提供的操作。

WC S 使用符合OGC WCS标准的服务提供的操作。

1.6.1.33D地图服务

表：1-7-3球体服务具备的能力

服务能力功能描述

G l obe提供对Globe 文档内容的访问。Globe 服务自动具备该能力。

16

1.6.1.4地理编码服务

表：1-7-4地理编码服务具备的能力

服务能力功能描述

Geocoding 提供对地址定位器的访问。Geocode 服务始终具备该功能。

1.6.1.5空间数据服务

表1-7-5 空间数据服务具备的能力

服务能力功能描述

Geodata 提供对Geodatabase 数据的查询、提取和复制。Geodata 服务始终具备该

功能。

W FS 使用符合OGC WFS标准的服务提供的操作。

WC S 使用符合OGC WCS标准的服务提供的操作。

1.6.1.6地理处理服务

表：1-7-6地理处理服务具备的能力

服务能力功能描述

Geoprocessing 提供对工具箱或工具图层中地理处理模型的访问。

Geoprocessing 服务自动具备该能力。

1.6.1.7几何服务

表：1-7-7几何服务具备的能力

服务能力功能描述

Geometry 提供执行几何计算的内部引擎，如投影、生成缓冲区等，简化点，合并，裁

剪等19个功能。

17

1.6.1.8数据检索服务

表：1-7-8 数据检索服务具备的能力

服务能力

功能描述

Search 提供对企业级GIS 数据资源的检索。Search 服务始终具备该能力。

2应用开发起步

集成开发环境和API的准备

工欲善其事，必先利其器。开发Javascript的程序，有许多工具可以选择，比如Eclipse、Aptana、Visual Studio等，所谓萝卜青菜给有所爱，自己根据喜好去选择。

在这里采用的集成开发环境是Visual Studio 2010专业版，开发环境安装完成后，我们需要引入ArcGIS API for Javascript的开发包，API获取可以从Esri官网下载（点击这里）。该页面中列出了Esri发布的各种版本的API，对于ArcGIS API for Javascript，不仅仅提供了API，还提供了SDK（SDK里面含有API

的帮助以及例子），需要注意的是，想获取API和

SDK，需要注册一个Esri全球账户。

将下载后的API压缩包解压，可以看到其结构如下：

图：2-1-1 ArcGIS API for Javascript 文件结构

在这里可以看到jsapi和jsapicompact两个目录，其中紧凑版本去掉了Dojo Dijit的依存关系，并最大限度地减少了不必要的ArcGIS JSAPI类，紧凑版本的目的是用在网络慢和有网络延迟的环境中，比如移动设备。

18

ArcGIS API for Javascript离线部署

将下载解压的ArcGIS API for Javascript离线包按照下面的步骤部署（以jsapi这个包为例）

用记事本打开: API解压目录\library\3.3\jsapi\init.js文件，将文本中“[HOSTNAME_AND_PA TH_TO_JSAPI]”，用“/arcgis_js_api/library/3.3/jsapi/”替换，其中myserver可以是机器名、IP等，在这里我用的是localhost，即将“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为”localhost/arcgis_js_api/library/3.3/jsapi/ “

用记事本打开:API解压目录\library\3.3\jsapi\ js\dojo\dojo\dojo.js文件，将“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为“localhost/arcgis_js_api/library/3.3/jsapi/”。

整个替换过程可以用记事本的查找替换功能，如下图：

1.将修改后的文件连同解压目录内的所有文件拷贝到Web服务器根目录，以IIS为例，拷贝为

wwwroot目录下的arcgis_js_api,最终的目录结构如下图：

19

图：2-1-3 服务器上部署之后的结构

说明：如果要部署紧凑版本的API包，任然按照上面的步骤，只是在替换的时候将“[HOSTNAME_AND_PATH_TO_JSAPI]”,替换为"/arcgis_js_api/library/3.3/jsapicompact/"。

ArcGIS API for Javascript帮助的离线部署

务器根目录下即可，部署后我本机SDK的结构如下：

20

21

图： 2-1-4 服务器上部署SDK 文件夹的结构

在浏览器中我们输入：localhost/arcgisjssdk/sdk/index 可以看到下面的页面：

图： 2-1-4 测试SDK 能否访问

关于智能提示

开发如果没有智能提示，可想而知是一件多么痛苦的事情，好在Esri 为Visual Studio 2010、Aptana3提供了一个插件，这样就使我们在使用ArcGIS API for Javascrip 的时候获得了方便，可以大大节约开发时间。这个插件其本质就是一个Javascript 文件，下载地址：bf0a75cd195f312b3169a537/en/webapi/Javascript/arcgis/jsapi/#api_codeassist

需要注意的是在Visual Studio 2010中dojo 并不能智能提示，而Aptana 和Visual Studio 2012 中对dojo 则可以做到智能提示，如果对智能提示要求高的，可以采用Aptana 和Visual Studio 2012作为开发环境。

第一个应用程序

一切就绪之后，我们要做的就是尝试，跟我们学习C 、C#语言一样，都会用“Hello Word ！”作为我们的第一个程序，但是在这里，

我们只需要简单的加载一幅捷泰科技有限公司官网上的地图作为我们的开

本文来源：https://www.bwwdw.com/article/vlbq.html