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

ArcGISAPIforJavaScript入門(rùmén)第一頁，共七十二頁。目錄(mùlù)ArcGISAPIforJavaScript簡介ArcGISAPIforJavaScript入門第二頁，共七十二頁。ArcGISAPIforJavaScript簡介(jiǎnjiè)第三頁，共七十二頁。什么(shénme)是ArcGISAPIforJavaScript?首先發(fā)布于ArcGIS9.3.調(diào)用ArcGISServerRESTAPI的一組JavaScript腳本?；诠δ軓姶蟮腄ojo工具包第四頁，共七十二頁?？梢?kěyǐ)做什么？快速創(chuàng)立交互式的地圖應用使用ArcGISServer的RESTAPI，可以實現(xiàn)顯示、查詢、分析等功能。調(diào)用ArcGISServer的GP效勞，提供專業(yè)的分析結果可以同時調(diào)用多個ArcGISServer的效勞，輕松實現(xiàn)融合應用。第五頁，共七十二頁。為什么選擇(xuǎnzé)JavaScript所有的主流的瀏覽器均支持JavaScript，無需安裝任何插件JavaScript是世界最常用的開發(fā)語言之一，輕量級的Web開發(fā)腳本語言純粹的客戶端語言(運行在客戶端的瀏覽器內(nèi))，包括桌面和移動端有各種成熟的JavaScript框架：Dojo、jQuery、ExtJS、Prototype、YUI……第六頁，共七十二頁。為什么使用(shǐyòng)Dojo？Dojo寬松的使用許可AcademicFreeLicense&BSD支持類，及繼承。通過使用dojo.gfx簡化在SVG、Canvas和VML上繪制矢量圖形的代碼。Dojo和Dijit易用使用，功能齊全Dojo支持國際化其他JavaScript框架能實現(xiàn)的Dojo也可以實現(xiàn)支持多種客戶端、瀏覽器第七頁，共七十二頁。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〞頁面中下載與開發(fā)工具對應的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由數(shù)行可執(zhí)行計算機代碼組成JavaScript通常被直接嵌入HTML頁面JavaScript是一種解釋性語言〔就是說，代碼執(zhí)行不進行預編譯〕所有的人無需購置許可證均可使用JavaScript第十八頁，共七十二頁。JavaScript能做什么(shénme)？JavaScript為HTML設計師提供了一種編程工具JavaScript可以將動態(tài)的文本放入HTML頁面JavaScript可以對事件作出響應JavaScript可以讀寫HTML元素JavaScript可被用來驗證數(shù)據(jù)JavaScript可被用來檢測訪問者的瀏覽器JavaScript可被用來創(chuàng)立cookies第十九頁，共七十二頁。JavaScript特點(tèdiǎn)腳本語言：解釋執(zhí)行，不需要預編譯基于對象的語言：基于對象的語言、也可看做面向對象的簡單性：量類型是采用弱類型，容易學習平安性：不能訪問本地硬盤、不能存數(shù)據(jù)到效勞器……動態(tài)性：事件驅動的方式與用戶交互跨平臺性：和系統(tǒng)無關，只要有瀏覽器第二十頁，共七十二頁。JavaScript語言(yǔyán)根底標識符命名變量、函數(shù)名、操作符都區(qū)分大小寫，不能使用關鍵字以字母開頭，可以包含數(shù)字和下劃線。代碼注釋單行注釋：//單行注釋內(nèi)容。多行注釋：/*注釋內(nèi)容，可以換行*/變量定義JavaScript弱類型語言以var來定義，比方varp=1第二十一頁，共七十二頁。JavaScript語言(yǔyán)根底主要數(shù)據(jù)類型數(shù)值：整數(shù)、浮點數(shù)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字符串轉換成數(shù)字: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兩種創(chuàng)立方式(fāngshì)第一種方式：varobj=newobject();obj.text=“helloworld〞;obj.id=1;第二種方式：varobj={text=“helloworld〞;id=1;}兩種使用方式alert(obj.text)alert(obj[‘text’]第二十七頁，共七十二頁。函數(shù)(hánshù)：function函數(shù)就是一個對象，匿名函數(shù)是一個指向函數(shù)對象的指針functionadd(num1,num2){returnnum1+num2;}varpAdd=function(num1,num2){returnnum1+num2;}this在函數(shù)內(nèi)部的作用域內(nèi)有效，指函數(shù)本身。第二十八頁，共七十二頁。變量、作用域、內(nèi)存(nèicún)問題變量的作用域在JavaScript中有全局變量和局部變量。全局變量是定義在所有函數(shù)體之外，其作用范圍是整個函數(shù)；而局部變量是定義在函數(shù)體之內(nèi)，只對其該函數(shù)是可見的，而對其它函數(shù)那么是不可見得。Javascript是沒有塊級作用域的簡單點說就是for語句、if語句里面定義的變量，在他們的外面也可以使用。這是和其他語言不一樣的地方。JavaScript具有自動垃圾回收機制當性能要求很高時，建議手動給變量賦值null，讓垃圾回收器在下次運行時回收第二十九頁，共七十二頁。閉包定義：是指語法域位于某個特定的區(qū)域，具有持續(xù)參照〔讀寫〕位于該區(qū)域內(nèi)自身范圍之外的執(zhí)行域上的非持久型變量值能力的段落。這些外部執(zhí)行域的非持久型變量神奇地保存它們在閉包最初定義〔或創(chuàng)立〕時的值〔深連結(liánjié)〕。解釋：其實就是某函數(shù)引用了函數(shù)外的一個變量，導致該變量的引用次數(shù)的增加，從而延長了生命周期。也就形成了閉包。例子：functiona(){ varvalue=0; functionb(){ value++; }}第三十頁，共七十二頁。閉包應用(yìngyòng)場景保護函數(shù)內(nèi)的變量平安。在內(nèi)存中維持一個變量。匿名函數(shù)所定義的匿名函數(shù)會立即執(zhí)行varvariable=(function(parameter){……})(value);用來與外界隔絕制造一個似閉包的環(huán)境創(chuàng)立一個作用域鏈防止變量沖突第三十一頁，共七十二頁。dojo根底(gēndǐ)第三十二頁，共七十二頁。dojo根底(gēndǐ)加載Dojo模塊dojo.require("esri.map");Dojo初始化事件，在頁面加載后執(zhí)行程序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(“類名〞,[父類及聚合類],{變量、函數(shù)});例子dojo.declare(“Shape〞,null, { _type:〞Shape〞, _name:〞〞, setName:function(name){ this._name=name; }, getName:function(){ returnthis._name; } }}第三十五頁，共七十二頁。ArcGISServerRESTAPI功能(gōngnéng)來自于ArcGISServerRestAPI第三十六頁，共七十二頁。RESTREST(RepresentationalStateTransfer表述性狀態(tài)轉移)是一種針對網(wǎng)絡應用的設計和開發(fā)方式，可以降低開發(fā)的復雜性，提高系統(tǒng)的可伸縮性。REST原那么網(wǎng)絡上的所有事物(shìwù)都被抽象為資源〔resource〕每個資源對應一個唯一的資源標識〔resourceidentifier〕通過通用的連接器接口〔genericconnectorinterface〕對資源進行操作對資源的各種操作不會改變資源標識所有的操作都是無狀態(tài)的〔stateless〕第三十七頁，共七十二頁。ArcGISServerRestAPI所有GIS效勞被暴露為資源接口(jiēkǒu)比方地圖效勞：://localhost/ArcGIS/rest/services/UCData/MapServer一些資源包含操作比方地圖效勞的導出地圖圖像://localhost/ArcGIS/rest/services/UCData/MapServer/export/通過REST效勞頁面可以快速把握ArcGISServer的內(nèi)容://<host>:<port>/arcgis/rest/services第三十八頁，共七十二頁。APIContent內(nèi)容(nèiróng)第三十九頁，共七十二頁。APIContentMapControlSupportforWebmapLayersTiled,Dynamic,FeatureLayer,WMS,WMTS,KML,GraphicsGraphicsTasksGP,Network,Geometry,Query,LocatorGeometrySymbologyArcGISServerSymbologyToolbarsEdit,Draw,Navigation第四十頁，共七十二頁。Map&Layer加載顯示(xiǎnshì)地圖第四十一頁，共七十二頁。MapControl創(chuàng)立DIV用于顯示地圖<divid="divMap"></div>創(chuàng)立Map對象varMap=newesri.Map("divMap〞);主要功能圖層管理添加、刪除(shānchú)、遍歷顯示設置Extent、ArcGISTiledMapServiceLayer相關、屏幕地圖坐標轉換……地圖導航居中、漫游、縮放等設置第四十二頁，共七十二頁。ArcGISLayersArcGISTiledMapServiceLayer〔緩存圖層〕通過使用ArcGISServerRestAPI調(diào)用ArcGISServer的MapServer〔已創(chuàng)立(chuànglì)Cache〕ArcGISDynamicMapServiceLayer〔動態(tài)圖層〕通過使用ArcGISServerRestAPI調(diào)用ArcGISServer的MapServer〔未創(chuàng)立Cache〕。ArcGISImageServiceLayer〔影像圖層〕通過使用ArcGISServerRestAPI調(diào)用ArcGISServer的ImageServer。FeatureLayer〔要素圖層〕通過使用ArcGISServerRestAPI調(diào)用ArcGISServer的FeatureService。第四十三頁，共七十二頁。OGCLayersWMSLayer調(diào)用OGC〔OpenGeospatialConsortium〕矢量地圖(dìtú)效勞WMTSLayer調(diào)用OGC〔OpenGeospatialConsortium〕地圖切片效勞KMLLayer用于調(diào)用KeyholeMarkupLanguage描述和保存地理信息文件第四十四頁，共七十二頁。GraphicsLayer&Graphic客戶端繪制(huìzhì)第四十五頁，共七十二頁。GraphicsLayer顯示和管理Graphic對象(duìxiàng)Map.graphics：缺省的GraphicsLayer，所有圖層的最頂端。創(chuàng)立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/>經(jīng)度：${Longitude}<br/>緯度：${Latitude}");第四十八頁，共七十二頁。Geometry包含地物坐標(zuòbiāo)信息的對象Point:點Multipoint:點集Extent：矩形Polygon:多邊形Polyline:折線第四十九頁，共七十二頁。SymbolPoints:SimpleMarkerSymbol,PictureMarkerSymbolLines:SimpleLineSymbol,artographicLineSymbolPolygonsSimpleFillSymbol,PictureFillSymbolTextTextSymbol,Font第五十頁，共七十二頁。Infotemplate用于定義InfoWindow的標題和內(nèi)容格式定義格式所用的字符串可包含(bāohán)任何HTML可以使用${Attribute}來代替值 varinfoTemplate=new esri.InfoTemplate("${Name}","城市：${City}<br/>經(jīng)度

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