ArcGISAPIforJavaScript入門最新培訓(xùn)課件(共72張PPT)

ArcGISAPIforJavaScript入門(rùmén)第一頁(yè)，共七十二頁(yè)。目錄(mùlù)ArcGISAPIforJavaScript簡(jiǎn)介ArcGISAPIforJavaScript入門第二頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript簡(jiǎn)介(jiǎnjiè)第三頁(yè)，共七十二頁(yè)。什么(shénme)是ArcGISAPIforJavaScript?首先發(fā)布于ArcGIS9.3.調(diào)用ArcGISServerRESTAPI的一組JavaScript腳本?；诠δ軓?qiáng)大的Dojo工具包第四頁(yè)，共七十二頁(yè)?？梢?kěyǐ)做什么？快速創(chuàng)立交互式的地圖應(yīng)用使用ArcGISServer的RESTAPI，可以實(shí)現(xiàn)顯示、查詢、分析等功能。調(diào)用ArcGISServer的GP效勞，提供專業(yè)的分析結(jié)果可以同時(shí)調(diào)用多個(gè)ArcGISServer的效勞，輕松實(shí)現(xiàn)融合應(yīng)用。第五頁(yè)，共七十二頁(yè)。為什么選擇(xuǎnzé)JavaScript所有的主流的瀏覽器均支持JavaScript，無(wú)需安裝任何插件JavaScript是世界最常用的開(kāi)發(fā)語(yǔ)言之一，輕量級(jí)的Web開(kāi)發(fā)腳本語(yǔ)言純粹的客戶端語(yǔ)言(運(yùn)行在客戶端的瀏覽器內(nèi))，包括桌面和移動(dòng)端有各種成熟的JavaScript框架：Dojo、jQuery、ExtJS、Prototype、YUI……第六頁(yè)，共七十二頁(yè)。為什么使用(shǐyòng)Dojo？Dojo寬松的使用許可AcademicFreeLicense&BSD支持類，及繼承。通過(guò)使用dojo.gfx簡(jiǎn)化在SVG、Canvas和VML上繪制矢量圖形的代碼。Dojo和Dijit易用使用，功能齊全Dojo支持國(guó)際化其他JavaScript框架能實(shí)現(xiàn)的Dojo也可以實(shí)現(xiàn)支持多種客戶端、瀏覽器第七頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript入門(rùmén)第八頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript入門(rùmén)ArcGISAPIforJavaScript安裝JavaScript根底入門Dojo根底入門ArcGISServerRestAPIAPIContentMap&LayerGraphicInfowindowTask第九頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript安裝(ānzhuāng)安裝配置jsapi第十頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript安裝(ānzhuāng)第十一頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript安裝(ānzhuāng)修改arcgis_js_api\library\3.2\jsapi目錄下的init.js及再下級(jí)目錄js\dojo\dojo\dojo.js文件將兩個(gè)文件中的[HOSTNAME_AND_PATH_TO_JSAPI]替換為<myserver>:<port>/arcgis_js_api/library/3.2/jsapi/，如果端口號(hào)為80那么可省略。修改arcgis_js_api\library\3.2\jsapicompact目錄下的init.js及再下級(jí)目錄js\dojo\dojo\dojo.js文件將兩個(gè)文件中的[HOSTNAME_AND_PATH_TO_JSAPI]替換為<myserver>:<port>/arcgis_js_api/library/3.2/jsapicompact/，如果端口號(hào)為80那么可省略。OK，至此ArcGISAPIforJavaScript安裝完成。第十二頁(yè)，共七十二頁(yè)。ArcGISServer10.1離線瀏覽(liúlǎn)翻開(kāi)文件C:\ProgramFiles\ArcGIS\Server\framework\runtime\tomcat\webapps\arcgis#rest\WEB-INF\classes\resources\perties修改文件中jsapi.arcgis和jsapi.arcgis.css，將這兩個(gè)值指向本地部署的離線API的地址。第十三頁(yè)，共七十二頁(yè)。第一個(gè)地圖(dìtú)程序：HelloWorld第十四頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript幫助(bāngzhù)安裝第十五頁(yè)，共七十二頁(yè)。ArcGISAPIforJavaScript智能(zhìnénɡ)提示在VisualStudio2021/2021及Apanta中支持vsdoc智能提示方法：從SDK的〞APIReference〞的〞CodeAssistPlugins〞頁(yè)面中下載與開(kāi)發(fā)工具對(duì)應(yīng)的vsdoc文件。在VisualStudio中使用方法：html文檔：<scripttype="text/javascript"src="jsapi_vsdoc_v32_2021.js"></script>js文件：///<referencepath="jsapi_vsdoc_v32_2021.js"/>在Apanta中使用方法：將vsdoc文件拖拽到apanta的工程中。第十六頁(yè)，共七十二頁(yè)。JavaScript根底(gēndǐ)入門認(rèn)識(shí)javascript第十七頁(yè)，共七十二頁(yè)。認(rèn)識(shí)(rènshi)JavaScript真實(shí)的名稱是ECMAScript，ECMA-262是正式的JavaScript標(biāo)準(zhǔn)。JavaScript被設(shè)計(jì)用來(lái)向HTML頁(yè)面添加交互行為JavaScript是一種腳本語(yǔ)言〔腳本語(yǔ)言是一種輕量級(jí)的編程語(yǔ)言〕JavaScript由數(shù)行可執(zhí)行計(jì)算機(jī)代碼組成JavaScript通常被直接嵌入HTML頁(yè)面JavaScript是一種解釋性語(yǔ)言〔就是說(shuō)，代碼執(zhí)行不進(jìn)行預(yù)編譯〕所有的人無(wú)需購(gòu)置許可證均可使用JavaScript第十八頁(yè)，共七十二頁(yè)。JavaScript能做什么(shénme)？JavaScript為HTML設(shè)計(jì)師提供了一種編程工具JavaScript可以將動(dòng)態(tài)的文本放入HTML頁(yè)面JavaScript可以對(duì)事件作出響應(yīng)JavaScript可以讀寫HTML元素JavaScript可被用來(lái)驗(yàn)證數(shù)據(jù)JavaScript可被用來(lái)檢測(cè)訪問(wèn)者的瀏覽器JavaScript可被用來(lái)創(chuàng)立cookies第十九頁(yè)，共七十二頁(yè)。JavaScript特點(diǎn)(tèdiǎn)腳本語(yǔ)言：解釋執(zhí)行，不需要預(yù)編譯基于對(duì)象的語(yǔ)言：基于對(duì)象的語(yǔ)言、也可看做面向?qū)ο蟮暮?jiǎn)單性：量類型是采用弱類型，容易學(xué)習(xí)平安性：不能訪問(wèn)本地硬盤、不能存數(shù)據(jù)到效勞器……動(dòng)態(tài)性：事件驅(qū)動(dòng)的方式與用戶交互跨平臺(tái)性：和系統(tǒng)無(wú)關(guān)，只要有瀏覽器第二十頁(yè)，共七十二頁(yè)。JavaScript語(yǔ)言(yǔyán)根底標(biāo)識(shí)符命名變量、函數(shù)名、操作符都區(qū)分大小寫，不能使用關(guān)鍵字以字母開(kāi)頭，可以包含數(shù)字和下劃線。代碼注釋單行注釋：//單行注釋內(nèi)容。多行注釋：/*注釋內(nèi)容，可以換行*/變量定義JavaScript弱類型語(yǔ)言以var來(lái)定義，比方varp=1第二十一頁(yè)，共七十二頁(yè)。JavaScript語(yǔ)言(yǔyán)根底主要數(shù)據(jù)類型數(shù)值：整數(shù)、浮點(diǎn)數(shù)12,0xA0,12.3邏輯值：布爾值true、false字符串值“ThisaApple〞、轉(zhuǎn)義字符〞\t〞〞\,〞……空值null未定義值undefinded。對(duì)象Object使用typeof操作符判定類型第二十二頁(yè)，共七十二頁(yè)。JavaScript語(yǔ)言(yǔyán)根底運(yùn)算符算術(shù)運(yùn)算符：+、-、*、/、%、-(一元取反)、++、--等同運(yùn)算符與全同運(yùn)算符：==、===、!==、!===比較運(yùn)算符：<、>、<=、>=字符串運(yùn)算符：：<、>、<=、>=、=、+邏輯運(yùn)算符：&&、||、!、賦值運(yùn)算符：=、+=、*=、-=、/=類型轉(zhuǎn)換其它類型到字符串：Boolean,Number,都有toString()方法Boolean-->String可能返回字符串"true"或"flase"Number-->String字符串轉(zhuǎn)換成數(shù)字:parseInt(字符串)parseFloat(字符串)強(qiáng)制轉(zhuǎn)換:Boolean(value)、Number(value)、String(value)第二十三頁(yè)，共七十二頁(yè)。JavaScript語(yǔ)言(yǔyán)根底語(yǔ)句if語(yǔ)句： if(condition){ statement1 } else{

statement2 }do語(yǔ)句 do{

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

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

switch(variable){ case(conditionorvalue):

statement

break;

case(conditionorvalue)

statement break; ……

default:

statement break; }第二十六頁(yè)，共七十二頁(yè)。object兩種創(chuàng)立方式(fāngshì)第一種方式：varobj=newobject();obj.text=“helloworld〞;obj.id=1;第二種方式：varobj={text=“helloworld〞;id=1;}兩種使用方式alert(obj.text)alert(obj[‘text’]第二十七頁(yè)，共七十二頁(yè)。函數(shù)(hánshù)：function函數(shù)就是一個(gè)對(duì)象，匿名函數(shù)是一個(gè)指向函數(shù)對(duì)象的指針functionadd(num1,num2){returnnum1+num2;}varpAdd=function(num1,num2){returnnum1+num2;}this在函數(shù)內(nèi)部的作用域內(nèi)有效，指函數(shù)本身。第二十八頁(yè)，共七十二頁(yè)。變量、作用域、內(nèi)存(nèicún)問(wèn)題變量的作用域在JavaScript中有全局變量和局部變量。全局變量是定義在所有函數(shù)體之外，其作用范圍是整個(gè)函數(shù)；而局部變量是定義在函數(shù)體之內(nèi)，只對(duì)其該函數(shù)是可見(jiàn)的，而對(duì)其它函數(shù)那么是不可見(jiàn)得。Javascript是沒(méi)有塊級(jí)作用域的簡(jiǎn)單點(diǎn)說(shuō)就是for語(yǔ)句、if語(yǔ)句里面定義的變量，在他們的外面也可以使用。這是和其他語(yǔ)言不一樣的地方。JavaScript具有自動(dòng)垃圾回收機(jī)制當(dāng)性能要求很高時(shí)，建議手動(dòng)給變量賦值null，讓垃圾回收器在下次運(yùn)行時(shí)回收第二十九頁(yè)，共七十二頁(yè)。閉包定義：是指語(yǔ)法域位于某個(gè)特定的區(qū)域，具有持續(xù)參照〔讀寫〕位于該區(qū)域內(nèi)自身范圍之外的執(zhí)行域上的非持久型變量值能力的段落。這些外部執(zhí)行域的非持久型變量神奇地保存它們?cè)陂]包最初定義〔或創(chuàng)立〕時(shí)的值〔深連結(jié)(liánjié)〕。解釋：其實(shí)就是某函數(shù)引用了函數(shù)外的一個(gè)變量，導(dǎo)致該變量的引用次數(shù)的增加，從而延長(zhǎng)了生命周期。也就形成了閉包。例子：functiona(){ varvalue=0; functionb(){ value++; }}第三十頁(yè)，共七十二頁(yè)。閉包應(yīng)用(yìngyòng)場(chǎng)景保護(hù)函數(shù)內(nèi)的變量平安。在內(nèi)存中維持一個(gè)變量。匿名函數(shù)所定義的匿名函數(shù)會(huì)立即執(zhí)行varvariable=(function(parameter){……})(value);用來(lái)與外界隔絕制造一個(gè)似閉包的環(huán)境創(chuàng)立一個(gè)作用域鏈防止變量沖突第三十一頁(yè)，共七十二頁(yè)。dojo根底(gēndǐ)第三十二頁(yè)，共七十二頁(yè)。dojo根底(gēndǐ)加載Dojo模塊dojo.require("esri.map");Dojo初始化事件，在頁(yè)面加載后執(zhí)行程序dojo.addOnLoad(init);dojo.ready(init);Dojo事件dojo.connect(dijit.byId('map'),'resize',function(){});dojo.connect(Map,"onMouseMove",MapMouseMove);functionMapMouseMove(evt){}第三十三頁(yè)，共七十二頁(yè)。dojo根底(gēndǐ)通過(guò)id查找domnodedojo.byId(“#divMap〞)css樣式dojo.getStyle、dojo.setStyleclassdojo.addClass、dojo.hasClass、dojo.removeClassattributedojo.setAttr、dojo.getAttrdom查詢dojo.query第三十四頁(yè)，共七十二頁(yè)。dojo類定義(dìngyì)dojo.declare(“類名〞,[父類及聚合類],{變量、函數(shù)});例子dojo.declare(“Shape〞,null, { _type:〞Shape〞, _name:〞〞, setName:function(name){ this._name=name; }, getName:function(){ returnthis._name; } }}第三十五頁(yè)，共七十二頁(yè)。ArcGISServerRESTAPI功能(gōngnéng)來(lái)自于ArcGISServerRestAPI第三十六頁(yè)，共七十二頁(yè)。RESTREST(RepresentationalStateTransfer表述性狀態(tài)轉(zhuǎn)移)是一種針對(duì)網(wǎng)絡(luò)應(yīng)用的設(shè)計(jì)和開(kāi)發(fā)方式，可以降低開(kāi)發(fā)的復(fù)雜性，提高系統(tǒng)的可伸縮性。REST原那么網(wǎng)絡(luò)上的所有事物(shìwù)都被抽象為資源〔resource〕每個(gè)資源對(duì)應(yīng)一個(gè)唯一的資源標(biāo)識(shí)〔resourceidentifier〕通過(guò)通用的連接器接口〔genericconnectorinterface〕對(duì)資源進(jìn)行操作對(duì)資源的各種操作不會(huì)改變資源標(biāo)識(shí)所有的操作都是無(wú)狀態(tài)的〔stateless〕第三十七頁(yè)，共七十二頁(yè)。ArcGISServerRestAPI所有GIS效勞被暴露為資源接口(jiēkǒu)比方地圖效勞：://localhost/ArcGIS/rest/services/UCData/MapServer一些資源包含操作比方地圖效勞的導(dǎo)出地圖圖像://localhost/ArcGIS/rest/services/UCData/MapServer/export/通過(guò)REST效勞頁(yè)面可以快速把握ArcGISServer的內(nèi)容://<host>:<port>/arcgis/rest/services第三十八頁(yè)，共七十二頁(yè)。APIContent內(nèi)容(nèiróng)第三十九頁(yè)，共七十二頁(yè)。APIContentMapControlSupportforWebmapLayersTiled,Dynamic,FeatureLayer,WMS,WMTS,KML,GraphicsGraphicsTasksGP,Network,Geometry,Query,LocatorGeometrySymbologyArcGISServerSymbologyToolbarsEdit,Draw,Navigation第四十頁(yè)，共七十二頁(yè)。Map&Layer加載顯示(xiǎnshì)地圖第四十一頁(yè)，共七十二頁(yè)。MapControl創(chuàng)立DIV用于顯示地圖<divid="divMap"></div>創(chuàng)立Map對(duì)象varMap=newesri.Map("divMap〞);主要功能圖層管理添加、刪除(shānchú)、遍歷顯示設(shè)置Extent、ArcGISTiledMapServiceLayer相關(guān)、屏幕地圖坐標(biāo)轉(zhuǎn)換……地圖導(dǎo)航居中、漫游、縮放等設(shè)置第四十二頁(yè)，共七十二頁(yè)。ArcGISLayersArcGISTiledMapServiceLayer〔緩存圖層〕通過(guò)使用ArcGISServerRestAPI調(diào)用ArcGISServer的MapServer〔已創(chuàng)立(chuànglì)Cache〕ArcGISDynamicMapServiceLayer〔動(dòng)態(tài)圖層〕通過(guò)使用ArcGISServerRestAPI調(diào)用ArcGISServer的MapServer〔未創(chuàng)立Cache〕。ArcGISImageServiceLayer〔影像圖層〕通過(guò)使用ArcGISServerRestAPI調(diào)用ArcGISServer的ImageServer。FeatureLayer〔要素圖層〕通過(guò)使用ArcGISServerRestAPI調(diào)用ArcGISServer的FeatureService。第四十三頁(yè)，共七十二頁(yè)。OGCLayersWMSLayer調(diào)用OGC〔OpenGeospatialConsortium〕矢量地圖(dìtú)效勞WMTSLayer調(diào)用OGC〔OpenGeospatialConsortium〕地圖切片效勞KMLLayer用于調(diào)用KeyholeMarkupLanguage描述和保存地理信息文件第四十四頁(yè)，共七十二頁(yè)。GraphicsLayer&Graphic客戶端繪制(huìzhì)第四十五頁(yè)，共七十二頁(yè)。GraphicsLayer顯示和管理Graphic對(duì)象(duìxiàng)Map.graphics：缺省的GraphicsLayer，所有圖層的最頂端。創(chuàng)立GraphicsLayer vargraphicsLayer=new esri.layers.GraphicsLayer({opacity:0.20}); map.addLayer(graphicsLayer);第四十六頁(yè)，共七十二頁(yè)。GraphicGraphic：在GraphicsLayer繪制(huìzhì)顯示的圖形對(duì)象。Graphic=Geometry+Attribute+Symbol+Infotemplate。第四十七頁(yè)，共七十二頁(yè)。GraphicGeometry=newesri.geometry.Point116.596664,40.071667,newesri.SpatialReference({wkid:4326}))Symbol=newesri.symbol.PictureMarkerSymbol('/images/Airport.png',16,16);Attribute={Name:〞北京首都機(jī)場(chǎng)〞,City:〞北京〞,Longitude:116.596664,Latitude:40.071667}Infotemplate=newesri.InfoTemplate("${Name}","城市(chéngshì)：${City}<br/>經(jīng)度：${Longitude}<br/>緯度：${Latitude}");第四十八頁(yè)，共七十二頁(yè)。Geometry包含地物坐標(biāo)(zuòbiāo)信息的對(duì)象Point:點(diǎn)Multipoint:點(diǎn)集Extent：矩形Polygon:多邊形Polyline:折線第四十九頁(yè)，共七十二頁(yè)。SymbolPoints:SimpleMarkerSymbol,PictureMarkerSymbolLines:SimpleLineSymbol,artographicLineSymbolPolygonsSimpleFillSymbol,PictureFillSymbolTextTextSymbol,Font第五十頁(yè)，共七十二頁(yè)。Infotemplate用于定義InfoWindow的標(biāo)題和內(nèi)容格式定義格式所用的字符串可包含(bāohán)任何HTML可以使用${Attribute}來(lái)代替值 varinfoTemplate=new esri.InfoTemplate("${Name}","城市：${City}<br/>經(jīng)度

：${Longitude}<br/>緯度：${Latitude}");第五十一頁(yè)，共七十二頁(yè)。Infowindow顯示信息第五十二頁(yè)，共七十二頁(yè)。Infowindow每個(gè)地圖僅有一個(gè)InfoWindowInfoWindow包括(bāokuò)標(biāo)題(Title)和內(nèi)容(Content)InfoWindow可以指定位置顯示如果Graphic定義了InfoTemplate，那么點(diǎn)擊Graphic顯示InfoTemplate所定義的InfoWindow第五十三頁(yè)，共七十二頁(yè)。InfowindowLite使用CSS樣式(yàngshì)定義InfowindowLite外觀。第五十四頁(yè)，共七十二頁(yè)。InfowindowBase繼承InfowindowBase創(chuàng)立自定義Infowindow。需要實(shí)現(xiàn)實(shí)現(xiàn)幾個(gè)方法Hide,show,setContent,setTitle,resize使用(shǐyòng)CSS來(lái)設(shè)置Infowindow的樣式創(chuàng)立實(shí)例后，與普通的Infowindow調(diào)用方法相同第五十五頁(yè)，共七十二頁(yè)。Popup繼承自InfowindowBase，并提供(tígōng)額外的功能瀏覽多項(xiàng)選擇結(jié)果縮放及高亮選擇要素可以最大化第五十六頁(yè)，共七十二頁(yè)。PopupMobile繼承自InfowindowBase，并提供額外的功能瀏覽多項(xiàng)選擇結(jié)果高亮(ɡāoliànɡ)選擇要素可以最大化為小尺寸屏幕設(shè)計(jì),比方移動(dòng)設(shè)備第五十七頁(yè)，共七十二頁(yè)。Task查詢(cháxún)分析第五十八頁(yè)，共七十二頁(yè)。代理(dàilǐ)頁(yè)面設(shè)置管理程序和ArcGISServerServices之間的連接。為什么要設(shè)置Proxy？所創(chuàng)立的請(qǐng)求長(zhǎng)度超過(guò)2048個(gè)字節(jié)。token。要素編輯設(shè)置方法〔以ASP.Net為例〕在proxy.config中添加需要連接的ArcGISServer<serverUrlurl="://60:6080/arcgis/rest/services/"matchAll="true"></serverUrl>在代碼中添加xyUrl="proxy.ashx";第五十九頁(yè)，共七十二頁(yè)。Task的一般調(diào)用(diàoyòng)方法Task.execute(parameters,callback,errorback)parameters：調(diào)用時(shí)的輸入?yún)?shù)callback：回調(diào)函數(shù)errorback：錯(cuò)誤回調(diào)函數(shù)第六十頁(yè)，共