RIA技術在海洋環境監測信息平臺中的應用

施 佺， 陸春龍， 陳建平， 丁衛平

(1.上海理工大學管理學院，上海200093；2.南通大學計算機科學與技術學院，江蘇南通226019)

0 引 言

隨著海洋信息化管理技術的不斷發展，海洋環境監測也已成為實施“數字海洋”戰略中的一個重要環節，大量的海洋環境監測信息(如監測數據、音頻視頻等)要通過地圖引擎作為數據展現層來動態直觀地顯示監測站點的點位信息。在傳統的電子地圖構件中大多數的研究基于WebGIS技術[1-3]來集中體現，WebGIS由于跨平臺、可擴展、信息分布共享、高效的負載平衡等特點，已經在諸多領域中得到廣泛的應用。然而WebGIS開發雖然滿足了矢量圖形的高要求，但它在處理大數據量圖像、圖形等海量數據傳輸速率比較緩慢，而且在矢量圖形處理中地圖引擎過于龐大需要較大的開發工作量；此外還有研究使用AJAX技術[4-6]來實現動態的用戶交互，通過用戶的操作來綁定數據的顯示。然而利用AJAX實現的電子地圖縮放效果并不理想，異步數據傳輸中的延遲問題不能形成流暢的用戶體驗，并且基于矢量圖形的特殊性也大大局限了AJAX技術在該類系統中的應用前景。

而富互聯網應用(rich internet application，RIA)[7]結合了桌面程序的反應迅速、交互性強以及Web應用程序易于部署、方便傳播的特點，并具備多媒體表達能力，可以將文字、圖片、音頻、視頻等進行無縫集合[8]。因此本文基于.NET平臺利用RIA技術進行研究，通過實際應用表明基于RIA的客戶端交互技術具有大數據量傳輸、復雜快速的響應用戶請求等特點，在海洋環境監測信息平臺應用中具有較好的可行性和高效性。

1 RIA技術及其選取

RIA技術是下一代的、將桌面應用程序交互的用戶體驗與傳統的Web應用的部署靈活性和成本分析結合起來的網絡應用程序[7]。RIA具有“富”客戶技術，其概念包含兩方面，分別是數據模型的豐富和用戶界面的豐富。其客戶端應用程序使用異步客戶/服務器架構連接現有的后端應用服務器，因此是一種安全、可升級、具有良好適應性的面向服務模型[9]。這種模型采用Web服務驅動，結合了聲音、視頻和實時對話的綜合通信技術使RIA具有前所未有的網上用戶體驗。在目前眾多的RIA技術中，Flex、JavaFX、Silverlight這3種技術已成為它的主流。

1.1 Flex

Macromedia Flex[10]是Adobe公司為滿足開發RIA企業級程序員的需求而推出的表示服務器和應用程序的框架。Flex內置的界面可以由Flash Player顯示在客戶端系統上，開發者使用直觀的基于XML的語言來定義豐富的用戶界面；該語言由Flex服務器翻譯成智能的客戶端應用程序，可在普遍存在的Flash運行環境中運行。

1.2 JavaFX

JavaFX[11]是SUN公司利用Java運行環境進入RIA領域的開發技術，它包含JavaFXScript和JavaFXMobile兩個部分，使用一種全新的腳本語言，依賴JavaSE/ME運行時，利用Java2D和Swing API來實現在桌面、移動設備、手持設備和電視等環境的RIA富互聯網應用。

1.3 Silverlight

Silverlight[12-13]是微軟公司推出的新一代RIA富互聯網應用技術，能夠開發出具有專業圖形、音頻和視頻等多媒體的Web應用程序，它具有和桌面體驗一樣的、豐富的圖形渲染及用戶交互控制能力。微軟在 Silverlight技術上作了前所未有的改進，那就是它的跨平臺、跨編程語言的兩大“跨”越能力。所有掌握 Apache、PHP、C#、VB.NET、JavaScript、Python 等技術的編程人員都可以成為它的后臺開發成員，同時Silverlight還提供了強大的工具來提高其工作效率。

從目前來看這3種技術各有優勢，Flex先入為主，目前已經有了一定的市場；JavaFX作為后起之秀，其優勢是它的開源策略；而Silverlight的先天優勢是有Windows平臺的支持，用來構建和發布下一代的媒體體驗和Web交互應用，在客戶瀏覽器端運行時它不但可以靈活地和各種服務器端應用來交互，更具有和桌面體驗一樣的、豐富的圖形渲染及用戶交互控制能力。因此這里選用基于Silverlight的RIA技術作為海洋環境監測信息平臺的核心應用。

2 系統功能結構分析與設計

2.1 基于Silverlight的RIA系統架構設計

基于Silverlight的RIA中采用Windows通信基礎(windows communication foundation，WCF)方式進行數據通信傳遞[14]，從而使用戶用最少的時間來建立外界通信。它以ASP.NET、Windows Forms或COM+等作為宿主，整合.NET平臺下所有分布式系統技術，支持TCP、HTTP協議，使得開發者能夠建立一個跨平臺的安全、可信賴的解決方案。作為新一代RIA技術，Silverlight具有豐富的數據模型，RIA要求“按需所取”在客戶端顯示和操作數據，因此，系統的設計關鍵是如何將基于Silverlight的RIA技術與數據庫進行交互。

圖1給出了海洋環境監測平臺基于Silverlight的RIA數據通信架構示意圖，Silverlight應用程序根據用戶的需要，通過WCF使用異步傳輸來自業務層調用數據庫的信息。該技術使用戶界面可以顯示和操作更為復雜的嵌入在客戶端的數據類型，這使得Silverlight應用程序的控件可以輕松綁定到某些實體的實例及其屬性上，從而給Silverlight客戶端應用程序提供數據、位圖等數據信息。

圖1 Silverlight數據通信架構

2.2 系統的功能結構與建模分析

通過對南通市海洋環境監視預報中心進行詳細需求調研，分析出了如圖2所示的海洋環境監測信息平臺體系結構。該信息平臺由專項監測、常規監測、跟蹤監測、應急監測、共管灘涂、監測網絡、保護區監測等7個監測子系統以及后臺數據維護子系統構成。

圖2 海洋環境監測信息平臺的功能結構

整個海洋環境監測信息平臺主要包括7個監測項目，其監測內容共用同一張電子海圖。整個平臺通過菜單導航欄進入各個具體的監測子系統，進入子系統后左側要求設計樹型目錄菜單(參見圖5的實現)來顯示各個監測項目的具體名稱，各個項目最小的監測單位為樹型目錄菜單上的葉子節點 (監測點位)。用戶可以通過點擊左邊的樹型目錄菜單或電子海圖中的監測點位，在右側獲取有關該節點(監測點位)的地理數據、監測的圖片文字信息以及相關的監測視頻數據信息，同時還要求能夠實現對監測數據按各種條件進行檢索、查詢最新動態數據信息等功能。

統一建模語言(unified modeling language，UML)為開發者提供的是一套多角度的完整方法，用例圖、時序圖、協作圖、活動圖等各種圖形為系統分析設計提供了強有力的手段。這里采用的基于UML的建模方法在海洋環境監測信息平臺開發建模中得到了充分的應用，大大減少了系統開發的工作量，提高了系統分析設計以及實現的效率，開發出的系統平臺功能強大、易維護、可擴展，取得了令人滿意的效果。由于篇幅限制，圖3和圖4分別以系統用戶為例，給出了管理員登錄的用例圖和監測信息后臺管理模塊的時序圖。

圖3 管理員登錄用例

圖4 后臺管理模塊時序

2.3 系統數據庫設計

在整個基于RIA的海洋環境監測信息平臺數據庫的設計過程中，遵循數據設計規范化理論，根據系統調研的需求分析將數據庫嚴格按第三范式進行設計[14]。為減少數據冗余，便于監測數據信息的導入，對各種具有不同單位名稱的監測信息數據表進行了優化設計，使得各個監測項目所監測的具有不同單位名稱的監測數據信息集成在一張表中，并設計一張相應的單位名稱表與之關聯對應，這樣就大大降低了導入數據的復雜性，提高了數據的易維護性。此外本系統還采用了視圖機制，視圖是關系數據庫系統提供給用戶以多種角度觀察數據的重要機制。本系統建立了多個視圖，其功能可以和基本表一樣具有查詢、刪除和更新的功能，這樣簡化了用戶的操作，還可對機密數據提供了安全保護。

3 基于Silverlight的RIA關鍵技術的實現

3.1 基于Silverlight的Deep Zoom圖像處理技術的實現

為既能節省系統的開發時間，又能高質量的利用Silverlight的RIA技術來實現海洋監測信息平臺，這里采用了Silverlight的第三方控件——ComponentOneStudioforSilverlight，它是一套非常完整的控件庫，內置了30多個控件，外觀十分精美。在這一程序集中開發者可通過C1Maps控件調用DeepZoom來實現圖像平滑的縮放處理。Deep Zoom是Silverlight中集成的一個可以無縫、平滑對圖片進行縮放處理的技術，它通過以漸進方式加載較高分辨率的圖像，為用戶提供了一個“模糊到鮮亮”的體驗。C1Maps控件調用Deep Zoom調用方法如下：

因此該控件是一個功能強大的Silverlight地圖控件，控件所擁有的屬性能實現監測信息平臺中電子海圖的縮放、移動以及定位查找等所有功能。通過該控件實現對大型圖像或高分辨率圖像的集合進行多種分辨率的縮放、平移或拉伸處理，以達到對大型圖像流暢的縮放，并可以通過鼠標拖拽移動圖片，通過滾輪縮放圖片，該技術對電子地圖項目提供了強有力的底層支持。圖5是利用Deep Zoom技術實現了在常規監測信息中展示近岸海域趨勢性水質監測的各個點位信息，它還實現了如圖5中根據經緯度定位地圖點位(圖釘效果)的功能。

圖5 基于Deep Zoom的監測點位信息的實現

在圖5中，左擊拖拽鼠標或滾動鼠標的滑輪就可以無縫、平滑對電子海圖進行縮放功能，當選取趨勢性水質監測的27號監測點位，即能實現圖6中放大后的高亮顯示的監測點位以及該點位的詳細監測數據、圖文和媒體監控錄像等信息。

C1Maps使用3個坐標系統，其中一個就是地理坐標系統(經緯度)，本監測信息平臺的電子海圖就是使用了該坐標系統作為地圖的定位系統，所有監測站點的定位都可以通過右上角文本框輸入經緯度值進行坐標定位。另外使用左上角的縮放工具條同樣能實現地圖的深度縮放和移動功能，右下角為地圖的縮放比例，它會隨地圖的縮放而改變。

3.2 基于Canvas的電子海圖經緯度坐標換算算法

在設計中本文還自主設計了基于Canvas(畫布)的電子海圖經緯度坐標與邏輯坐標的換算算法。使用Canvas布局，以左上角頂點為起始頂點(0,0)，Canvas作為容器，容器內所有元素的坐標屬性都是相對于Canvas頂點的偏移坐標。在Path對象中的標記路徑點也是采用的相對坐標，而客戶端獲取的幾何模型保存的是經緯度字串，因此需要轉換為適應Canvas畫布的相對坐標路徑。將經緯度字串轉換為相對坐標路徑的算法如下：

圖6 海洋環境監測點位放大

3.3 Silverlight與網頁集成實現流媒體的動態播放

根據系統的需求分析，當點擊每個監測點位時均要實現監測視頻流媒體信息的實時播放功能。因此這里采用 ASP.NET MediaPlayer服務器控件能很好的實現系統流媒體的播放，它可以通過Web應用程序提供遠遠超過僅使用AJAX和DHTML所獲得RIA的體驗。該服務器控件能將Silverlight與網頁集成實現流媒體的播放，可以把WMA(音頻)和WMV(視頻)等媒體源集成到Web應用程序中，而無需了解任何XAML或JavaScript知識。該控件在前臺頁面加入如下代碼即可實現：

該控件的外觀皮膚可以改變，其MediaSkinSource屬性即為它的外觀設置、MediaSourse屬性則是對它播放文件的路徑設置，本信息平臺視頻文件播放是動態變化的，具體實現關鍵代碼如下：

通過以上代碼最后能實現流媒體(雙擊能全屏)播放功能。

4 實驗結果與分析

實驗采用C#.NET作為開發應用平臺，所有實驗均在配置為IntelCoreDuo1.60GHz的CPU和2G內存的WindowsXPProfessional操作系統上進行。本文對實現的基于RIA技術電子海圖的海洋監測信息平臺與現有的基于WebGIS矢量地圖的海域管理平臺網絡運行性能和效率進行比較，前者采用靜態瓦片方式對大數據清晰電子海圖(JPG圖片格式)進行加載，后者采用SQL Server 2008空間數據庫Geometry(幾何)類型的矢量地圖。兩者均為提供的南通六縣一市的底圖數據，均在相同地理區域下圖像數據總大小具有可比性；兩個平臺部署在同一臺機器的兩個不同端口，在同一段時間內監測這兩個端口的流量和響應時間，在相同時間內流量具有可比性。實例測試結果如表1所示。

表1 RIA與WebGIS技術應用的性能測試比較

由表1可以看出，雖然本系統利用RIA技術的電子海圖是后者基于WebGIS的矢量地圖數據量要高出幾十倍，但其網絡傳輸字節數量和平均總傳輸速率均比WebGIS矢量地圖的應用要高出近3倍，實測頁面響應時間得到較大提高。由此可以看出利用RIA開發的平臺具有較好的可行性和較高網絡運行效率。

5 結束語

本文采用VS.NET開發平臺，后臺采用SQL Server數據庫，利用微軟最新基于Silverlight的RIA核心的DeepZoom圖像處理技術等關鍵技術，設計了電子海圖的邏輯坐標與經緯度坐標之間的換算算法，實現了全新的海洋環境監測信息平臺。實例測試結果表明，該信息平臺與現有的基于WebGIS的矢量地圖應用系統相比，其圖像傳輸速率與頁面響應時間明顯提高。該系統已成功應用于南通市海洋環境監視預報中心，系統集海洋環境監測信息的記錄、傳輸、存儲、提取和表述于一體，具有處理、管理和分析數據能力。系統的實現極大地提高了工作人員檢索統計監測數據信息的效率，并利用電子海圖作為表現形式，動態直觀圖文并茂地展示海洋環境監測數據等多媒體信息，從而更好地為領導制定海洋環境監測等相關政策提供輔助決策。

[1]Fu Yanga,Zeng Guangming,Du Chunyan.Spatial analyzing system for urban land-use management based on GIS and multi-criteria assessment modeling[J].Progress in Natural Science,2008,18(10):1279-1284.

[2]LI Shi Jun,Hong Hui,Liu Pei.A general standard of WebGIS integration[J].Wuhan University Journal of Natural Sciences,2009,14(2):125-128.

[3]Xi Yantao,Wu Jiangguo.Applicationof GML and SVG in the development of WebGIS[J].Journal of China University of Mining&Technology,2008,18(1):140-143.

[4]周牧,談曉軍,左翔.基于AJAX和XML的WebGIS系統研究[J].計算機工程,2009,35(13).271-273.

[5]肖杰,陳翔,何海江,等.基于AJAX和Struts的Web應用的設計與實現[J].計算機工程與設計,2009,30(8),1934-1937.

[6]范阿南,朱教君,張忠輝.基于AJAX的WebGIS應用[J].遼寧工程技術大學學報(自然科學版),2010,29(6):494-497.

[7]希賽網.RIA技術專題[EB/OL].http://tech.csai.cn/zt/RIA/index.htm,2010.

[8]Preciado J C,Linaje M,Sanchez F,et al.Necessity of methodologies to model rich internet applications[C].Proceedings of the Seventh IEEE International Symposium on Web Site Evolution,2005:7-13.

[9]程國雄,胡世清.基于Silverlight的RIA系統架構與設計模式研究[J].計算機工程與設計,2010,31(8):1706-1709.

[10]劉俊,譚建軍,邵長高.基于Flex的WebGIS框架設計與實現[J].計算機工程,2010,36(10):242-244.

[11]周紹梅,王洪磊,劉小東.JSF和JavaFX技術在RIA開發中的應用[J].計算機應用與軟件,2009,26(2):118-119.

[12]丁士峰.精通Silverlight:RIA開發技術詳解[M].北京:人民郵電出版社,2008.

[13]王天寶,王爾琪,盧浩.基于Silverlight的WebGIS客戶端技術與應用試驗[J].地球信息科學學報,2010,12(1):69-74.

[14]嚴商,黃樟燦.WCF:Windows平臺新一代通訊基礎研究與分析[J].計算機與數字工程,2008(4):86-89.

[15]王珊,薩師煊.數據庫系統概論[M].4版.北京:高等教育出版社,2006.