ArcGISAPIforJavaScript入门最新培训课件(共72张PPT)

ArcGISAPIforJavaScript入门(rùmén)第一页，共七十二页。目录(mùlù)ArcGISAPIforJavaScript简介ArcGISAPIforJavaScript入门第二页，共七十二页。ArcGISAPIforJavaScript简介(jiǎnjiè)第三页，共七十二页。什么(shénme)是ArcGISAPIforJavaScript?首先发布于ArcGIS9.3.调用ArcGISServerRESTAPI的一组JavaScript脚本。基于功能强大的Dojo工具包第四页，共七十二页。可以(kěyǐ)做什么？快速创立交互式的地图应用使用ArcGISServer的RESTAPI，可以实现显示、查询、分析等功能。调用ArcGISServer的GP效劳，提供专业的分析结果可以同时调用多个ArcGISServer的效劳，轻松实现融合应用。第五页，共七十二页。为什么选择(xuǎnzé)JavaScript所有的主流的浏览器均支持JavaScript，无需安装任何插件JavaScript是世界最常用的开发语言之一，轻量级的Web开发脚本语言纯粹的客户端语言(运行在客户端的浏览器内)，包括桌面和移动端有各种成熟的JavaScript框架：Dojo、jQuery、ExtJS、Prototype、YUI……第六页，共七十二页。为什么使用(shǐyòng)Dojo？Dojo宽松的使用许可AcademicFreeLicense&BSD支持类，及继承。通过使用dojo.gfx简化在SVG、Canvas和VML上绘制矢量图形的代码。Dojo和Dijit易用使用，功能齐全Dojo支持国际化其他JavaScript框架能实现的Dojo也可以实现支持多种客户端、浏览器第七页，共七十二页。ArcGISAPIforJavaScript入门(rùmén)第八页，共七十二页。ArcGISAPIforJavaScript入门(rùmén)ArcGISAPIforJavaScript安装JavaScript根底入门Dojo根底入门ArcGISServerRestAPIAPIContentMap&LayerGraphicInfowindowTask第九页，共七十二页。ArcGISAPIforJavaScript安装(ānzhuāng)安装配置jsapi第十页，共七十二页。ArcGISAPIforJavaScript安装(ānzhuāng)第十一页，共七十二页。ArcGISAPIforJavaScript安装(ānzhuāng)修改arcgis_js_api\library\3.2\jsapi目录下的init.js及再下级目录js\dojo\dojo\dojo.js文件将两个文件中的[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文件将两个文件中的[HOSTNAME_AND_PATH_TO_JSAPI]替换为<myserver>:<port>/arcgis_js_api/library/3.2/jsapicompact/，如果端口号为80那么可省略。OK，至此ArcGISAPIforJavaScript安装完成。第十二页，共七十二页。ArcGISServer10.1离线浏览(liúlǎn)翻开文件C:\ProgramFiles\ArcGIS\Server\framework\runtime\tomcat\webapps\arcgis#rest\WEB-INF\classes\resources\perties修改文件中jsapi.arcgis和jsapi.arcgis.css，将这两个值指向本地部署的离线API的地址。第十三页，共七十二页。第一个地图(dìtú)程序：HelloWorld第十四页，共七十二页。ArcGISAPIforJavaScript帮助(bāngzhù)安装第十五页，共七十二页。ArcGISAPIforJavaScript智能(zhìnénɡ)提示在VisualStudio2021/2021及Apanta中支持vsdoc智能提示方法：从SDK的〞APIReference〞的〞CodeAssistPlugins〞页面中下载与开发工具对应的vsdoc文件。在VisualStudio中使用方法：html文档：<scripttype="text/javascript"src="jsapi_vsdoc_v32_2021.js"></script>js文件：///<referencepath="jsapi_vsdoc_v32_2021.js"/>在Apanta中使用方法：将vsdoc文件拖拽到apanta的工程中。第十六页，共七十二页。JavaScript根底(gēndǐ)入门认识javascript第十七页，共七十二页。认识(rènshi)JavaScript真实的名称是ECMAScript，ECMA-262是正式的JavaScript标准。JavaScript被设计用来向HTML页面添加交互行为JavaScript是一种脚本语言〔脚本语言是一种轻量级的编程语言〕JavaScript由数行可执行计算机代码组成JavaScript通常被直接嵌入HTML页面JavaScript是一种解释性语言〔就是说，代码执行不进行预编译〕所有的人无需购置许可证均可使用JavaScript第十八页，共七十二页。JavaScript能做什么(shénme)？JavaScript为HTML设计师提供了一种编程工具JavaScript可以将动态的文本放入HTML页面JavaScript可以对事件作出响应JavaScript可以读写HTML元素JavaScript可被用来验证数据JavaScript可被用来检测访问者的浏览器JavaScript可被用来创立cookies第十九页，共七十二页。JavaScript特点(tèdiǎn)脚本语言：解释执行，不需要预编译基于对象的语言：基于对象的语言、也可看做面向对象的简单性：量类型是采用弱类型，容易学习平安性：不能访问本地硬盘、不能存数据到效劳器……动态性：事件驱动的方式与用户交互跨平台性：和系统无关，只要有浏览器第二十页，共七十二页。JavaScript语言(yǔyán)根底标识符命名变量、函数名、操作符都区分大小写，不能使用关键字以字母开头，可以包含数字和下划线。代码注释单行注释：//单行注释内容。多行注释：/*注释内容，可以换行*/变量定义JavaScript弱类型语言以var来定义，比方varp=1第二十一页，共七十二页。JavaScript语言(yǔyán)根底主要数据类型数值：整数、浮点数12,0xA0,12.3逻辑值：布尔值true、false字符串值“ThisaApple〞、转义字符〞\t〞〞\,〞……空值null未定义值undefinded。对象Object使用typeof操作符判定类型第二十二页，共七十二页。JavaScript语言(yǔyán)根底运算符算术运算符：+、-、*、/、%、-(一元取反)、++、--等同运算符与全同运算符：==、===、!==、!===比较运算符：<、>、<=、>=字符串运算符：：<、>、<=、>=、=、+逻辑运算符：&&、||、!、赋值运算符：=、+=、*=、-=、/=类型转换其它类型到字符串：Boolean,Number,都有toString()方法Boolean-->String可能返回字符串"true"或"flase"Number-->String字符串转换成数字:parseInt(字符串)parseFloat(字符串)强制转换:Boolean(value)、Number(value)、String(value)第二十三页，共七十二页。JavaScript语言(yǔyán)根底语句if语句： if(condition){ statement1 } else{

statement2 }do语句 do{

statement }while(expression)第二十四页，共七十二页。JavaScript语言(yǔyán)根底语句while语句 while(expression){

statement }for语句 for(vari=0;i<100;i++) { statement }第二十五页，共七十二页。JavaScript语言(yǔyán)根底语句switch语句

switch(variable){ case(conditionorvalue):

statement

break;

case(conditionorvalue)

statement break; ……

default:

statement break; }第二十六页，共七十二页。object两种创立方式(fāngshì)第一种方式：varobj=newobject();obj.text=“helloworld〞;obj.id=1;第二种方式：varobj={text=“helloworld〞;id=1;}两种使用方式alert(obj.text)alert(obj[‘text’]第二十七页，共七十二页。函数(hánshù)：function函数就是一个对象，匿名函数是一个指向函数对象的指针functionadd(num1,num2){returnnum1+num2;}varpAdd=function(num1,num2){returnnum1+num2;}this在函数内部的作用域内有效，指函数本身。第二十八页，共七十二页。变量、作用域、内存(nèicún)问题变量的作用域在JavaScript中有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数那么是不可见得。Javascript是没有块级作用域的简单点说就是for语句、if语句里面定义的变量，在他们的外面也可以使用。这是和其他语言不一样的地方。JavaScript具有自动垃圾回收机制当性能要求很高时，建议手动给变量赋值null，让垃圾回收器在下次运行时回收第二十九页，共七十二页。闭包定义：是指语法域位于某个特定的区域，具有持续参照〔读写〕位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保存它们在闭包最初定义〔或创立〕时的值〔深连结(liánjié)〕。解释：其实就是某函数引用了函数外的一个变量，导致该变量的引用次数的增加，从而延长了生命周期。也就形成了闭包。例子：functiona(){ varvalue=0; functionb(){ value++; }}第三十页，共七十二页。闭包应用(yìngyòng)场景保护函数内的变量平安。在内存中维持一个变量。匿名函数所定义的匿名函数会立即执行varvariable=(function(parameter){……})(value);用来与外界隔绝制造一个似闭包的环境创立一个作用域链防止变量冲突第三十一页，共七十二页。dojo根底(gēndǐ)第三十二页，共七十二页。dojo根底(gēndǐ)加载Dojo模块dojo.require("esri.map");Dojo初始化事件，在页面加载后执行程序dojo.addOnLoad(init);dojo.ready(init);Dojo事件dojo.connect(dijit.byId('map'),'resize',function(){});dojo.connect(Map,"onMouseMove",MapMouseMove);functionMapMouseMove(evt){}第三十三页，共七十二页。dojo根底(gēndǐ)通过id查找domnodedojo.byId(“#divMap〞)css样式dojo.getStyle、dojo.setStyleclassdojo.addClass、dojo.hasClass、dojo.removeClassattributedojo.setAttr、dojo.getAttrdom查询dojo.query第三十四页，共七十二页。dojo类定义(dìngyì)dojo.declare(“类名〞,[父类及聚合类],{变量、函数});例子dojo.declare(“Shape〞,null, { _type:〞Shape〞, _name:〞〞, setName:function(name){ this._name=name; }, getName:function(){ returnthis._name; } }}第三十五页，共七十二页。ArcGISServerRESTAPI功能(gōngnéng)来自于ArcGISServerRestAPI第三十六页，共七十二页。RESTREST(RepresentationalStateTransfer表述性状态转移)是一种针对网络应用的设计和开发方式，可以降低开发的复杂性，提高系统的可伸缩性。REST原那么网络上的所有事物(shìwù)都被抽象为资源〔resource〕每个资源对应一个唯一的资源标识〔resourceidentifier〕通过通用的连接器接口〔genericconnectorinterface〕对资源进行操作对资源的各种操作不会改变资源标识所有的操作都是无状态的〔stateless〕第三十七页，共七十二页。ArcGISServerRestAPI所有GIS效劳被暴露为资源接口(jiēkǒu)比方地图效劳：://localhost/ArcGIS/rest/services/UCData/MapServer一些资源包含操作比方地图效劳的导出地图图像://localhost/ArcGIS/rest/services/UCData/MapServer/export/通过REST效劳页面可以快速把握ArcGISServer的内容://<host>:<port>/arcgis/rest/services第三十八页，共七十二页。APIContent内容(nèiróng)第三十九页，共七十二页。APIContentMapControlSupportforWebmapLayersTiled,Dynamic,FeatureLayer,WMS,WMTS,KML,GraphicsGraphicsTasksGP,Network,Geometry,Query,LocatorGeometrySymbologyArcGISServerSymbologyToolbarsEdit,Draw,Navigation第四十页，共七十二页。Map&Layer加载显示(xiǎnshì)地图第四十一页，共七十二页。MapControl创立DIV用于显示地图<divid="divMap"></div>创立Map对象varMap=newesri.Map("divMap〞);主要功能图层管理添加、删除(shānchú)、遍历显示设置Extent、ArcGISTiledMapServiceLayer相关、屏幕地图坐标转换……地图导航居中、漫游、缩放等设置第四十二页，共七十二页。ArcGISLayersArcGISTiledMapServiceLayer〔缓存图层〕通过使用ArcGISServerRestAPI调用ArcGISServer的MapServer〔已创立(chuànglì)Cache〕ArcGISDynamicMapServiceLayer〔动态图层〕通过使用ArcGISServerRestAPI调用ArcGISServer的MapServer〔未创立Cache〕。ArcGISImageServiceLayer〔影像图层〕通过使用ArcGISServerRestAPI调用ArcGISServer的ImageServer。FeatureLayer〔要素图层〕通过使用ArcGISServerRestAPI调用ArcGISServer的FeatureService。第四十三页，共七十二页。OGCLayersWMSLayer调用OGC〔OpenGeospatialConsortium〕矢量地图(dìtú)效劳WMTSLayer调用OGC〔OpenGeospatialConsortium〕地图切片效劳KMLLayer用于调用KeyholeMarkupLanguage描述和保存地理信息文件第四十四页，共七十二页。GraphicsLayer&Graphic客户端绘制(huìzhì)第四十五页，共七十二页。GraphicsLayer显示和管理Graphic对象(duìxiàng)Map.graphics：缺省的GraphicsLayer，所有图层的最顶端。创立GraphicsLayer vargraphicsLayer=new esri.layers.GraphicsLayer({opacity:0.20}); map.addLayer(graphicsLayer);第四十六页，共七十二页。GraphicGraphic：在GraphicsLayer绘制(huìzhì)显示的图形对象。Graphic=Geometry+Attribute+Symbol+Infotemplate。第四十七页，共七十二页。GraphicGeometry=newesri.geometry.Point116.596664,40.071667,newesri.SpatialReference({wkid:4326}))Symbol=newesri.symbol.PictureMarkerSymbol('/images/Airport.png',16,16);Attribute={Name:〞北京首都机场〞,City:〞北京〞,Longitude:116.596664,Latitude:40.071667}Infotemplate=newesri.InfoTemplate("${Name}","城市(chéngshì)：${City}<br/>经度：${Longitude}<br/>纬度：${Latitude}");第四十八页，共七十二页。Geometry包含地物坐标(zuòbiāo)信息的对象Point:点Multipoint:点集Extent：矩形Polygon:多边形Polyline:折线第四十九页，共七十二页。SymbolPoints:SimpleMarkerSymbol,PictureMarkerSymbolLines:SimpleLineSymbol,artographicLineSymbolPolygonsSimpleFillSymbol,PictureFillSymbolTextTextSymbol,Font第五十页，共七十二页。Infotemplate用于定义InfoWindow的标题和内容格式定义格式所用的字符串可包含(bāohán)任何HTML可以使用${Attribute}来代替值 varinfoTemplate=new esri.InfoTemplate("${Name}","城市：${City}<br/>经度

：${Longitude}<br/>纬度：${Latitude}");第五十一页，共七十二页。Infowindow显示信息第五十二页，共七十二页。Infowindow每个地图仅有一个InfoWindowInfoWindow包括(bāokuò)标题(Title)和内容(Content)InfoWindow可以指定位置显示如果Graphic定义了InfoTemplate，那么点击Graphic显示InfoTemplate所定义的InfoWindow第五十三页，共七十二页。InfowindowLite使用CSS样式(yàngshì)定义InfowindowLite外观。第五十四页，共七十二页。InfowindowBase继承InfowindowBase创立自定义Infowindow。需要实现实现几个方法Hide,show,setContent,setTitle,resize使用(shǐyòng)CSS来设置Infowindow的样式创立实例后，与普通的Infowindow调用方法相同第五十五页，共七十二页。Popup继承自InfowindowBase，并提供(tígōng)额外的功能浏览多项选择结果缩放及高亮选择要素可以最大化第五十六页，共七十二页。PopupMobile继承自InfowindowBase，并提供额外的功能浏览多项选择结果高亮(ɡāoliànɡ)选择要素可以最大化为小尺寸屏幕设计,比方移动设备第五十七页，共七十二页。Task查询(cháxún)分析第五十八页，共七十二页。代理(dàilǐ)页面设置管理程序和ArcGISServerServices之间的连接。为什么要设置Proxy？所创立的请求长度超过2048个字节。token。要素编辑设置方法〔以ASP.Net为例〕在proxy.config中添加需要连接的ArcGISServer<serverUrlurl="://60:6080/arcgis/rest/services/"matchAll="true"></serverUrl>在代码中添加xyUrl="proxy.ashx";第五十九页，共七十二页。Task的一般调用(diàoyòng)方法Task.execute(parameters,callback,errorback)parameters：调用时的输入参数callback：回调函数errorback：错误回调函数第六十页，共