webgis原理與應(yīng)用第9章-arcgis api for javascript開發(fā)_第1頁
webgis原理與應(yīng)用第9章-arcgis api for javascript開發(fā)_第2頁
webgis原理與應(yīng)用第9章-arcgis api for javascript開發(fā)_第3頁
webgis原理與應(yīng)用第9章-arcgis api for javascript開發(fā)_第4頁
webgis原理與應(yīng)用第9章-arcgis api for javascript開發(fā)_第5頁
免費(fèi)預(yù)覽已結(jié)束，剩余104頁可下載查看

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

WebGIS原理與應(yīng)用朱進(jìn)蘇州科技大學(xué)環(huán)境學(xué)院2023年2月23日第9章ArcGISAPIforJavaScript開發(fā)2023/2/23slide2內(nèi)容9.1ArcGISAPIforJavaScript概述9.2ArcGISAPIforJavaScript版的HelloWorld9.3ArcGISAPIforJavaScript部署9.4ArcGISAPIforJavaScript功能概述9.5ArcGISAPIforJavaScript與Dojo的關(guān)系9.6ArcGISAPIforJavaScript開發(fā)原理9.7ArcGISAPIforJavaScript開發(fā)環(huán)境2023/2/23slide39.1ArcGISAPIforJavaScript概述2023/2/23slide4ArcGISServerRESTAPI2023/2/23slide5ArcGISServerRESTAPIAPIhelp:

2023/2/23slide6ArcGISServerRESTAPIMapServer的Export操作2023/2/23slide7ArcGISAPIforJavaScript概述直接調(diào)用RESTAPI比較繁瑣，需要傳輸U(kuò)RL參數(shù)，解析JSON等ArcGISAPIforJavaScript是ArcGISServer9.3新增的一套API通過面向?qū)ο蟮乃枷耄ǚ庋b、繼承等）包裝了RESTAPI，簡化了程序員的工作，為創(chuàng)建WebGIS應(yīng)用提供了輕量級的解決方案除了調(diào)用REST，JSAPI還為客戶端用戶的交互提供了很多功能2023/2/23slide8除了JSAPI，還有SilverlightAPI，F(xiàn)lexAPI，AndroidSDK，iOS

SDK都封裝了RESTAPI，背后的功臣是RESTAPIArcGISAPIforJavaScript概述在客戶端可以利用它來調(diào)用ArcGISServer提供的各種服務(wù)僅僅利用腳本調(diào)用，不需要服務(wù)端編程，降低了開發(fā)門檻目前的版本為3.162023/2/23slide9ArcGISAPIforJavaScript概述在2015年7月份發(fā)布了4.0Beta版本，更好的支持3D

2023/2/23slide10ArcGISAPIforJavaScript概述由于JS的跨平臺性以及不用安裝插件等特點(diǎn)，未來Esri主要支持JSAPISilverlightAPI和FlexAPI已是明日黃花，Esri不更新或者緩慢更新2023/2/23slide119.2ArcGISAPIforJavaScript版的HelloWorld2023/2/23slide12JSAPI版本的HelloWorldStep1-創(chuàng)建基本的HTML頁面2023/2/23slide13JSAPI版本的HelloWorldStep2-在<head>部分添加ESRI的樣式表和引用JS文件其中的CSS文件定義了小部件widgets和組件的樣式3.16是API版本號，當(dāng)發(fā)布新的API時，更新此版本號即可還可以引用Dojo主題的css，其中定義了用戶界面的字體、顏色、大小等2023/2/23slide14JSAPI版本的HelloWorldStep3-加載地圖模塊利用<script>tag加載Dojo的map模塊這里JS直接寫在HTML中，復(fù)雜的項目JS寫在單獨(dú)的JS文件中Dojo的requie()函數(shù)用來加載模塊JSAPI構(gòu)建于Dojo之上2023/2/23slide15JSAPI版本的HelloWorldStep4-確保DOM可用dojo/domReady!用來確保DOM(文檔對象模型，DocumentObjectModel)可用，DOM可用后，函數(shù)才可以運(yùn)行！表示domReady是一個Dojo的AMDloaderplug-inDOM可以以一種獨(dú)立于平臺和語言的方式訪問和修改一個文檔的內(nèi)容和結(jié)構(gòu)。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。2023/2/23slide16JSAPI版本的HelloWorldStep5-創(chuàng)建地圖利用了esri/map模塊里面的Mapclass“mapDiv”是Div的ID{}包括了Map的屬性其它地圖選項2023/2/23slide17JSAPI版本的HelloWorldStep6-定義樣式Map填滿瀏覽器窗口，在<head>tag里面增加2023/2/23slide18JSAPI版本的HelloWorld查看效果直接用瀏覽器打開也可以部署在IIS或者Tomcat服務(wù)器上2023/2/23slide19JSAPI版本的HelloWorld完整HTML文件2023/2/23slide209.3ArcGISAPIforJavaScript部署2023/2/23slide21JSAPI部署部署幫助網(wǎng)站：

離線包的下載jshelp/intro_accessapi.html2023/2/23slide22JSAPI部署部署

注冊ESRI開發(fā)者賬號下載API和SDK2023/2/23slide23JSAPI部署部署方式通過http引用：<scripttype="text/javascript"src=""></script>項目方式部署：<scripttype="text/javascript"src=“l(fā)ibrary/3.16/3.16/init.js"></script>2023/2/23slide24JSAPI部署部署arcgis_js_v316_api/arcgis_js_api/library/3.16/install_win.htmlInstallnotesfortheArcGISAPIforJavaScript兩種build：NormalbuildCompactbuild-移除DojoDijit依賴2023/2/23slide25JSAPI部署部署OpenC:\Inetpub\wwwroot\arcgis_js_api\library\3.16\3.16\init.jsinatexteditorandsearchforthetext'[HOSTNAME_AND_PATH_TO_JSAPI]',andreplacethistextwith"<myserver>/arcgis_js_api/library/3.16/3.16/“C:\Inetpub\wwwroot\arcgis_js_api\library\3.16\3.16\dojo\dojo.js同上處理2023/2/23slide26JSAPI部署部署復(fù)制API和SDK至C:\inetpub\wwwroot\arcgis_js_api安裝并啟動IIS2023/2/23slide27JSAPI部署部署2023/2/23slide28JSAPI部署部署2023/2/23slide29JSAPI部署部署2023/2/23slide30JSAPISDKSDK包含了指南，API參考，Sample代碼等2023/2/23slide31JSAPISDK指南2023/2/23slide32JSAPISDKAPI參考2023/2/23slide33JSAPISDKSample代碼2023/2/23slide34JSAPISDKSample代碼2023/2/23slide35JSAPISDKSample代碼-在sanbox沙箱中運(yùn)行2023/2/23slide36JSAPISDK論壇-Forum2023/2/23slide379.4ArcGISAPIforJavaScript功能概述2023/2/23slide38JSAPI功能概述功能空間數(shù)據(jù)展示：加載地圖服務(wù)，影像服務(wù),,WMS等。客戶端Mashup:將來自不同服務(wù)器、不同類型的服務(wù)在客戶端聚合后統(tǒng)一呈現(xiàn)給客戶。圖形繪制：在地圖上交互式地繪制查詢范圍或地理標(biāo)記等。符號渲染：提供對圖形進(jìn)行符號化，要素生成專題圖和服務(wù)器端渲染等2023/2/23slide39JSAPI功能概述功能查詢檢索：基于屬性和空間位置進(jìn)行查詢等地理處理：調(diào)用ArcGISforServer發(fā)布的地理處理服務(wù)（Geoprocessing服務(wù)），執(zhí)行空間分析網(wǎng)絡(luò)分析：計算最優(yōu)路徑、臨近設(shè)施和服務(wù)區(qū)域。在線編輯：通過要素服務(wù)的圖形、屬性在線編輯2023/2/23slide40JSAPI功能概述功能時態(tài)感知：展示、查詢具有間特征的地圖服務(wù)或影像數(shù)據(jù)。影像處理：提供動態(tài)鑲嵌、實(shí)時柵格函數(shù)處理等功能。地圖輸出：提供多種地圖圖片導(dǎo)出和服務(wù)端打印功能2023/2/23slide419.5ArcGISAPIforJavaScript與Dojo的關(guān)系2023/2/23slide42JSAPI與Dojo的關(guān)系概念JSAPI構(gòu)建于Dojo之上，可以利用Dojo來屏蔽瀏覽器之間的差異2023/2/23slide43JSAPI與Dojo的關(guān)系Dojo隨著Web2.0，Ajax（異步j(luò)avascript和XML）和RIA（RichInternetApplications）的熱潮，出現(xiàn)了各種Ajax開發(fā)工具包，Dojo是其中的一種，其它還有jQuery等Dojo是一個JS的開源DHTML工具包

2023/2/23slide44JSAPI與Dojo的關(guān)系Dojo特性更容易為Web頁面添加動態(tài)能力利用Dojo組件，提升web應(yīng)用的可用性和交互性其包加載機(jī)制和模塊化結(jié)構(gòu)，可以有高擴(kuò)展性，減輕用戶開發(fā)工作量屏蔽browser之間的差異2023/2/23slide45JSAPI與Dojo的關(guān)系Dojo模塊三大模塊：Core、Dijit和DojoXCore提供Ajax、事件、基于CSS的查詢、動畫以及JSON操作API等Dijit是一個可換皮膚，基于模板的Web界面控件庫，包含WidgetDojoX包含一些新穎的代碼和控件，例如DataGrid、Chart、離線應(yīng)用等，還包含一個工具庫(Util)模塊，其中有單元測試框架、從源碼生成文檔的工具，以及JS資源打包及壓縮工具2023/2/23slide46JSAPI與Dojo的關(guān)系Dojo模塊間的關(guān)系2023/2/23slide47JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide48JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide49JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide50JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide51JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide52JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide53JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide54JSAPI與Dojo的關(guān)系Dojo基本函數(shù)2023/2/23slide559.6ArcGISAPIforJavaScript開發(fā)原理2023/2/23slide56JSAPI開發(fā)原理原理JSAPI開發(fā)的程序可以部署到Web服務(wù)器上，如IIS用戶通過browser或移動客戶端進(jìn)行訪問和操作模式1：JSAPI監(jiān)控用戶操作，將用戶的操作按照ArcGSIServer提供的RESTAPI格式轉(zhuǎn)化為HTTP請求，設(shè)置URL參數(shù)，提交給Server，Server收到請求處理后，返回JSON格式結(jié)果給客戶端，JSAPI解析結(jié)果，并展現(xiàn)在browser中模式2：不需要與Server通信，如添加Graphic，測量模式，只在客戶端生成圖形等，只有當(dāng)用戶需要保存這些數(shù)據(jù)時才需要與server通信2023/2/23slide57JSAPI開發(fā)原理原理2023/2/23slide58JSAPI重要對象地圖(Map)Map是承載圖層的容器，主要用于呈現(xiàn)地圖服務(wù)、影像服務(wù)，此外還可展示W(wǎng)MS服務(wù)等。需要HTML頁面中的DIV容器作為根節(jié)點(diǎn)，所有地圖中的子元素都作為DIV容器的子節(jié)點(diǎn)存在。Map中可以包含若干個Layer，一個layer只有被添加到map中才能顯示出來2023/2/23slide59JSAPI重要對象地圖(Map)Map對象初始化后包含一個默認(rèn)的Graphic圖層，可通過map.graphics獲得，可以繪制自定義圖形Map還包含一個現(xiàn)實(shí)要素屬性信息的彈出框InfoWindow，一個map中只能包含一個彈出框，可以按照用戶的定制來顯示某一個要素的屬性信息，甚至是圖片和外部鏈接2023/2/23slide60JSAPI重要對象圖層(Layer)圖層是承載服務(wù)的載體（GraphicLayer除外），ArcGISServer將GIS資源作為服務(wù)發(fā)布出來，要想在browser端看到服務(wù)，就必須將服務(wù)和圖層關(guān)聯(lián)起來，不同的服務(wù)對應(yīng)不同的圖層。2023/2/23slide61JSAPI重要對象圖層(Layer)2023/2/23slide62JSAPI重要對象圖層(Layer)2023/2/23slide63JSAPI重要對象圖層(Layer)后加入的圖層在Map的最上面圖層順序：2023/2/23slide64JSAPI重要對象幾何對象(Geometry)表示對象的顯示形式，可以分為點(diǎn)、多點(diǎn)、線、矩形、多邊形、ScreenPoint等，ScreenPoint以像素的方式表示點(diǎn)。2023/2/23slide65JSAPI重要對象幾何對象(Geometry)2023/2/23slide66JSAPI重要對象符號(Symbol)定義了如何在GraphicLayer上顯示點(diǎn)、線、面和文本，包括圖形的顏色、邊框線寬度、透明度等。每種符號都特定于一種類型（點(diǎn)、線、面和文本）。2023/2/23slide67JSAPI重要對象符號(Symbol)2023/2/23slide68JSAPI重要對象圖形(Graphic)Geometry定義了對象的形狀，Symbol定義了圖形是如何顯示的，Graphic可以包含一些屬性信息，使用InfoTemplate展示屬性。最終的Graphic添加到GraphicLayer中2023/2/23slide69JSAPI重要對象圖形(Graphic)InfoTemplate用于定義InfoWindow的標(biāo)題和內(nèi)容格式TITLE和CONTENT可以包含任何HTML可以使用${Attribute}來獲取graphic中的AttributevarinfoTemplate=newesri.InfoTemplate("${name}","名稱:${name}<br/>經(jīng)度：${x}<br/>緯度：${y}");2023/2/23slide70JSAPI重要對象渲染器(Render)Render是一個以圖層為單位來改變符號的工具，而symbol改變符號是需要逐個設(shè)置的。2023/2/23slide71JSAPI重要對象要素集合(FeatureSet)相當(dāng)于Geodatabase中的要素類，是Feature(要素)的集合FeatureSet中的每個Feature包括Geometry、屬性、symbol和一個InfoTemplate。如果FeatureSet不包含Geometry，只包含屬性，則可以將其看作一個表，其中每個Feature是一個行對象2023/2/23slide72JSAPI重要對象事件(Event)JSAPI是一種事件驅(qū)動的開發(fā)包，其中按照Dojo框架中的事件管理機(jī)制來實(shí)現(xiàn)，針對自定義的對象、控件提供了自定義的事件對象和一套觸發(fā)、回調(diào)的方法事件監(jiān)聽方法：Dojo/_base/connect和on方法，其中on是推薦方法，不過考慮到兼容性，目前還支持Dojo的connect方法，以后可能會取消2023/2/23slide73JSAPI重要對象增加、刪除事件響應(yīng)-On方式增加事件響應(yīng)代碼：VarmyUnload=map.on(“unload”,unloadHandler);刪除事件響應(yīng)代碼：myUnload.remove();2023/2/23slide74JSAPI重要對象增加、刪除事件響應(yīng)-Connect方式增加事件響應(yīng)代碼：VarmyUnload=connect.connect(map,“onUnload”,unloadHandler_connect);刪除事件響應(yīng)代碼：connect.disconnect(myUnload_connect);2023/2/23slide759.7ArcGISAPIforJavaScript開發(fā)環(huán)境2023/2/23slide76開發(fā)環(huán)境2023/2/23slide77開發(fā)環(huán)境SetupaDevelopmentEnvironment

CodeAssistPlugins

2023/2/23slide78開發(fā)環(huán)境-VS2010

2023/2/23slide79開發(fā)環(huán)境-VS2010

2023/2/23slide80開發(fā)環(huán)境-VS2010

2023/2/23slide81開發(fā)環(huán)境-VS2010

2023/2/23slide82開發(fā)環(huán)境-VS2010

2023/2/23slide83開發(fā)環(huán)境-VS2010

2023/2/23slide84開發(fā)環(huán)境調(diào)試工具FirebugFirefox插件

2023/2/23slide85調(diào)試工具Firebug2023/2/23slide86調(diào)試工具Firebug2023/2/23slide87調(diào)試工具Firebug2023/2/23slide88調(diào)試工具Firebug2023/2/23slide89調(diào)試工具Firebug2023/2/23slide90調(diào)試工具Firebug2023/2/23slide91調(diào)試工具Firebug2023/2/23slide92調(diào)試工具Firebug2023/2/23slide93調(diào)試工具Firebug2023/2/23slide94調(diào)試工具Firebug2023/2/23slide95調(diào)試工具Firebug2023/2/23slide96調(diào)試工具Firebug控制臺（Console）是Firebug的第一個面板，也是最重要的面板，主要作用是顯示網(wǎng)頁加載過程中產(chǎn)生各類信息。Firebug內(nèi)置一個console對象，提供5種方法，用來顯示信息。最簡單的方法是console.log()，可以用來取代alert()或document.write()。比如，在網(wǎng)頁腳本中使用console.log("HelloWorld")，加載時控制臺就會自動顯示如下內(nèi)容。2023/2/23slide97調(diào)試工具Firebug2023/2/23slide98調(diào)試工具Firebug根據(jù)信息的不同性質(zhì)，console對象還有4種顯示信息的方法，分別是一般信息()、除錯信息console.debug()、警告提示console.warn()、錯誤提示console.error

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論