桌面和服務(wù)器初稿開發(fā)教程v1

1、本章主要介紹SuperMap iServer以客戶端開發(fā)工具包SuperMap iClient for JavaScript的主要特點(diǎn)，以及進(jìn)行客戶端開發(fā)需要的基本知識。12SuperMap iServer 是超圖軟件開發(fā)的一款服務(wù)式GIS開發(fā)平臺，SuperMap iServer 是基于跨平臺GIS 內(nèi)核的GIS 應(yīng)用服務(wù)器，該通過服務(wù)的方式，面向網(wǎng)絡(luò)客戶端提供與專業(yè)GIS 桌面相同功能的GIS 服務(wù)；能夠管理、發(fā)布和無縫聚合多源服務(wù)，包括 REST 服務(wù)、OGC 服務(wù)（WMS、WMTS、WFS、WCS、WPS、CSW）等；支持多種類型客戶端；支持分布式環(huán)境下的數(shù)據(jù)管理、編輯和分析等GIS

2、功能；提供從客戶端到服務(wù)器端的多層次擴(kuò)展的面向服務(wù)GIS 的開發(fā)框架。SuperMap iServer 是基于Java EE 平臺和 SuperMap iObjects Java 構(gòu)建的面向服務(wù)式架構(gòu)的企業(yè)級GIS。作為一款服務(wù)式GIS，能全面地支持 SOA，通過對多種 SOA 實踐標(biāo)準(zhǔn)與空間信息服務(wù)標(biāo)準(zhǔn)的支持，可以使用于各種 SOA 架構(gòu)體系中， 與其他IT 業(yè)務(wù)系統(tǒng)進(jìn)行無縫的異構(gòu)集成，從而可以更容易地讓應(yīng)用開發(fā)者快速構(gòu)建敏捷的應(yīng)用系統(tǒng)。31）企業(yè)級GIS服務(wù)器:基于SOA構(gòu)建的GIS服務(wù)器，以網(wǎng)絡(luò)gis服務(wù)的方式提供豐富的GIS功能，包括二三維的GIS服務(wù)。SuperMap iServer

3、基于ugc內(nèi)核，穩(wěn)定、高效，并提供集群、緩存等機(jī)制，提高服務(wù)器并發(fā)能力與效率。SupermapiServer 能夠部署在各種服務(wù)器和操作系統(tǒng)中，并且能夠被各種類型客戶端如瀏覽器、桌面軟件等。，2）服務(wù)式開發(fā)平臺為用戶提供構(gòu)建次的應(yīng)用服務(wù)的方法。iserver具有靈活的架構(gòu)，由面向服務(wù)的組件構(gòu)建而成，用戶可以在靈活的框架下，自由加入適用于自身行業(yè)應(yīng)用的服務(wù)組件。3）iserver為webgis二次開發(fā)商提供客戶端開發(fā)工具包，幫助開發(fā)者快速搭建webgis系統(tǒng)，調(diào)用iserver服務(wù)，甚至可以與標(biāo)準(zhǔn)公開服務(wù)進(jìn)行聚合。基于以上，iServer提供全方位的平臺建設(shè)的解決方案。4通過SuperMap G

4、IS系列軟件可以構(gòu)建哪些gis應(yīng)用系統(tǒng)？體系通過從云到端的完整GIS軟件體系，協(xié)助構(gòu)建云端一SuperMapGIS體化的GIS系統(tǒng)。具體來說，通過云GIS門戶iPortal、GIS應(yīng)用服務(wù)器iServer， 以及GIS分發(fā)服務(wù)器iExpress，快速構(gòu)建功能強(qiáng)大的云GIS平臺（提供網(wǎng)絡(luò) GIS服務(wù)）。通過跨PC、Web、移動等終端的多種類型端GIS軟件iMobile、iClient、iDesktop、iObjects，協(xié)助構(gòu)建跨多種平臺的客戶端應(yīng)用，在多樣化的設(shè)備上對接云GIS（supermap 網(wǎng)絡(luò)gis服務(wù)）、超圖云服務(wù)，多端應(yīng)用可以使用云GIS平臺中的GIS數(shù)據(jù)和服務(wù)，進(jìn)行地理信息的多端

5、展示，也可以為云平臺進(jìn)行數(shù)據(jù)的、制作并上傳到云平臺。5SuperMap iServer默認(rèn)支持7種類型的服務(wù)，分別是地圖服務(wù)，數(shù)據(jù)服務(wù)，交通網(wǎng)絡(luò)分析服務(wù)，空間分析服務(wù)，交通緩存分析服務(wù)，三維服務(wù)和三維分析服務(wù)。每一種類型的服務(wù)都能夠?qū)崿F(xiàn)某類GIS功能。6基于 JavaScript 語言編寫的專業(yè)GIS 網(wǎng)絡(luò)客戶端開發(fā)平臺，用于構(gòu)建面向HTML5的多終端、跨瀏覽器，具有豐富可視化交互技術(shù)的地圖應(yīng)用程序。該應(yīng)用程序采用 HTML + CSS + JavaScript 的開發(fā)組合，無需安裝任何插件，便可在終端瀏覽器上實現(xiàn)美觀的地圖呈現(xiàn)、大數(shù)據(jù)量高效的交互渲染、動態(tài)實時的要素標(biāo)繪、以及與多源 GIS

6、服務(wù)的高效交互。通過該應(yīng)用程序可快速構(gòu)建內(nèi)容豐富、響應(yīng)迅速、體驗流暢的地圖應(yīng)用，同時還支持離線地圖功能，可滿足用戶在離線狀態(tài)下的地圖應(yīng)用它具有以下特點(diǎn)，以滿足客戶端開發(fā)的多樣式需求：支持跨終端、跨瀏覽器支持客戶端無縫聚合GIS服務(wù)與客戶端緩存效率豐富的地圖可視化技術(shù)高效客戶端繪制能力無插件感受流暢地圖體驗簡單、易用的控件式開發(fā)方式72015/5/29iclient for javascript開發(fā)工具包提供哪些內(nèi)容?Iclient系列包已經(jīng)打入到superMap iserver包中，如果已經(jīng)按照iServer 包，其中iclient forjavascript包位，在安裝目錄/iclient中

7、可以看到所有iclient系統(tǒng)于iServer安裝目錄/iclient/forjavascript中Iclient for javascript的幫助文檔是以web的方式提供的，幫助文檔的首頁位置：在iServer安裝目錄/iclient/forjavascript中index.html，打開index.html可以看到示例程序， 接口說明等。82015/5/29REST:表征狀態(tài)轉(zhuǎn)移（Representional State Transfer），是Roy Fielding（ HTTP 規(guī)范的主要編寫者之一）博士在2000年他的博士中提出來的一種軟件架構(gòu)風(fēng)格。Fielding是一個非常重要的人

8、，他是HTTP協(xié)議（1.0版和1.1版）的主要設(shè)計者、Apache服務(wù)器軟件的作者之一、Apache的第一任。所以，他的這篇論文一經(jīng)，就引起了關(guān)注，并且立即對互聯(lián)網(wǎng)開發(fā)產(chǎn)生了深遠(yuǎn)的影響。REST并不是一個標(biāo)準(zhǔn)，而是通過表征（Representional ）來描述傳輸狀態(tài)的一種原則。其是從的角度來觀察整個網(wǎng)絡(luò)，分布在各處的由URI確定，而客戶端的應(yīng)用通過URI來獲取的表征。獲得這些表征致使這些應(yīng)用程序轉(zhuǎn)變了其狀態(tài)。隨著不斷獲取的表征，客戶端應(yīng)用不斷地在轉(zhuǎn)變著其狀態(tài)。目前在三種主流的Web服務(wù)實現(xiàn)方案中，因為REST模式的Web服務(wù)與復(fù)雜的SOAP和XMLRPC相對比，更加簡潔，越來越多的Web服

9、務(wù)開始采用 REST風(fēng)格設(shè)計和實現(xiàn)。例如，提供接近REST風(fēng)格的Web服務(wù)進(jìn)行查找；雅虎提供的Web服務(wù)也是REST風(fēng)格的。92015/5/29要理解RESTful架構(gòu)，最好的方法就是去理解Representational State Transfer這個詞組到底是什么意思，它的每一個詞代表了什么涵義。1、REST的名稱“表述性狀態(tài)轉(zhuǎn)化”中，省略了主語?！氨硎鲂浴逼鋵嵵傅氖恰啊保≧esources）的“表述性”。所謂“”，就是網(wǎng)絡(luò)上的一個實體，或者說是網(wǎng)絡(luò)上的一個具體信息。它可以是一段文本、一張圖片、一首歌曲、一種服務(wù)，總之就是一個具體的實在。你可以用一個URI（統(tǒng)一符）指向它，每種對應(yīng)一個特

10、定的URI。要獲取這個，它的URI就可以，因此URI就成了每一個的地址或獨(dú)一無二的識別符。所謂"上網(wǎng)"，就是與互聯(lián)網(wǎng)上一系列的" 調(diào)用它的URI"互動，2、表述：Representation，""是一種信息實體，它可以有多種外在表現(xiàn)形式。我們把""具體呈現(xiàn)出來的形式，叫做它的Representation。比如，文本可以用txt格式表現(xiàn)，也可以用HTML格式、XML格式、JSON格式表現(xiàn)，甚至可以采用二進(jìn)制格式；圖片可以用JPG格式表現(xiàn)，也可以用PNG格式表現(xiàn)。3、狀態(tài)轉(zhuǎn)化（State Transfer）；互聯(lián)網(wǎng)通信

11、協(xié)議HTTP協(xié)議，是一個無狀態(tài)協(xié)議。這意味著，所有的狀態(tài)都保存在服務(wù)器端。因此，如果客戶端想要操作，讓服務(wù)器端發(fā)生“狀態(tài)轉(zhuǎn)化”（State服務(wù)器，必須通過某種Transfer）。而這種轉(zhuǎn)化是建立在表述之上的，所以就是“表述狀態(tài)轉(zhuǎn)化"?？蛻舳擞玫降?，只能是HTTP協(xié)議。具體來說，就是HTTP協(xié)議里面，四個表示操作方式的動詞：GET、POST、PUT、DELETE。它們分別對應(yīng)四種基本操作：GET用來獲取，POST用來新建（也可以用于更新10），PUT用來更新CRUD（增加create，DELETE用來刪除。Retrieve，更新update，刪除delete） - 還記得前面課程中介紹

12、的HTTP的主要方法嗎？10REST是一種架構(gòu)，而不是一個規(guī)范。REST是一種典型的 ClientServer架構(gòu)，但是強(qiáng)調(diào)瘦服務(wù)器端，服務(wù)器端只應(yīng)該處理跟數(shù)據(jù)有關(guān)的操作，所有有關(guān)顯示的工作都應(yīng)該放在客戶端。在 REST架構(gòu)中，服務(wù)器是無狀態(tài)的，也就是說服務(wù)器保存任何與客戶端的會話狀態(tài)信息。所有的狀態(tài)信息只能放在雙方的Message（消息）中。REST架構(gòu)是冪等的，對于相同的請求，服務(wù)器返回的結(jié)果也是相同的，因此服務(wù)器端返回的結(jié)果是可以緩存的，既可以存在客戶端也可以存在服務(wù)器端。無狀態(tài)通信無狀態(tài)通信是我要講到的最后一個原則。首先，需要著重強(qiáng)調(diào)的是，雖然REST包含無狀態(tài)性（statelessn

13、ess）的觀念，但這并不是說功能的應(yīng)用不能有狀態(tài)事實上，在大部分情況下這會導(dǎo)致整個做法沒有任何用處。REST要求狀態(tài)要么被放入狀態(tài)中，要么保存在客戶端上?；蛘邠Q句話說，服務(wù)器端不能保持除了單次請求之外的，任何與其通信的客戶端的通信狀態(tài)。這樣做的最直接的理由就是可伸縮性 如果服務(wù)器需要保持客戶端狀態(tài)，那么大量的客戶端交互會嚴(yán)重影響服務(wù)器的內(nèi)存可用空間（footprint）。（注意，要做到無狀態(tài)通信往往需要需要一些重新設(shè)計不能簡單地將一些session狀態(tài)綁縛在URI上，然后就宣稱這個應(yīng)用是RESTful。）但除此以外，其它方面可能顯得更為重要：無狀態(tài)約束使服務(wù)器的變化對客戶端是不可見的，因為在兩

14、次連續(xù)的請求中，客戶端并不依賴于同一臺服務(wù)器。一個客戶端從某臺服務(wù)器上收到一份包含的文檔，當(dāng)它要做一些處理時，這臺服務(wù)器宕掉了，可能是硬盤壞掉而被拿去修理，可能是軟件需要升級重啟如果這個客戶端了。了從這臺服務(wù)器接收的，它察覺到的服務(wù)器已經(jīng)改變112015/5/29簡單的說它是一種運(yùn)行在客戶端的語言，結(jié)構(gòu)簡單，使用方便，其代碼可以直接放入HTML文檔中，可以直接在支持JavaScript的瀏覽器中運(yùn)行。JavaScript使得網(wǎng)頁制作的交互性更強(qiáng)，更生動和靈活。當(dāng)在瀏覽網(wǎng)頁時做，JavaScript所編寫的程序?qū)ο鄳?yīng)的了某種操作就產(chǎn)生一個應(yīng)。編寫語言JavaScript是一種做出反語言，它采用小

15、程序段的方式實現(xiàn)編程。像其它語言一樣,JavaScript同樣已是一種解釋性語言，它提供了一個易的開發(fā)過程。它的基本結(jié)構(gòu)形式與C、C+、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運(yùn)行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。基于對象的語言JavaScript是一種基于對象的語言，同時以可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于環(huán)境中對象的方法與簡單性的相互作用。JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計, 從而對于學(xué)習(xí)Java是一種非

16、常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。安全性JavaScript是一種安全性語言，它不允許本地的硬盤，并不能將數(shù)12據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。動態(tài)性JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以驅(qū)動的方式進(jìn)行的。所謂 就稱為“ 件。當(dāng)驅(qū)動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作， ”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事發(fā)生后，可能會引起相應(yīng)的響應(yīng)。跨平臺性Ja

17、vaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器 的計算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實現(xiàn)了“編寫一次， 走遍天下”的夢想。實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務(wù)器通道，通過自己的電腦即可完成所有的事情。綜合所述JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。 JavaScript語言可以做到回應(yīng)使用者的需求(如： form 的輸入) ，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項資料時， 它不用經(jīng)過傳給伺服端

18、 (server)處理，再傳回來的過程，而直接可以被客戶端 (client) 的應(yīng)用程式所處理。JavaScript 和 Java 很類似，但到底并不一樣！ Java 是一種比 JavaScript 更復(fù)雜許多的程式語言，而 JavaScript 則是相當(dāng)容易了解的語言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。JavaScript和Java的區(qū)別： 1、基于對象和面向?qū)ο竺嫦驅(qū)ο蟮娜筇攸c(diǎn)（封裝，繼承，多態(tài)）。通常“基于對象”是使用對象，但是無法利用現(xiàn)有的對象模板產(chǎn)生新的對象類型. 2、執(zhí)行過程不同js是瀏覽器它們的

19、時候才進(jìn)行編譯、執(zhí)行3、強(qiáng)變量和弱變量JavaScript Java var n = 1 int n= 1；n = 1.5 float n= 1.5；n = “l(fā)aowang”String n = “l(fā)aowang”； 4、嵌入方式不一樣JavaScript：<Script>.</Script> Java：<applet>.</applet>122015/8/3112015/8/3122015/8/31本節(jié)課程主要實現(xiàn)一個小的Web GIS應(yīng)用程序，該程序提供將GIS數(shù)據(jù)中一幅地圖發(fā)布到網(wǎng)絡(luò)上，并。一個Web GIS應(yīng)用程序的實現(xiàn)，主要分為三部分

20、。1、制作GIS數(shù)據(jù)。通過 SuperMap iDesktop 對GIS數(shù)據(jù)進(jìn)行處理，并制作成一幅地圖，保存工作空間。2、發(fā)布GIS數(shù)據(jù)。通過 SuperMap iServer 將工作空間發(fā)布成地圖服務(wù)。3、開發(fā)web應(yīng)用程序。通過 SuperMap iClient for JavaScript 實現(xiàn)與 SuperMap iServer 的地圖服務(wù)對接，獲取地圖并顯示。最后部署程序。32015/8/311、 GIS數(shù)據(jù)準(zhǔn)備空間數(shù)據(jù)是GIS的，GIS的血液，GIS的操作對象是空間數(shù)據(jù)，因此設(shè)計和使用GIS的第一步工作就是根據(jù)系統(tǒng)的功能，獲取所需要的空間數(shù)據(jù)，并創(chuàng)建空間數(shù)據(jù)庫。有關(guān)GIS數(shù)據(jù)的處理

21、與制作，可以參考SuperMap iDesktop相關(guān)文檔。本書不單獨(dú)進(jìn)行介紹。本例快速入門程序，直接使用SuperMap iServer提供的示例數(shù)據(jù)World，位于SuperMap iServer安裝目錄samplesdataWorldWorld.sxwu42015/8/31為數(shù)據(jù)創(chuàng)建GIS服務(wù)對于Web GIS應(yīng)用來說，獲取GIS數(shù)據(jù)以及GIS功能是通過網(wǎng)絡(luò)GIS服務(wù)來實現(xiàn)的。因此，需要為GIS數(shù)據(jù)發(fā)布成GIS服務(wù)，供客戶端對其數(shù)據(jù)以及功能進(jìn)行操作。SuperMap iServer 專門提供服務(wù)管理工具WebManager來創(chuàng)建各種類型的GIS服務(wù)，創(chuàng)建服務(wù)的步驟分為三步：1） 根據(jù)項目

22、的需求，確定需要創(chuàng)建哪些類型的GIS服務(wù)，本例需要實現(xiàn)對地圖的瀏覽、基本操作，因此創(chuàng)建地圖服務(wù)。2） 啟動SuperMap iServer 服務(wù)器：運(yùn)行SuperMap iServer安裝目錄binstartup.bat即可。注意，運(yùn)行startup.bat會出現(xiàn)一個DOC命令窗口，該窗口不能關(guān)閉。3） 服務(wù)器啟動成功后，在瀏覽器地址欄輸入：http：/localhost:8090/iserver/manager，進(jìn)入服務(wù)管理工具。注意：a）第一次該工具，會要求設(shè)置管理員用戶以及。b）服務(wù)管理工具的:8090/iserver/manager地址：http：/【GIS服務(wù)器IP或名】4）在服務(wù)管

23、理頁面首頁，點(diǎn)擊快速創(chuàng)建GIS服務(wù)，安裝創(chuàng)建服務(wù)向?qū)б来卧O(shè)置參數(shù)，完成GIS服務(wù)創(chuàng)建操作。本例所使用的數(shù)據(jù)是SuperMap iServer的示例數(shù)據(jù)，在啟動GIS服務(wù)器的過程中， 其地圖服務(wù)已經(jīng)被SuperMap iServer自動創(chuàng)建好了。52015/8/31本例快速入門使用SuperMap iClient for JavaScript開發(fā)包實現(xiàn)與GIS服務(wù)的對接， 獲取GIS數(shù)據(jù)。因為SuperMap iClient for JavaScript開發(fā)包直接使用JavaScript語言，因此應(yīng)用程序的開發(fā)工具可以選擇editPlus、notepad+、vistul studio、Dream

24、weaver等任意一款支持HTML代碼編寫的工具。SuperMap iClient for JavaScript開發(fā)包位于【iServer安裝目錄】/iclient/forJavaScript目錄中。62015/8/31開始編寫快速入門程序。首先為該程序創(chuàng)建一個文件夾，命名為GettingStarted。從SuperMap iClient for JavaScript開發(fā)包目錄中將libs和theme目錄GettingStarted文件夾中。其中 -libs文件夾 包括所有控件和基礎(chǔ)類的文件；到-theme文件夾 包括控件以及樣式文件。72015/8/31第二步，創(chuàng)建一個HTML頁面。修改頁面

25、的title，設(shè)置頁面的charset為utf-8。添加SuperMap iClient for JavaScript庫的。82015/8/31第三步，添加地圖控件。地圖控件需要一個頁面承載，因此，在頁面中添加一個div元素，通過div控制地圖窗口的位置，大小等頁面布局。該示例在首次加載頁面的時候就顯示地圖，因此在body中添加onload onload響應(yīng)函數(shù)中，實現(xiàn)地圖控件的初始化等操作。，在92015/8/31初始化地圖對象后，需要初始化圖層對象，并將圖層對象添加到地圖中進(jìn)行顯示。SuperMap iServer 的REST地圖服務(wù)中的地圖需要通過SuperMap.Layer.Tiled

26、DynamicRESTLayer圖層對象進(jìn)行對接，因此初始化圖層對象SuperMap.Layer.TiledDynamicRESTLayer，并設(shè)置該圖層對接的GIS地圖服務(wù)的地址。SuperMap.Layer.TiledDynamicRESTLayer圖層對象需要通過異步加載的方式添加到map中，因此為SuperMap.Layer.TiledDynamicRESTLayer添加，并在函數(shù)中，通過Map.addLayer()layerInitialized方法添加圖層，同時設(shè)圖的中心點(diǎn)，讓地圖數(shù)據(jù)居中顯示在地圖窗口。102015/8/31為頁面添加放大、縮小按鈕，并設(shè)置onclick，實現(xiàn)縮放

27、功能操作。112015/8/31Map.zoomIn()方法實現(xiàn)對當(dāng)前地圖進(jìn)行一倍放大。Map.zoomOut()方法實現(xiàn)對當(dāng)前地圖縮小一倍。122015/8/31運(yùn)行HTML頁面，調(diào)試程序。對于javaScript調(diào)試，可以選擇使用瀏覽器自帶的調(diào)試工具進(jìn)行斷點(diǎn)跟蹤。比如IE瀏覽器的F12，開發(fā)者工具；firefox瀏覽器的調(diào)試。一個fireBug插件，可以實現(xiàn)對程序調(diào)試成功，可以發(fā)布到web服務(wù)器上，比如通過tomcat進(jìn)行發(fā)布。132015/8/31通過快速入門的實際練習(xí)，可以看到，SuperMap iClient for JavaScript開發(fā)工具提供了若干GIS對象，通過這些對象，可

28、以實現(xiàn)與GIS服務(wù)的對接，獲取GIS服務(wù)的數(shù)據(jù)，展現(xiàn)GIS功能。142015/8/3112015/8/3122015/8/31SuperMap iClient for JavaScript提供地圖控件-Map，用于統(tǒng)一管理地圖顯示與交互式瀏覽；提供數(shù)據(jù)容器-Layer，用于承載顯示不同的數(shù)據(jù)類型。地圖控件Map可被視作圖層Layer的承載容器，Map統(tǒng)一管理地圖顯示范圍、顯示比例尺級別、疊加的圖層等。Map作為Layer的承載器，兩者必須一起使用，才能將地理數(shù)據(jù)以地圖的形式展示于Web端?；诘诙驴焖偃腴T的程序回顧，思考地圖顯示原理?！皝碓矗琓iledDynamicRestLayer作為數(shù)據(jù)

29、承載器，Map作為TiledDynamicRestLayer的容器，最終構(gòu)成Web地圖。”作為數(shù)據(jù)32015/8/31地圖控件Map的創(chuàng)建創(chuàng)建地圖控件前，需要在頁面上添加一個裝載地圖的DOM元素。這個DOM元素也是用來控制web頁面中地圖控件的布局位置的。Map的構(gòu)造函數(shù)：map = new SuperMap.Map (div,options);其中參數(shù)含義如下：1） div：DOMElement|String， 頁面上裝載地圖的DOM元素。2） options ：Object， 地圖的選項設(shè)置，表示在初始化對象的時候，同時要初始化對象的哪些屬性值。例如var options = maxExt

30、ent: new SuperMap.Bounds(-200000, -200000,200000, 200000),maxResolution: 156543, units: m,projection: “EPSG:41001”;這個object設(shè)置了地圖對象的maxExtent屬性值，maxResolution屬性值，units屬性值等。42015/8/31Map控件作為張哥地圖的控制器，封裝了大量的細(xì)粒度接口，包括常用出圖參數(shù)、圖層控制方法、地圖瀏覽控制、常用時間、坐標(biāo)轉(zhuǎn)換等。這里首先介紹常用出圖 參數(shù)。常用出圖參數(shù)包括地圖中圖層列表、地圖最大、最小的顯示范圍、分辨率以及比例尺的接口，還包

31、括地圖坐標(biāo)系設(shè)置的接口。其中resolutions用于設(shè)置當(dāng)前地圖分辨率數(shù)組。如果開發(fā)過程中只有當(dāng)前地圖的比例尺數(shù)組和dpi，可以通過轉(zhuǎn)換公式計算出對應(yīng)的resolution的值。52015/8/31Map控件提供一系列的接口用于對圖層進(jìn)行控件，如添加圖層、刪除圖層、設(shè)置基礎(chǔ)圖層等。其中基礎(chǔ)圖層中的數(shù)據(jù)作為地圖窗口中的底圖，Map的min/max zoom level、projection等屬性根據(jù)基礎(chǔ)圖層來確定。62015/8/31Map控件提供restrictedExtent屬性，用于限定地圖縮放范圍。 如果設(shè)置了restrictedExtent，平移將會被限制在指定的邊界內(nèi)。例如，Map

32、裝載了地圖數(shù)據(jù)，如果希望實現(xiàn)客戶端用戶的權(quán)限不同， 屬性來進(jìn)行限定。的地圖范圍就不同，可以通過該Map控件首次裝載圖層數(shù)據(jù)的時候，通常都需要根據(jù)裝載的地圖數(shù)據(jù)設(shè)點(diǎn)，即Map.addLayer(layer)后，在設(shè)置Map.setCenter(lonlat)。圖中心72015/8/31Map控件提供了多種類型，以便捕獲不同操作狀態(tài)下的數(shù)據(jù)信息。Map控件的所有后派發(fā)，即首先要為Map控件添加必須先的數(shù)據(jù)。函數(shù)，然后在某一操作下捕獲到相應(yīng)的，通過函數(shù)來處理為Map控件添加的方法：map.events.register(type, obj, listener)82015/8/31地圖顯示的本質(zhì)是將地

33、理數(shù)據(jù)的地理坐標(biāo)轉(zhuǎn)換為屏幕像素坐標(biāo)顯示于Web端的，本頁列出了Map中封裝的四種地理坐標(biāo)與像素坐標(biāo)間的轉(zhuǎn)換方法。92015/8/31圖層Layer是地圖數(shù)據(jù)展現(xiàn)于Web瀏覽器中的基礎(chǔ)對象，SuperMap iClient for JavaScript針對不同的數(shù)據(jù)類型提供多種圖層對象供開發(fā)者使用。SuperMap iClient for JavaScript提供的圖層類型，按照與GIS服務(wù)器的關(guān)系可分為兩類。一類與服務(wù)器緊密綁定，包括SuperMap iServer REST服務(wù)圖層、SuperMap云服務(wù)圖層、OGC標(biāo)準(zhǔn)服務(wù)（WMSWMTS等）圖層、第服務(wù)（如、地圖等）提供的各種標(biāo)準(zhǔn)格式服務(wù)

34、圖層等；另一類脫離于服務(wù)器，將空間數(shù)據(jù)在客戶端進(jìn)行渲染的圖層，包括矢量要素圖層和元素圖層（有關(guān)矢量要素圖層的介紹將在第五章做介紹）。圖層之間還可根據(jù)實際業(yè)務(wù)需求進(jìn)行疊加顯示，從而達(dá)到較好的制圖效果。102015/8/31與GIS服務(wù)對接的圖層對象根據(jù)GIS服務(wù)類型的不同，分為四種，分別是1)2)3)4)TiledDynamicRESTLayer圖層：與iServer REST地圖服務(wù)對接的對象； CloudLayer圖層：與超圖云地圖對接的對象；UTFGrid圖層圖層：對接iServer 服務(wù)器獲取UTFGrid切片數(shù)據(jù)的對象；WMTS圖層和WMS圖層：與OGC服務(wù)對接的圖層對象。112015

35、/8/31將GIS服務(wù)提供的地圖數(shù)據(jù)顯示到Web頁面，主要通過地圖對象Map以及圖層對象來實現(xiàn)。1） 創(chuàng)建map對象，這里需要通過頁面的DOM元素承載Map地圖窗口。2） 創(chuàng)建圖層對象，不同來源的地圖數(shù)據(jù)創(chuàng)建對應(yīng)的圖層對象，如對接SuperMap iServer REST地圖服務(wù)的數(shù)據(jù)，需要創(chuàng)建TiledDynamicRESTLayer對象承載；3） 將2）中的圖層對象添加到地圖控件Map中顯示，還可以通過Map.setCenter()方法設(shè)圖窗口顯示范圍。122015/8/31SuperMap iServer REST的地圖，通過 TiledDynamicRESTLayer圖層對象對接。1）

36、初始化Map對象 2）初始化圖層對象TiledDynamicRESTLayer TiledDynamicRESTLayer對象的構(gòu)造函數(shù)：SuperMap.Layer.TiledDynamicRESTLayer(name, url, params, options);其中：name：String 圖層標(biāo)識名稱。url： Array(String) or String 圖層的服務(wù)地址，是數(shù)組也可以是單個url，前者支持多地圖服務(wù)輪詢出圖，大大提高顯示速度。params ：Object 設(shè)置到url上的可選參數(shù)。options： Object 此類及其父類開放的屬性，包括dpi、maxExtent

37、、resolutions、scales、units、datumAxis六個參數(shù)。3）將TiledDynamicRestLayer圖層加載到Map上TiledDynamicRESTLayer添加到Map中的方法比較特殊，需要通過異步加載的方式，即在layerInitialized函數(shù)中實現(xiàn)添加圖層到地圖窗口的過程。132015/8/31超圖云地圖，通過 CloudLayer圖層對象對接。1）初始化Map對象2）初始化圖層對象-CloudLayer CloudLayer對象的構(gòu)造函數(shù)：new SuperMap.Layer.CloudLayer(options);其中：options ：Object

38、 附加到圖層屬性上的可選項初始化CloudLayer圖層時不需要設(shè)圖服務(wù)地址，因為超圖云屬于公有云地址，因此CloudLayer圖層對象已經(jīng)將其服務(wù)，具有固定的進(jìn)行了設(shè)置。地址在內(nèi)部3）將CloudLayer圖層加載到Map上，直接調(diào)用Map.addLayer()方法即可。142015/8/31WMS的地圖，通過 WMS圖層對象對接。1）初始化Map對象2）初始化圖層對象-WMS WMS對象的構(gòu)造函數(shù)：new SuperMap.Layer.WMS(name, url, params, options);其中：name：String 圖層標(biāo)識名稱。url： Array(String) or St

39、ring 圖層的服務(wù)地址，是數(shù)組也可以是單個url，前者支持多地圖服務(wù)輪詢出圖，大大提高顯示速度。params ：Object擁有鍵值對的對象。獲取地圖時必須的和參數(shù)值。這里可以設(shè)置的屬性包括a) layers：String 地圖圖層列表，必設(shè)參數(shù)。地圖圖層之間以半角英文逗號進(jìn)行分隔。最左邊的圖層在最底，下一個圖層放到前一個的上面，依次字符串參數(shù)類推。 圖層名稱必須是 GetCapabilities 操作返回的文檔中Title元素的值。的 Name 元素或者b) format： String 地圖的輸出格式。格式類型可以是 PNG、GIF、JPEG、SVG、WebCGM 等。如：”image/

40、gif”。options： Object在該類及其父類總開放的屬性3）將WMS圖層加載到Map上，直接調(diào)用Map.addLayer()方法即可。152015/8/31WMTS的地圖，通過 WMTS圖層對象對接。WMTS對象的構(gòu)造函數(shù)：new SuperMap.Layer.WMTS(name, url, layer,style,matrixSet,resolutions,matrixIds);注意：當(dāng)前圖層的分辨率數(shù)組信息,和matrixIds一樣，需要用戶從wmts服務(wù)獲取并明確設(shè)置,resolutions數(shù)組和matrixIds數(shù)組長度相同162015/8/31各個標(biāo)準(zhǔn)比例尺集對應(yīng)的分辨率數(shù)

41、組如下：var GlobalCRS84ScaleResolutions = 1.25764139776733, 0.628820698883665,0.251528279553466,0.125764139776733, 0.0628820698883665,0.0251528279553466, 0.0125764139776733, 0.00628820698883665,0.00251528279553466, 0.00125764139776733, 0.000628820698883665,0.000251528279553466, 0.000125764139776733, 0.0

42、000628820698883665,0.0000251528279553466, 0.0000125764139776733, 0.00000628820698883665,0.00000251528279553466, 0.00000125764139776733,0.000000628820698883665, 0.00000025152827955346;varCRS84QuadResolution = 1.40625000000000, 0.703125000000000,0.351562500000000, 0.175781250000000,0.0878906250000000,

43、0.0439453125000000, 0.0219726562500000, 0.0109863281250000,0.00549316406250000, 0.00274658203125000, 0.00137329101562500,0.000686645507812500,0.000343322753906250, 0.000171661376953125,0.0000858306884765625,0.0000429153442382812, 0.0000214576721191406,0.0000107288360595703, 0.00000536441802978516;va

44、r GlobalCRS84PixelResolution= 240000, 120000, 60000, 40000,20000,10000, 4000, 2000,1000, 500, 166, 100,33, 16, 10, 3,1, 0.33;varpatibleResolutions = 156543.0339280410,78271.51696402048, 39135.75848201023,19567.87924100512,9783.939620502561, 4891.969810251280,2445.984905125640,1222.992452562820, 611.

45、4962262814100,305.7481131407048, 152.8740565703525,76.43702828517624,38.21851414258813, 19.10925707129406,172015/8/319.554628535647032,4.777314267823516, 2.388657133911758,1.194328566955879, 0.5971642834779395;172015/8/31針對iServer發(fā)布的WMTS服務(wù)，在使用SuperMap iClinet for JavaScript對接時，需要注意WMTS圖層對象所需的4個參數(shù)。4個

46、參數(shù)獲取方法如下：1. 首先啟動iServer服務(wù)；2. 其次瀏覽器中輸入iServer 發(fā)布的WMTS服務(wù)的地址，例如然后回車3. 在WMTS的描述中搜索Contents節(jié)點(diǎn)，可以獲取所需4個屬性，包括<ows:Title>World</ows:Title><ows:Identifier>default</ows:Identifier><Format>image/png</Format><TileMatrixSet>GlobalCRS84Scale_World</TileMatrixSet>4.

47、WMTS服務(wù)中4個屬性分別對應(yīng) SuperMap iClinet for JavaScript的WMTS圖層對象的4個參數(shù)，如PPT頁面。5. 最后根據(jù)地圖情況，計算當(dāng)前圖層的分辨率數(shù)組信息。如某地圖設(shè)置其分辨率數(shù)組是var resolutions = 1.25764139776733,0.628820698883665,0.251528279553466,0.125764139776733,0.0628820698883665,0.0251528279553466,182015/8/310.0125764139776733,0.00628820698883665,0.002515282795

48、53466,0.00125764139776733,0.000628820698883665,0.000251528279553466,0.000125764139776733,0.0000628820698883665,0.0000251528279553466,0.0000125764139776733,0.00000628820698883665,0.00000251528279553466,0.00000125764139776733,0.000000628820698883665,0.000000251528279553466;182015/8/31針對天地圖官網(wǎng)發(fā)布的WMTS服務(wù)，

49、在使用SuperMap iClinet for JavaScript對接時，需要注意WMTS圖層對象所需的4個參數(shù)。4個參數(shù)獲取方法如下：1. 天地圖官網(wǎng)公布的WMTS服務(wù)地址：http:/guide/index.html2. 其次瀏覽器中輸入目標(biāo)WMTS服務(wù)的地址，例如http3. 在WMTS的括/vec_c/wmts 然后回車描述中搜索Contents節(jié)點(diǎn)，可以獲取所需4個屬性，包<ows:Title>cva</ows:Title><ows:Identifier>default</ows:Identifier><Format>ti

50、les</Format><TileMatrixSet>c</TileMatrixSet>4. 在JavaScript代碼中直接輸入代碼如下：layer = new SuperMap.Layer.WMTS(name: "vec",url: "http layer: "vec",style: "default",matrixSet: "c",/vec_c/wmts",192015/8/31format: "tiles", opacity: 1,

51、requestEncoding:“KVP”);192015/8/31第五章 繪制幾何對象本節(jié)課程主要介紹12015/8/31章節(jié)概述本節(jié)內(nèi)容主要先整體介紹下控件，而后再詳細(xì)說明輔助控件式如何開發(fā)的22015/8/31通過示范程序演示各個控件的作用。這些控件都是針對地圖控件中的gis數(shù)據(jù)進(jìn)行相應(yīng)的操作的，因此這些控件都是與map控件關(guān)聯(lián)的。后面會介紹控件如何與地圖控件關(guān)聯(lián)，以便實現(xiàn)通過控件對地圖進(jìn)行對應(yīng)的操作。如果map對象在創(chuàng)建的時候，沒有設(shè)置第二個參數(shù)options，那么地圖窗口會自帶Navigation和Panzoombar控件，可以查看快速入門程序。32015/8/31控件整體介紹通過圖

52、示來分別展示，縮放條控件，地圖控件，圖層控制控件，鷹眼控件，比例尺控件42015/8/31如果希望添加控件，有兩種方法將控件與地圖控件關(guān)聯(lián)。第一種：map對象有controls屬性，在幫助文檔中沒有列出來，但是在初始化map 對象的時候，可以利用第二個參數(shù)進(jìn)行設(shè)置。如本頁代碼所示，為controls屬性賦值，將一些賦值控件的對象實例賦予controls屬性。這樣就可以實現(xiàn)賦值控件與map對象的關(guān)聯(lián)了。第二種：直接利用map的addcontrol（）方法設(shè)置輔助控件與map的關(guān)聯(lián)。52015/8/31練習(xí)通過方法一在客戶端添加導(dǎo)航、縮放平移控件62015/8/31練習(xí)通過方法二方法添加鷹眼控件7

53、12015/8/31第五章 繪制幾何對象本節(jié)課程主要介紹22015/8/31章節(jié)概述標(biāo)繪幾何對象可以從五個方面來介紹，先整體介紹下矢量數(shù)據(jù)如何在客戶端展示，然后說明下點(diǎn)對象如何添加標(biāo)注，接下來再介紹交互式繪制幾何對象的方法， 對象繪制完成之后，這就需要將標(biāo)注信息顯示出來，此時就用到了起泡窗口的顯示方法，32015/8/31矢量數(shù)據(jù)客戶端顯示方法先介紹矢量數(shù)據(jù)客戶端顯示的整體流程，先獲取或者創(chuàng)建矢量要素，然后設(shè)置矢量要素的顯示風(fēng)格，最后將幾何對象展示到地圖圖層上圖上所示的就是矢量要素添加到對應(yīng)的矢量要素圖層上4矢量要素接口了解完矢量要素添加的流程之后，我們要細(xì)化介紹每個過程所涉及到的接口，首先來

54、看下矢量要素接口，該接口對應(yīng)的類是SuperMap.Feature.Vector，它包括點(diǎn)，線，面，文本等；而SuperMap.Feature.Vector這個類包括了geometry（點(diǎn)線面的空間位置），要素的屬性信息attributes，以及要素的風(fēng)格style52015/8/31圖層對象接口承載點(diǎn)線面文本等要素的圖層，對應(yīng)的接口是SuperMap.Layer.Vector，注意它對應(yīng)的基類是SuperMap.Layer，而要素對應(yīng)的基類是SuperMap.Feature;62015/8/31顯示樣式的說明沒有設(shè)定顯示樣式，則無法在圖層上展示出來，風(fēng)格設(shè)置可以設(shè)置哪些屬性，可以參照幫助，下

55、面的列表中展示了幾個常用的屬性，矢量要素的風(fēng)格對應(yīng)的接口是SuperMap.Feature.Vector.style72015/8/31設(shè)置SuperMap.Layer.Vector圖層樣式設(shè)置SuperMap.Layer.Vector圖層樣式有兩種方法：第一種是通過設(shè)置 SuperMap.Feature.Vector 的樣式 Style 屬性獲得樣式；即先實例化圖層，實例化要素，然后對要素的風(fēng)格進(jìn)行設(shè)置82015/8/31設(shè)置SuperMap.Layer.Vector圖層樣式設(shè)置SuperMap.Layer.Vector圖層樣式的第二種方法是直接設(shè)置圖層對象的style對象，即圖層在實例化的時候，直接賦予它需要呈現(xiàn)的風(fēng)格；在這里強(qiáng)調(diào)一下，優(yōu)先風(fēng)格的是要素的