ArcGIS_API_for_JavaScript培训教材
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
› alert(obj.text)
函数就是一个对象，匿名函数是一个指向函 数对象的指针
› function add(num1,num2){ return num1 + num2; › } › var pAdd = function(num1,num2){ return num1 + num2; › }
使用ArcGIS Server的REST API，可以实现显示、 查询、分析等功能。 调用ArcGIS Server的GP服务，提供专业的分析 结果 可以同时调用多个ArcGIS Server的服务，轻松 实现融合应用。
所有的主流的浏览器均支持JavaScript，无需安 装任何插件
JavaScript是世界最常用的开发语言之一，轻量 级的Web开发脚本语言 纯粹的客户端语言(运行在客户端的浏览器内)， 包括桌面和移动端 有各种成熟的JavaScript框架：Dojo、jQuery、 ExtJS、Prototype、YUI……
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="http://localhost:6080/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" type="text/css" href="http://localhost:6080/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" /> <script type="text/javascript" src="http://localhost:6080/arcgis_js_api/library/3.2/jsapi/init.js"></script> <style type="text/css"> html,body,#mapDiv { width:100%; height:100%; } </style> <script type="text/javascript"> dojo.require("esri.map"); function init() { var myMap = new esri.Map("mapDiv"); var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://lxhpc:6080/arcgis/rest/services/JSApiDemo/MapServer"); myMap.addLayer(myTiledMapServiceLayer); } dojo.addOnLoad(init); </script> </head> <body class="tundra"> <div id="mapDiv"></div> </body> </html>
› 将两个文件中的[HOSTNAME_AND_PATH_TO_JSAPI]替换
为<myserver>:<port>/arcgis_js_api/library/3.2/jsapi/， 如果端口号为80则可省略。
修改arcgis_js_api\library\3.2\jsapicompact目录 下的init.js及再下级目录js\dojo\dojo\dojo.js文件
打开文件C:\Program Files\ArcGIS\Server\framework\runtime \tomcat\webapps\arcgis#rest\WEBINF\classes\resources\restconfig.properties 修改文件中jsapi.arcgis和jsapi.arcgis.css， 将这两个值指向本地部署的离线API的地址。
脚本语言：解释执行，不需要预编译 基于对象的语言：基于对象的语言、也可看 做面向对象的 简单性：量类型是采用弱类型，容易学习 安全性：不能访问本地硬盘、不能存数据到 服务器…… 动态性：事件驱动的方式与用户交互 跨平台性：和系统无关，只要有浏览器
标识符命名
› 变量、函数名、操作符都区分大小写，
语句
› while语句
while(expression) { statement } › for语句 for(var i = 0 ; i < 100;i++) { statement }
语句
› switch语句
switch(variable){ case (condition or value): statement break; case (condition or value) statement break; …… default: statement
Plugins”页面 中下载与开发工具对应的vsdoc文 件。 › 在Visual Studio中使用方法：
html文档：<script type="text/javascript" src="jsapi_vsdoc_v32_2012.js"></script> js文件：/// <reference path=" jsapi_vsdoc_v32_2012.js" />
需要一个Web Server
› IIS、Tomcat……
下载ArcGIS API for JavaScript的Library
› http://support.esrichina.com.cn/2011/0223/960.h
tml
将下载的Library压缩文件中的arcgis_js_api目录 解压到Web Server的目录下
下载ArcGIS API for JavaScript的SDK
› http://support.esrichina.com.cn/2011/0223/9
60.html
将下载的SDK压缩文件里的arcgis_js_api目录 解压到Web Server的目录下。
› IIS：%SystemDrive%\inetpub\wwwroot
› Tomcat的webapps目录下。 › ArcGIS Server 10.1的tomcat在
%AGSSERVER%\framework\runtime\tomcat
完成完成。
在Visual Studio 2012/2010及Apanta中支持 vsdoc智能提示 方法：
Fra Baidu bibliotek
› 从SDK的”API Reference”的” Code Assist
JavaScript 为 HTML 设计师提供了一种编程 工具 JavaScript 可以将动态的文本放入 HTML 页 面 JavaScript 可以对事件作出响应 JavaScript 可以读写 HTML 元素 JavaScript 可被用来验证数据 JavaScript 可被用来检测访问者的浏览器 JavaScript 可被用来创建 cookies
Dojo宽松的使用许可
› Academic Free License & BSD
支持类，及继承。 通过使用dojo.gfx简化在SVG、Canvas和VML 上绘制矢量图形的代码。 Dojo和Dijit易用使用，功能齐全 Dojo支持国际化 其他JavaScript框架能实现的Dojo也可以实现 支持多种客户端、浏览器
› IIS：%SystemDrive%\inetpub\wwwroot › Tomcat的webapps目录下。 › ArcGIS Server 10.1的tomcat在
%AGSSERVER%\framework\runtime\tomcat
修改arcgis_js_api\library\3.2\jsapi目录下的init.js 及再下级目录js\dojo\dojo\dojo.js文件
认识javascript
真实的名称是 ECMAScript，ECMA-262是 正式的JavaScript标准。 JavaScript 被设计用来向 HTML 页面添加交 互行为 JavaScript 是一种脚本语言（脚本语言是一 种轻量级的编程语言） JavaScript 由数行可执行计算机代码组成 JavaScript 通常被直接嵌入 HTML 页面 JavaScript 是一种解释性语言（就是说，代
两种创建方式
› 第一种方式： var obj = new object(); obj.text = “hello world”; obj.id = 1; › 第二种方式： var obj = {
text = “hello world”; id = 1;
}
两种使用方式
ArcGIS API for JavaScript 简介 ArcGIS API for JavaScript 入门
首先发布于ArcGIS 9.3.
调用ArcGIS Server REST API的一组 JavaScript脚本。
基于功能强大的Dojo工具包
快速创建交互式的地图应用
类型转换
› 其它类型到字符串： Boolean,Number,都有toString()方法 Boolean --> String 可能返回字符串"true" 或 "flase"
语句
› if语句：
if(condition) { statement1 } else { statement2 } › do语句 do{ statement
运算符
› 算术运算符：+ 、 - 、* 、 / 、 % 、 -(一元取反) 、
› › › › ›
++ 、 -等同运算符与全同运算符：== 、 ===、 !== 、 !=== 比较运算符：< 、 > 、 <= 、 >= 字符串运算符：：< 、 > 、 <= 、 >= 、 = 、 + 逻辑运算符：&& 、 ||、 !、 赋值运算符：=、 +=、 *=、 -=、 /=
› 将两个文件中的[HOSTNAME_AND_PATH_TO_JSAPI]替换
为<myserver>:<port>/arcgis_js_api/library/3.2/ jsapicompact /， 如果端口号为80则可省略。
OK，至此ArcGIS API for JavaScript安装完成。
› 不能使用关键字
› 以字母开头，可以包含数字和下划线。
代码注释
› 单行注释：//单行注释内容。
› 多行注释：/* 注释内容，可以换行 */
变量定义
› JavaScript弱类型语言 › 以var来定义，比如 var p = 1
主要数据类型
› 数值：整数、浮点数 12,0xA0,12.3 › 逻辑值：布尔值 true、false › 字符串值 “This a Apple”、 转义字符”\t””\,”…… › 空值 null › 未定义值 undefinded。 › 对象 Object
ArcGIS API for JavaScript 安装 JavaScript基础入门 Dojo基础入门 ArcGIS Server Rest API API Content Map & Layer Graphic Infowindow Task
安装配置jsapi
this在函数内部的作用域内有效，指函数本身。
变量的作用域
› 在JavaScript中有全局变量和局部变量。全局变
量是定义在所有函数体之外，其作用范围是整个 函数；而局部变量是定义在函数体之内，只对其 该函数是可见的，而对其它函数则是不可见得。
函数就是一个对象，匿名函数是一个指向函 数对象的指针
› function add(num1,num2){ return num1 + num2; › } › var pAdd = function(num1,num2){ return num1 + num2; › }
使用ArcGIS Server的REST API，可以实现显示、 查询、分析等功能。 调用ArcGIS Server的GP服务，提供专业的分析 结果 可以同时调用多个ArcGIS Server的服务，轻松 实现融合应用。
所有的主流的浏览器均支持JavaScript，无需安 装任何插件
JavaScript是世界最常用的开发语言之一，轻量 级的Web开发脚本语言 纯粹的客户端语言(运行在客户端的浏览器内)， 包括桌面和移动端 有各种成熟的JavaScript框架：Dojo、jQuery、 ExtJS、Prototype、YUI……
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="http://localhost:6080/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" type="text/css" href="http://localhost:6080/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" /> <script type="text/javascript" src="http://localhost:6080/arcgis_js_api/library/3.2/jsapi/init.js"></script> <style type="text/css"> html,body,#mapDiv { width:100%; height:100%; } </style> <script type="text/javascript"> dojo.require("esri.map"); function init() { var myMap = new esri.Map("mapDiv"); var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://lxhpc:6080/arcgis/rest/services/JSApiDemo/MapServer"); myMap.addLayer(myTiledMapServiceLayer); } dojo.addOnLoad(init); </script> </head> <body class="tundra"> <div id="mapDiv"></div> </body> </html>
› 将两个文件中的[HOSTNAME_AND_PATH_TO_JSAPI]替换
为<myserver>:<port>/arcgis_js_api/library/3.2/jsapi/， 如果端口号为80则可省略。
修改arcgis_js_api\library\3.2\jsapicompact目录 下的init.js及再下级目录js\dojo\dojo\dojo.js文件
打开文件C:\Program Files\ArcGIS\Server\framework\runtime \tomcat\webapps\arcgis#rest\WEBINF\classes\resources\restconfig.properties 修改文件中jsapi.arcgis和jsapi.arcgis.css， 将这两个值指向本地部署的离线API的地址。
脚本语言：解释执行，不需要预编译 基于对象的语言：基于对象的语言、也可看 做面向对象的 简单性：量类型是采用弱类型，容易学习 安全性：不能访问本地硬盘、不能存数据到 服务器…… 动态性：事件驱动的方式与用户交互 跨平台性：和系统无关，只要有浏览器
标识符命名
› 变量、函数名、操作符都区分大小写，
语句
› while语句
while(expression) { statement } › for语句 for(var i = 0 ; i < 100;i++) { statement }
语句
› switch语句
switch(variable){ case (condition or value): statement break; case (condition or value) statement break; …… default: statement
Plugins”页面 中下载与开发工具对应的vsdoc文 件。 › 在Visual Studio中使用方法：
html文档：<script type="text/javascript" src="jsapi_vsdoc_v32_2012.js"></script> js文件：/// <reference path=" jsapi_vsdoc_v32_2012.js" />
需要一个Web Server
› IIS、Tomcat……
下载ArcGIS API for JavaScript的Library
› http://support.esrichina.com.cn/2011/0223/960.h
tml
将下载的Library压缩文件中的arcgis_js_api目录 解压到Web Server的目录下
下载ArcGIS API for JavaScript的SDK
› http://support.esrichina.com.cn/2011/0223/9
60.html
将下载的SDK压缩文件里的arcgis_js_api目录 解压到Web Server的目录下。
› IIS：%SystemDrive%\inetpub\wwwroot
› Tomcat的webapps目录下。 › ArcGIS Server 10.1的tomcat在
%AGSSERVER%\framework\runtime\tomcat
完成完成。
在Visual Studio 2012/2010及Apanta中支持 vsdoc智能提示 方法：
Fra Baidu bibliotek
› 从SDK的”API Reference”的” Code Assist
JavaScript 为 HTML 设计师提供了一种编程 工具 JavaScript 可以将动态的文本放入 HTML 页 面 JavaScript 可以对事件作出响应 JavaScript 可以读写 HTML 元素 JavaScript 可被用来验证数据 JavaScript 可被用来检测访问者的浏览器 JavaScript 可被用来创建 cookies
Dojo宽松的使用许可
› Academic Free License & BSD
支持类，及继承。 通过使用dojo.gfx简化在SVG、Canvas和VML 上绘制矢量图形的代码。 Dojo和Dijit易用使用，功能齐全 Dojo支持国际化 其他JavaScript框架能实现的Dojo也可以实现 支持多种客户端、浏览器
› IIS：%SystemDrive%\inetpub\wwwroot › Tomcat的webapps目录下。 › ArcGIS Server 10.1的tomcat在
%AGSSERVER%\framework\runtime\tomcat
修改arcgis_js_api\library\3.2\jsapi目录下的init.js 及再下级目录js\dojo\dojo\dojo.js文件
认识javascript
真实的名称是 ECMAScript，ECMA-262是 正式的JavaScript标准。 JavaScript 被设计用来向 HTML 页面添加交 互行为 JavaScript 是一种脚本语言（脚本语言是一 种轻量级的编程语言） JavaScript 由数行可执行计算机代码组成 JavaScript 通常被直接嵌入 HTML 页面 JavaScript 是一种解释性语言（就是说，代
两种创建方式
› 第一种方式： var obj = new object(); obj.text = “hello world”; obj.id = 1; › 第二种方式： var obj = {
text = “hello world”; id = 1;
}
两种使用方式
ArcGIS API for JavaScript 简介 ArcGIS API for JavaScript 入门
首先发布于ArcGIS 9.3.
调用ArcGIS Server REST API的一组 JavaScript脚本。
基于功能强大的Dojo工具包
快速创建交互式的地图应用
类型转换
› 其它类型到字符串： Boolean,Number,都有toString()方法 Boolean --> String 可能返回字符串"true" 或 "flase"
语句
› if语句：
if(condition) { statement1 } else { statement2 } › do语句 do{ statement
运算符
› 算术运算符：+ 、 - 、* 、 / 、 % 、 -(一元取反) 、
› › › › ›
++ 、 -等同运算符与全同运算符：== 、 ===、 !== 、 !=== 比较运算符：< 、 > 、 <= 、 >= 字符串运算符：：< 、 > 、 <= 、 >= 、 = 、 + 逻辑运算符：&& 、 ||、 !、 赋值运算符：=、 +=、 *=、 -=、 /=
› 将两个文件中的[HOSTNAME_AND_PATH_TO_JSAPI]替换
为<myserver>:<port>/arcgis_js_api/library/3.2/ jsapicompact /， 如果端口号为80则可省略。
OK，至此ArcGIS API for JavaScript安装完成。
› 不能使用关键字
› 以字母开头，可以包含数字和下划线。
代码注释
› 单行注释：//单行注释内容。
› 多行注释：/* 注释内容，可以换行 */
变量定义
› JavaScript弱类型语言 › 以var来定义，比如 var p = 1
主要数据类型
› 数值：整数、浮点数 12,0xA0,12.3 › 逻辑值：布尔值 true、false › 字符串值 “This a Apple”、 转义字符”\t””\,”…… › 空值 null › 未定义值 undefinded。 › 对象 Object
ArcGIS API for JavaScript 安装 JavaScript基础入门 Dojo基础入门 ArcGIS Server Rest API API Content Map & Layer Graphic Infowindow Task
安装配置jsapi
this在函数内部的作用域内有效，指函数本身。
变量的作用域
› 在JavaScript中有全局变量和局部变量。全局变
量是定义在所有函数体之外，其作用范围是整个 函数；而局部变量是定义在函数体之内，只对其 该函数是可见的，而对其它函数则是不可见得。