網(wǎng)絡(luò)地理信息服務(wù)開發(fā)技術(shù)-朱欣焰

1、網(wǎng)絡(luò)地理信息服務(wù)開發(fā)技術(shù)朱欣焰、佘冰第 2 頁主要內(nèi)容n 富客戶端技術(shù)介紹n 基于Flash技術(shù)的社會經(jīng)濟空間信息服務(wù)平臺構(gòu)建n HTML5技術(shù)及其在Web GIS中的應(yīng)用第 3 頁Silverlight是微軟所開發(fā)的 Web 前端應(yīng)用程序開發(fā)解決方案，是微軟富互聯(lián)網(wǎng)應(yīng)用策略的主要應(yīng)用程序開發(fā)平臺之一。Flash 最初是作為一種二維矢量動畫制作軟件。后來被應(yīng)用于互聯(lián)網(wǎng)，現(xiàn)在已成為了最普及的RIA實現(xiàn)技術(shù)。JavaFX是SUN公司推出的RIA解決技術(shù)。由于需要運行與JVM之上，在目前的PC客戶端上并不普及，在移動領(lǐng)域有著更好的前景。http:/ 4 頁Flash GIS應(yīng)用第 5 頁Flash

2、GIS應(yīng)用第 6 頁HTML5HTML是超文本標(biāo)記語言的英文縮寫，這是一種標(biāo)記語言，不需要進行編譯，直接由瀏覽器執(zhí)行。HTML5 是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn) ， 是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，被認為是互聯(lián)網(wǎng)的核心技術(shù)之一。n不是一項新的技術(shù)，而是一組特性的集合n已有的元素都不用改變n升級容易第 7 頁矢量地圖Cartagen第 8 頁Nokia WebGL Maps第 9 頁基于Flash技術(shù)的社會經(jīng)濟空間信息服務(wù)平臺構(gòu)建n 平臺介紹及架構(gòu)n 矢量繪制n 報表及專題圖服務(wù)n 空間分析模塊開發(fā)第 10 頁問題和挑戰(zhàn)問題: 數(shù)據(jù)源的分離 不同領(lǐng)域間信息的分離 不同團體研究工作的分離挑戰(zhàn): 數(shù)據(jù)

3、共享 (海量異源異構(gòu)數(shù)據(jù)集的訪問與互操作) 數(shù)據(jù)分析方法的共享 知識的共享第 11 頁統(tǒng)計數(shù)據(jù)和GIS的集成GIS GIS B-IDPOP10012000100230001003500010046000A-IDB-ID10012000100230001003500010046000B-IDTempreture10012000100230001003500010046000B-IDGDP10012000100230001003500010046000B-IDLand10012000100230001003500010046000政府統(tǒng)計數(shù)據(jù)政府統(tǒng)計數(shù)據(jù)人口調(diào)查數(shù)據(jù)人口調(diào)查數(shù)據(jù)經(jīng)濟調(diào)查數(shù)據(jù)經(jīng)濟調(diào)查

4、數(shù)據(jù)境界地圖境界地圖街區(qū)地圖街區(qū)地圖城市地圖城市地圖第 12 頁空間智能)()()(2 ninjijninjjiijwSxxxxwdIDATARSGIS信息信息+方法方法+知識知識空間技術(shù)空間技術(shù)信息，方法與知識在空間技術(shù)支撐下的集成第 13 頁China Geo-Explorer提供一個在線的數(shù)據(jù)集成與分析的平臺利用新的方法促進多學(xué)科學(xué)習(xí)和應(yīng)用促進知識共享高效的空間及非空間數(shù)據(jù)集成快速精確的空間位置分析及評估識別空間模式和趨勢省時、易用、格式化且可自定義的多種報表以及動態(tài)專題圖及各種可視化圖表第 14 頁開發(fā)實例China Geo-Explorer第 15 頁China Geo-Explor

5、er架構(gòu)第 16 頁多源數(shù)據(jù)集成第 17 頁GraphicsGraphics類不能實例化，但支持矢量繪制的其他類會自動生成Graphics實例，并可通過graphics屬性對其進行訪問。ShapeSpriteMovieClipObjectEventDispatcherDisplayObjectInteractiveObjectDisplayObjectContainerShapeSprite第 18 頁空間分析模塊1999-2008年選擇集國內(nèi)生產(chǎn)總值的相關(guān)性分析 第 19 頁n GMLn GeoJSONn GeoRSS第 20 頁AMF支持類型支持類型undefinenullfalsetru

6、eintdoublestringxmldatearrayobjectxml-makerbyteArray第 21 頁第 22 頁BlazeDSByteArrayreadObject第 23 頁第 24 頁是否第 25 頁大量矢量數(shù)據(jù)示例第 26 頁ObjObjObjObjObj第 27 頁動態(tài)交互數(shù)據(jù)選擇第 28 頁動態(tài)交互數(shù)據(jù)選擇第 29 頁報表服務(wù)- 開源庫JasperReportsn 報表模板與程序邏輯分離n 樣式，排版和數(shù)據(jù)的填充是分離的n 良好的可視化報表編輯工具支持（ireport）n 支持多種數(shù)據(jù)源以及自定義數(shù)據(jù)源n JDBC，JavaBean，XML, CSV，Hibernat

7、eCustom Datasourcen 多種格式導(dǎo)出n Pdf, rtf, excel, odt, csv, xml, html, jpegn 免費的Lesser GNU Public License (LGPL)第 30 頁JasperReports 架構(gòu)第 31 頁平臺實現(xiàn)n 實現(xiàn)JRDataSource接口進行WFS數(shù)據(jù)的讀取，實現(xiàn)報表服務(wù)和OGC標(biāo)準(zhǔn)服務(wù)的集成第 32 頁專題圖服務(wù)-瓦片專題圖n 客戶端動態(tài)生成樣式表SLD文件n 樣式表上傳服務(wù)器端n GeoServer請求專題圖（引用樣式表地址）第 33 頁專題圖的導(dǎo)出n 結(jié)合報表服務(wù)實現(xiàn)各種格式的導(dǎo)出第 34 頁專題圖服務(wù)-客戶端專

8、題圖第 35 頁空間分析模塊開發(fā)n 動態(tài)參數(shù)化界面n 統(tǒng)計圖庫集成n 動畫效果搜索探索性分析建模預(yù)處理第 36 頁統(tǒng)一參數(shù)選擇界面n 自定義的描述規(guī)范和動態(tài)參數(shù)生成界面 n 方法的參數(shù)有復(fù)雜關(guān)聯(lián)關(guān)系n 前臺驗證第 37 頁流程第 38 頁結(jié)果 參數(shù)選擇空間自相關(guān)指數(shù)結(jié)果可視化第 39 頁時空重心模型結(jié)果 時空探索性分析時空重力模型n繼承TweenEffect實現(xiàn)顏色、形狀、透明度的漸變第 40 頁統(tǒng)計圖大數(shù)據(jù)量優(yōu)化n 劃分網(wǎng)格索引n 實例化少數(shù)點n 以Raster繪制替代Sprite舞臺添加第 41 頁Flash 局限性l Adobe Flash是100%的私有產(chǎn)品。它僅在Adobe有售，Ad

9、obe也是決定Flash未來發(fā)展、定價等的唯一機構(gòu)。盡管Adobe的Flash產(chǎn)品非常普及，但這并不意味著它是開放的，因為它完全被Adobe控制，也僅僅來自Adobe。從任何角度來看，F(xiàn)lash都是一套封閉系統(tǒng)。l Flash的在移動設(shè)備上優(yōu)化不足，性能不高。同時對于移動設(shè)備，需要保證足夠長的連續(xù)工作時間，而Flash的特點是耗電大，預(yù)載時間長。l Flash是為PC使用鼠標(biāo)控制設(shè)計的，而不是為使用手指操作的觸摸屏設(shè)計的，無法適應(yīng)當(dāng)前觸摸屏流行的趨勢。第 42 頁HTML5技術(shù)及其在Web GIS中的應(yīng)用n HTML5的概念、發(fā)展歷史n HTML5的新特性n 基于HTML5的Web GIS解決

10、方案n 發(fā)展前景第 43 頁實現(xiàn) v.s. 規(guī)范?n 實現(xiàn)和規(guī)范相輔相成n 現(xiàn)行很多成功的規(guī)范很多是復(fù)古規(guī)范n 1993 HTML+ 從未實現(xiàn)n 1994 HTML 2.0 引入tables等特性n 1995 HTML 3.0 從未實現(xiàn)n 1996 HTML 3.2 引入applets 等特性n 1997 HTML 4.0 引入Frameset等特性n 從來沒有出現(xiàn)一個干凈的、統(tǒng)一的HTML規(guī)范第 44 頁從HTML4.0 到 HTML 5.0n 1998年，W3C研討會“塑造HTML的未來”：n 擴展HTML 4.0 到XML的規(guī)范會很困難, 重新開始制定一套規(guī)范n 2001年， XHTML

11、1.0發(fā)布 n MIME：application/xhtml+xmln 事實是：99%的HTML網(wǎng)頁至少含有一個錯誤n 后果：XHTML 1.1和XHTML 2.0很少被開發(fā)人員使用n 2004年， WHAT工作組成立 - 進化HTML表單n 2006年，Tim Berners-Lee倡導(dǎo)兩個組織開始協(xié)作n 2007年， W3C 關(guān)閉XHTML 2工作組第 45 頁3、HTML5環(huán)境下的新特性環(huán)境下的新特性n語義n多媒體n離線存儲*n設(shè)備及應(yīng)用n地理位置*n多線程*不屬于HTML5規(guī)范第 46 頁語義語義化標(biāo)簽HTML5的一個重要特性，就是引入了結(jié)構(gòu)化的語義標(biāo)簽，使得HTML5在文檔結(jié)構(gòu)上較H

12、TML4.01更加清晰和易讀。HTML4頁面頁面HTML5頁面頁面第 47 頁語義微數(shù)據(jù)MicrodataHTML5微數(shù)據(jù)是一種標(biāo)記內(nèi)容以描述特定類型的信息，每種信息都描述特定類型的項。 h1 itemprop=“name itemreviewed 小觀園（田園店） 地址： 評分：四星商戶 271條評論 第 48 頁語義智能表單表單是網(wǎng)頁中常見的控件(集)，擔(dān)負了用戶和網(wǎng)頁后臺數(shù)據(jù)更新交互的任務(wù)HTML5對表單的功能進行了大幅度的提升包括以下內(nèi)容：n 眾多的新增input類型，在input的type類型中，新增了color、Email、date、number、range、search、teI、

13、url等類型。n 新增的input屬性，包括required、autofoucus、pattern、list、autocomplete、placehold、form等。n 新增的表單標(biāo)簽，包括datalist、keygen、output、meter、progress等。第 49 頁多媒體音視頻、標(biāo)簽，用來在Web網(wǎng)頁中嵌入音視頻播放功能，而無須FLASH和其他嵌入式插件的支持。n 音頻支持Ogg Vorbis、MP3、AAC和WebM四種格式n 視頻支持Ogg Theora、MPEG4、H.264和WebM四種格式第 50 頁繪制Canvas畫布n Canvas元素在Web頁面上創(chuàng)建了一個矩形

14、的繪圖表面。n Canvas應(yīng)用編程接口提供了數(shù)十個方法或函數(shù)，以繪制線條、弧線以及矩形，用樣式和顏色填充區(qū)域，書寫樣式化文本，操作圖像和視頻以及其他有趣的活動。 var canvas= document.getElementById(canvas).getContext(2d); 第 51 頁1、繪制基本形狀fillRect lineTo arc bezierCurveTo第 52 頁2、運用樣式與顏色fillStyle strokeStyle globalAlpha createLinearGradient lineWidth lineCap lineJoin miterLimit第 53

15、 頁3、圖形變形和組合translaterotatescale第 54 頁4、圖形裁剪、像素處理和字體drawImageclipputImageDataShadowsfillText第 55 頁繪制 - SVGn 可縮放矢量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴(yán)格遵從XML語法)。在HTML4時代就已經(jīng)存在，但跟Canvas有互補關(guān)系因此會繼續(xù)存在第 56 頁SVG濾鏡 第 57 頁矢量在線編輯 -SVGn 支持大規(guī)模矢量數(shù)據(jù)的高效編輯； n 支持節(jié)點的動態(tài)添加、刪除； n 支持節(jié)點優(yōu)先級的設(shè)置。第 58 頁矢量在線編

16、輯 -SVG第 59 頁Canvas 與 SVGCanvasSVG基于像素基于形狀單個HTML元素多個圖形元素，這些元素成為 DOM 的一部分僅通過腳本修改通過腳本和 CSS 修改事件模型/用戶交互顆?；?(x,y)事件模型/用戶交互抽象化 (rect, path)圖面較小時、對象數(shù)量較大 (10k)（或同時滿足這二者）時性能更佳對象數(shù)量較小 (10k)、圖面更大（或同時滿足這二者）時性能更佳織圖織圖第 60 頁多媒體WebGLWebGL地解決了現(xiàn)有的Web交互式三維動畫的兩個問題：n 它通過HTML腳本本身實現(xiàn)Web交互式三維動畫的制作，無需任何瀏覽器插件支持;n 它利用底層的圖形硬件加速功

17、能進行的圖形渲染，是通過統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺的OpenGL接口實現(xiàn)的。基于OpenGL ES 2.0。提供可編程管線，包含頂點著色器和片元著色器。http:/ 61 頁 attribute vec3 aVertexPosition; attribute vec2 aTextureCoord; varying vec2 vTextureCoord; void main(void) gl_Position = aVertexPosition; vTextureCoord =aTextureCoord; varying vec2 vTextureCoord;uniform sampler2D uS

18、ampler; void main(void) gl_FragColor=texture2D(uSampler , vTextureCoord);坐標(biāo)第 62 頁three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能?？梢杂盟鼊?chuàng)建各種三維場景，包括了攝影機、光影、材質(zhì)等各種對象。3D引擎Three.js第 63 頁離線存儲Web StorageHTML5提供了與HTTP session cookies相似的穩(wěn)健的Web存儲屬性n sessionStorage用以存儲瀏覽最頂層環(huán)境生存周期內(nèi)的數(shù)據(jù)。如瀏覽器Tab或窗口持續(xù)打開周期內(nèi)的數(shù)據(jù)；n localSto

19、rage用以存儲周期較長、多頁面以及多瀏覽器session內(nèi)的數(shù)據(jù)這些數(shù)據(jù)可以一直保存甚至持續(xù)到重啟瀏覽器或者電嚙。cookieWeb storage大小4K10M傳輸服務(wù)器-瀏覽器本地速度慢快存儲非獨立獨立安全性低高第 64 頁離線存儲Indexed DBn Indexed DB是HTML5中的另外一種數(shù)據(jù)存儲方式，用來幫助應(yīng)用在本地存儲結(jié)構(gòu)比較復(fù)雜的數(shù)據(jù)。第 65 頁離線存儲Application Cachen HTML5定義了當(dāng)用戶的網(wǎng)絡(luò)被斷開后，如何讓它們繼續(xù)與網(wǎng)頁程序和文檔進行交互。n 優(yōu)勢： 離線瀏覽用戶在不能聯(lián)網(wǎng)的時候依然能瀏覽整個站點 高速緩存資源是存儲在本地的，因此能更快加載

20、。 更小的服務(wù)器負載瀏覽器只需要從服務(wù)器端下載有改變的資源即可，相同資源不需要重復(fù)下載。 第 66 頁通信Web Socketn HTML5 web socket規(guī)范定義了Web socket API，支持頁面使用web socket協(xié)議與遠程主機進行全雙工的通信。n HTML5 Web socket以最小的開銷高效地提供Web連接。相較于經(jīng)常需要使用推送實時數(shù)據(jù)到客戶端甚至通過維護兩個HTTP連接來模擬全雙工連接的舊的輪詢或長輪詢(Comet)來說，極大地減少了不必要的網(wǎng)絡(luò)流量與延遲。var socket = new WebSocket(location); socket.onopen =

21、function(event) socket.postMessage(“Hello, WebSocket”); socket.onmessage = function(event) alert(event.data); socket.onclose = function(event) alert(“closed”); 第 67 頁通信Web NotificationHTML5 Web Notification技術(shù)提供了一種可以跨越沙盒的通知API，可以使得用戶在瀏覽任何網(wǎng)頁，甚至在瀏覽器最小化的狀態(tài)下都可收到來自Web應(yīng)用的桌面通知。nAmbient notificationnInteract

22、ive notificationnPersistent notificationnNotification platformnSimple notificationnWeb notification第 68 頁設(shè)備及應(yīng)用APIDrag&Drop、File APIn 目前許多網(wǎng)頁程序，如Gmail、QQ郵箱已經(jīng)支持通過拖拽方式將檔案作為郵件附件。這個業(yè)務(wù)功能的實現(xiàn)就是使用了Drag&Drop以及File API。document.addEventListener(dragstart, function(event) event.dataTransfer.setData(text,

23、 Customized text); event.dataTransfer.effectAllowed = copy; , false);第 69 頁if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(position) var lat = position.coords.latitude; var lng = position.coords.longitude; map.setCenter(new GLatLng(lat, lng), 13); map.addOverlay(new GMar

24、ker(new GLatLng(lat, lng); ); 設(shè)備及應(yīng)用APIGeolocation APIuIP地址uGPS地理定位數(shù)據(jù)uWiFi地理定位數(shù)據(jù)u手機地理定位數(shù)據(jù)u用戶自定義的地理數(shù)據(jù)位置信息來源Geolocation應(yīng)用詳細的位置信息n HTML5的定位AH可以綜合使用GPS、Wi-Fi、手機等多種定位方式。定位更為精準(zhǔn)、靈活。定位API和離線存儲的結(jié)合，可實現(xiàn)豐富的地圖應(yīng)用。第 70 頁多線程 在HTML5中提出了工作線程(Web Worker)的概念，并且規(guī)范出工作線程的三大主要特征：n 能夠長時間運行(響應(yīng))。n 理想的啟動性能。n 理想的內(nèi)存消耗。main.js: va

25、r worker = new Worker(extra_work.js); worker.onmessage = function (event) alert(event.data); ; extra_work.js: / do some work; when done post message. postMessage(some_data);第 71 頁檢測HTML5特性n Modernizr 開源庫，方便的支持各種HTML5特性檢測./detect.htmlif (Modernizr.canvas) / 支持canvas繪制！ else /

26、不支持canvas繪制 第 72 頁4、瀏覽器的支持情況n PC端的支持情況n 移動端的支持情況第 73 頁移動端支持第 74 頁基于HTML5的Web GIS解決方案n 基于HTML5的Web GIS方案介紹n 二維地圖n 三維地圖n 基于OpenWebGlobe的開發(fā)實例第 75 頁NOKIA-Map 3D WebGL第 76 頁WebGL Earth第 77 頁openwebglobe第 78 頁Google-MapsGL第 79 頁cartagen第 80 頁openlayers第 81 頁Maps 3D WebGLWebGL EarthOpen Web GlobeOpenLayers

27、 3.0開發(fā)商NOKIA Klokan TechnologiesUniversity of Applied Sciences Northwestern SwitzerlandOpen Source Geospatial Foundation是否開源否是是是影像來源nokiaOSM/bingOSM/owg/本地數(shù)據(jù)Google /Yahoo /OSM矢量繪制否否點NA地形否是是NA三維模型表面模型否JSONNA速度快一般一般NA場景類型2D3D2D、3D flat、3DNA項目進展測試版測試版0.9.14進展中網(wǎng)址http:/ 82 頁二維場景地圖對比Maps GLOpenLayersCarta

28、gen開發(fā)商GoogleOpen Source Geospatial FoundationMIT Media Lab開源否是是影像來源GoogleGoogle /Yahoo /OSMOSM矢量繪制否否是速度快快一般進展測試版2.1.2進行中網(wǎng)址http:///第 83 頁基于OpenWebGlobe的開發(fā)實例n 開發(fā)環(huán)境n OpenWebGlobe架構(gòu)n OpenWebGlobe示例開發(fā)第 84 頁n 自動提示自動提示n 代碼主題代碼主題n 調(diào)試調(diào)試n 支持流行框架支持流行框架n Node.js, extn 插件支持插

29、件支持運行環(huán)境第 85 頁Openwebglobe是一個開源的虛擬地球環(huán)境，能夠處理TB級地形數(shù)據(jù)，圖像、地圖、三維點云數(shù)據(jù)，并且能夠加載三維模型數(shù)據(jù)。3DGIS引擎openwebglobe第 86 頁第 87 頁第 88 頁 openwebglobe function main() var ctx = ogCreateContextFromCanvas(canvas, true); var globe = ogCreateGlobe(ctx); 第 89 頁Image Data Layers & Elevation Data var imgBlueMarble500 = url : /data/img, layer : World500, service : i3d ; var el