ArcGISAPIforJavaScript入門ppt課件

1、ArcGIS API for JavaScript 入門目錄ArcGIS API for JavaScript 簡介ArcGIS API for JavaScript 入門ArcGIS API for JavaScript 簡介什么是ArcGIS API for JavaScript?首先發(fā)布于ArcGIS 9.3.調(diào)用ArcGIS Server REST API的一組JavaScript腳本?；诠δ軓?qiáng)大的Dojo工具包可以做什么？快速創(chuàng)建交互式的地圖運(yùn)用運(yùn)用ArcGIS Server的REST API，可以實現(xiàn)顯示、查詢、分析等功能。調(diào)用ArcGIS Server的GP效力，提供專業(yè)的分析

2、結(jié)果可以同時調(diào)用多個ArcGIS Server的效力，輕松實現(xiàn)交融運(yùn)用。為什么選擇JavaScript 一切的主流的閱讀器均支持JavaScript，無需安裝任何插件JavaScript是世界最常用的開發(fā)言語之一，輕量級的Web開發(fā)腳本言語純粹的客戶端言語(運(yùn)轉(zhuǎn)在客戶端的閱讀器內(nèi))，包括桌面和挪動端有各種成熟的JavaScript框架：Dojo、jQuery、ExtJS、Prototype、YUI為什么運(yùn)用Dojo？Dojo寬松的運(yùn)用答應(yīng) Academic Free License & BSD支持類，及承繼。經(jīng)過運(yùn)用dojo.gfx簡化在SVG、Canvas和VML上繪制矢量圖形的代碼。Doj

3、o和Dijit易用運(yùn)用，功能齊全Dojo支持國際化其他JavaScript框架能實現(xiàn)的Dojo也可以實現(xiàn)支持多種客戶端、閱讀器ArcGIS API for JavaScript 入門ArcGIS API for JavaScript 入門ArcGIS API for JavaScript 安裝JavaScript根底入門Dojo根底入門ArcGIS Server Rest APIAPI ContentMap & LayerGraphicInfowindowTaskArcGIS API for JavaScript 安裝安裝配置jsapiArcGIS API for JavaScript 安裝需

4、求一個Web ServerIIS、Tomcat下載ArcGIS API for JavaScript的Librarysupport.esrichina/2021/0223/960.html將下載的Library緊縮文件中的arcgis_js_api目錄解壓到Web Server的目錄下IIS：%SystemDrive%inetpubwwwrootTomcat的webapps目錄下。ArcGIS Server 10.1的tomcat在%AGSSERVER%frameworkruntimetomcatArcGIS API for JavaScript 安裝修正arcgis_js_apilibrar

5、y3.2jsapi目錄下的init.js及再下級目錄jsdojodojodojo.js文件將兩個文件中的HOSTNAME_AND_PATH_TO_JSAPI交換為:/arcgis_js_api/library/3.2/jsapi/，假設(shè)端口號為80那么可省略。修正arcgis_js_apilibrary3.2jsapicompact目錄下的init.js及再下級目錄jsdojodojodojo.js文件將兩個文件中的HOSTNAME_AND_PATH_TO_JSAPI交換為:/arcgis_js_api/library/3.2/ jsapicompact /， 假設(shè)端口號為80那么可省略。OK

6、，至此ArcGIS API for JavaScript安裝完成。ArcGIS Server 10.1 離線閱讀翻開文件C:Program FilesArcGISServerframeworkruntimetomcatwebappsarcgis#restWEB-INFclassesresourcesperties修正文件中jsapi.arcgis和jsapi.arcgis.css，將這兩個值指向本地部署的離線API的地址。第一個地圖程序：Hello World Hello World html,body,#mapDiv width:100%; height:100%; dojo.require

7、(esri.map); function init() var myMap = new esri.Map(mapDiv); var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(lxh-pc:6080/arcgis/rest/services/JSApiDemo/MapServer); myMap.addLayer(myTiledMapServiceLayer); dojo.addOnLoad(init); ArcGIS API for JavaScript 協(xié)助安裝下載ArcGIS API for Ja

8、vaScript的SDKsupport.esrichina/2021/0223/960.html將下載的SDK緊縮文件里的arcgis_js_api目錄解壓到Web Server的目錄下。IIS：%SystemDrive%inetpubwwwrootTomcat的webapps目錄下。ArcGIS Server 10.1的tomcat在%AGSSERVER%frameworkruntimetomcat完成完成。在閱讀器中翻開協(xié)助地址localhost/arcgis_js_api/sdk/index.html(IIS)ArcGIS API for JavaScript 智能提示在Visual S

9、tudio 2021/2021及Apanta中支持vsdoc智能提示方法：從SDK的API Reference的 Code Assist Plugins頁面 中下載與開發(fā)工具對應(yīng)的vsdoc文件。在Visual Studio中運(yùn)用方法：html文檔：js文件：/ 在Apanta中運(yùn)用方法：將vsdoc文件拖拽到apanta的工程中。JavaScript根底入門認(rèn)識javascript認(rèn)識JavaScript真實的稱號是 ECMAScript，ECMA-262是正式的JavaScript規(guī)范。JavaScript 被設(shè)計用來向 HTML 頁面添加交互行為JavaScript 是一種腳本言語腳本言

10、語是一種輕量級的編程言語JavaScript 由數(shù)行可執(zhí)行計算機(jī)代碼組成JavaScript 通常被直接嵌入 HTML 頁面JavaScript 是一種解釋性言語就是說，代碼執(zhí)行不進(jìn)展預(yù)編譯一切的人無需購買答應(yīng)證均可運(yùn)用 JavaScriptJavaScript能做什么？JavaScript 為 HTML 設(shè)計師提供了一種編程工具JavaScript 可以將動態(tài)的文本放入 HTML 頁面JavaScript 可以對事件作出呼應(yīng)JavaScript 可以讀寫 HTML 元素JavaScript 可被用來驗證數(shù)據(jù)JavaScript 可被用來檢測訪問者的閱讀器JavaScript 可被用來創(chuàng)建 c

11、ookiesJavaScript特點腳本言語：解釋執(zhí)行，不需求預(yù)編譯基于對象的言語：基于對象的言語、也可看做面向?qū)ο蟮暮唵涡裕毫款愋褪遣捎萌躅愋?，容易學(xué)習(xí)平安性：不能訪問本地硬盤、不能存數(shù)據(jù)到效力器動態(tài)性：事件驅(qū)動的方式與用戶交互跨平臺性：和系統(tǒng)無關(guān)，只需有閱讀器JavaScript言語根底標(biāo)識符命名變量、函數(shù)名、操作符都區(qū)分大小寫，不能運(yùn)用關(guān)鍵字以字母開頭，可以包含數(shù)字和下劃線。代碼注釋單行注釋：/單行注釋內(nèi)容。多行注釋：/* 注釋內(nèi)容，可以換行 */變量定義JavaScript弱類型言語以var來定義，比如 var p = 1JavaScript言語根底主要數(shù)據(jù)類型數(shù)值：整數(shù)、浮點數(shù) 12

12、,0 xA0,12.3邏輯值：布爾值true、false字符串值“This a Apple、 本義字符t,空值null未定義值undefinded。對象Object運(yùn)用typeof操作符斷定類型JavaScript言語根底運(yùn)算符算術(shù)運(yùn)算符：+ 、 - 、* 、 / 、 % 、 -(一元取反) 、 + 、 -等同運(yùn)算符與全同運(yùn)算符：= 、 =、 != 、 !=比較運(yùn)算符： 、 =字符串運(yùn)算符： 、 = 、 = 、 +邏輯運(yùn)算符：& 、 |、 !、賦值運(yùn)算符：=、 +=、 *=、 -=、 /=類型轉(zhuǎn)換其它類型到字符串：Boolean,Number,都有toString()方法Boolean - S

13、tring 能夠前往字符串true 或 flaseNumber - String字符串轉(zhuǎn)換成數(shù)字: parseInt(字符串) parseFloat(字符串)強(qiáng)迫轉(zhuǎn)換:Boolean(value)、Number(value)、String(value)JavaScript言語根底語句if語句：if(condition) statement1 else statement2do語句do statementwhile(expression)JavaScript言語根底語句while語句while(expression) statementfor語句for(var i = 0 ; i 100;i+)

14、statementJavaScript言語根底語句switch語句switch(variable)case (condition or value):statementbreak;case (condition or value)statementbreak;default:statementbreak;object兩種創(chuàng)建方式第一種方式：var obj = new object();obj.text = “hello world;obj.id = 1;第二種方式：var obj = text = “hello world;id = 1;兩種運(yùn)用方式alert(obj.text)alert(o

15、bjtext函數(shù)：function函數(shù)就是一個對象，匿名函數(shù)是一個指向函數(shù)對象的指針function add(num1,num2)return num1 + num2;var pAdd = function(num1,num2)return num1 + num2;this在函數(shù)內(nèi)部的作用域內(nèi)有效，指函數(shù)本身。變量、作用域、內(nèi)存問題變量的作用域在JavaScript中有全局變量和部分變量。全局變量是定義在一切函數(shù)體之外，其作用范圍是整個函數(shù)；而部分變量是定義在函數(shù)體之內(nèi)，只對其該函數(shù)是可見的，而對其它函數(shù)那么是不可見得。Javascript是沒有塊級作用域的簡單點說就是for語句、if語句里面

16、定義的變量，在他們的外面也可以運(yùn)用。這是和其他言語不一樣的地方。JavaScript具有自動渣滓回收機(jī)制當(dāng)性能要求很高時，建議手動給變量賦值null，讓渣滓回收器在下次運(yùn)轉(zhuǎn)時回收閉包定義：是指語法域位于某個特定的區(qū)域，具有繼續(xù)參照讀寫位于該區(qū)域內(nèi)本身范圍之外的執(zhí)行域上的非耐久型變量值才干的段落。這些外部執(zhí)行域的非耐久型變量神奇地保管它們在閉包最初定義或創(chuàng)建時的值深連結(jié)。解釋：其實就是某函數(shù)援用了函數(shù)外的一個變量，導(dǎo)致該變量的援用次數(shù)的添加，從而延伸了生命周期。也就構(gòu)成了閉包。例子：function a()var value = 0;function b() value +;閉包運(yùn)用場景維護(hù)函數(shù)

17、內(nèi)的變量平安。在內(nèi)存中維持一個變量。匿名函數(shù)所定義的匿名函數(shù)會立刻執(zhí)行var variable = (function(parameter)(value);用來與外界隔絕 制造一個似閉包的環(huán)境 創(chuàng)建一個作用域鏈 防止變量沖突dojo根底dojo根底加載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,

18、 MapMouseMove);function MapMouseMove(evt) dojo根底經(jīng)過id查找dom nodedojo.byId(“#divMap)css款式dojo.getStyle、dojo.setStyleclassdojo. addClass、dojo.hasClass、dojo. removeClassattributedojo.setAttr、dojo.getAttrdom查詢dojo.querydojo類定義dojo.declare(“類名,父類及聚合類,變量、函數(shù));例子dojo.declare(“Shape,null,_type:Shape,_name:,set

19、Name:function(name)this._name = name;,getName:function()return this._name;ArcGIS Server REST API功能來自于ArcGIS Server Rest APIRESTREST(Representational State Transfer表述性形狀轉(zhuǎn)移)是一種針對網(wǎng)絡(luò)運(yùn)用的設(shè)計和開發(fā)方式，可以降低開發(fā)的復(fù)雜性，提高系統(tǒng)的可伸縮性。REST原那么網(wǎng)絡(luò)上的一切事物都被籠統(tǒng)為資源resource每個資源對應(yīng)一個獨一的資源標(biāo)識resource identifier經(jīng)過通用的銜接器接口generic connecto

20、r interface對資源進(jìn)展操作對資源的各種操作不會改動資源標(biāo)識一切的操作都是無形狀的statelessArcGIS Server Rest API一切GIS效力被暴露為資源接口比如地圖效力：localhost/ArcGIS/rest/services/UCData/MapServer一些資源包含操作比如地圖效力的導(dǎo)出地圖圖像localhost/ArcGIS/rest/services/UCData/MapServer/export/經(jīng)過REST效力頁面可以快速把握ArcGIS Server的內(nèi)容:/arcgis/rest/servicesAPI Content內(nèi)容API ContentM

21、ap ControlSupport for WebmapLayersTiled, Dynamic, FeatureLayer, WMS, WMTS, KML, GraphicsGraphicsTasksGP, Network, Geometry, Query, LocatorGeometrySymbologyArcGIS Server SymbologyToolbarsEdit, Draw, NavigationMap & Layer加載顯示地圖Map Control創(chuàng)建DIV用于顯示地圖創(chuàng)建Map對象var Map=new esri.Map(divMap);主要功能圖層管理添加、刪除、遍歷顯

22、示設(shè)置Extent、 ArcGISTiledMapService Layer相關(guān)、屏幕地圖坐標(biāo)轉(zhuǎn)換地圖導(dǎo)航居中、遨游、縮放等設(shè)置ArcGIS LayersArcGISTiledMapServiceLayer緩存圖層經(jīng)過運(yùn)用ArcGIS Server Rest API調(diào)用ArcGIS Server的MapServer已創(chuàng)建CacheArcGISDynamicMapServiceLayer動態(tài)圖層經(jīng)過運(yùn)用ArcGIS Server Rest API調(diào)用ArcGIS Server的MapServer未創(chuàng)建Cache。ArcGISImageServiceLayer影像圖層經(jīng)過運(yùn)用ArcGIS Serv

23、er Rest API調(diào)用ArcGIS Server的ImageServer。FeatureLayer要素圖層經(jīng)過運(yùn)用ArcGIS Server Rest API調(diào)用ArcGIS Server的FeatureService。OGC LayersWMSLayer調(diào)用OGCOpen Geospatial Consortium矢量地圖效力WMTSLayer調(diào)用OGCOpen Geospatial Consortium地圖切片效力KMLLayer用于調(diào)用Keyhole Markup Language描畫和保管地理信息文件GraphicsLayer & Graphic客戶端繪制GraphicsLayer

24、顯示和管理Graphic對象Map.graphics：缺省的GraphicsLayer，一切圖層的最頂端。創(chuàng)建GraphicsLayervar graphicsLayer = new esri.layers.GraphicsLayer(opacity:0.20);map.addLayer(graphicsLayer);GraphicGraphic：在GraphicsLayer繪制顯示的圖形對象。Graphic=Geometry+Attribute+Symbol+Infotemplate。GraphicGeometry=new esri.geometry.Point116.596664, 40.

25、071667, new esri.SpatialReference( wkid: 4326 )Symbol=new esri.symbol.PictureMarkerSymbol(/images/Airport.png, 16, 16); Attribute= Name:北京首都機(jī)場,City:北京,Longitude:116.596664,Latitude:40.071667Infotemplate=new esri.InfoTemplate($Name,城市：$City經(jīng)度：$Longitude緯度：$Latitude); Geometry包含地物坐標(biāo)信息的對象Point:點Multipo

26、int:點集Extent：矩形Polygon:多邊形Polyline :折線SymbolPoints: SimpleMarkerSymbol, PictureMarkerSymbol Lines: SimpleLineSymbol, artographicLineSymbol PolygonsSimpleFillSymbol, PictureFillSymbol Text TextSymbol, FontInfotemplate用于定義InfoWindow的標(biāo)題和內(nèi)容格式定義格式所用的字符串可包含任何HTML可以運(yùn)用$Attribute來替代值var infoTemplate = new es

27、ri.InfoTemplate($Name,城市：$City經(jīng)度：$Longitude緯度：$Latitude); Infowindow顯示信息Infowindow每個地圖僅有一個InfoWindowInfoWindow包括標(biāo)題(Title)和內(nèi)容(Content)InfoWindow可以指定位置顯示假設(shè)Graphic定義了InfoTemplate，那么點擊Graphic顯示InfoTemplate所定義的InfoWindowInfowindow Lite運(yùn)用CSS款式定義Infowindow Lite外觀。InfowindowBase承繼InfowindowBase創(chuàng)建自定義Infowindow。需求實現(xiàn)實現(xiàn)幾個方法Hide, show, setContent, setTitle, resize運(yùn)用CSS來設(shè)置Infowindow的款式創(chuàng)建實例后，與普通的Infowindow調(diào)用方法一樣Popup承繼自InfowindowBase，并提供額外的功能閱讀多項選擇結(jié)果縮放及高亮選擇要素可以最大化PopupMobile承繼自InfowindowBase，并提供額外的功能閱讀