MVC 模式在數(shù)據(jù)可視化組件中的研究與應用

曾 悠，楊 明

（浙江省氣象信息網(wǎng)絡中心，浙江杭州 310017）

0 引言

氣象數(shù)據(jù)分析與應用成為大數(shù)據(jù)研究的熱門領域之一［1］。在海量氣象數(shù)據(jù)挖掘基礎上，氣象數(shù)據(jù)的可視化將極大提高數(shù)據(jù)分析效率，而前端的架構設計對于優(yōu)化可視化效果及后續(xù)工作的高效開展具有十分重要的意義［2-6］。目前氣象可視化系統(tǒng)多基于Silverlight 和WebGIS 技術［7-10］，但Silverlight 使用前必須安裝插件且使用成本較高，基于WebGIS 的可視化功能往往不能單獨使用；采用基于GIS 的ArcEngine 模式開發(fā)的可視化地圖組件［11-12］具有針對性和專屬性，不便于移植到其他系統(tǒng)或平臺。20 世紀70 年代，MVC 模式在Smalltalk-80 的GUI 設計中被提出［13］。本文基于氣象云平臺的數(shù)據(jù)可視化組件，采用MVC（Model-View-Controller）設計模式［14］，分析整合多種氣象數(shù)據(jù)源，以組件形式提供氣象數(shù)據(jù)綜合展示、氣象設備監(jiān)控預警、氣象應用在線分享等功能，實現(xiàn)氣象數(shù)據(jù)的有效可視化，具有較強的可擴展性和可移植性。

1 框架設計

面向復雜多維的氣象數(shù)據(jù)和可視化需求，本文數(shù)據(jù)可視化組件采用MVC 三層框架模式設計思想?？蚣艿囊晥D層、數(shù)據(jù)模型層和邏輯控制層相互獨立，將不同的功能分配給相應的層實現(xiàn)。視圖（View）主要用于實現(xiàn)頁面展示，數(shù)據(jù)模型（Model）負責數(shù)據(jù)的訪問和調用，邏輯控制層（Controller）實現(xiàn)組件系統(tǒng)的業(yè)務邏輯、協(xié)調視圖與模型［15-19］，應用服務則在三者基礎上實現(xiàn)，其功能架構如圖1所示。三層架構模式實現(xiàn)的系統(tǒng)能極大降低程序間的耦合性，增強組件的伸縮性、穩(wěn)定性，便于組件擴展和維護［20］。

Fig.1 Functional architecture of visual application components圖1 可視化應用組件功能架構

（1）視圖層。是用戶和組件系統(tǒng)的交互窗口，負責獲取用戶指示和顯示控制層反饋的數(shù)據(jù)信息，采用HTML5、CSS3 和JavaScript 等Web 前端技術完成應用組件的內容布局，結合地圖模塊的WebGIS 技術實現(xiàn)在互聯(lián)網(wǎng)平臺上進行地理信息發(fā)布、交流協(xié)作和數(shù)據(jù)共享。在視圖層使用Ja?vaScript 和WebGIS 技術開發(fā)交互界面，不但能支撐多種數(shù)據(jù)類型的分析展示，提供圖表、地圖、空間數(shù)據(jù)等多種可視化風格，實現(xiàn)用戶自定義的操作界面風格制定，還能適配PC 端、移動端和大屏等多種分辨率的本地部署和多終端展示。

（2）數(shù)據(jù)模型層。以分布式云存儲技術、數(shù)據(jù)中心技術為支撐，負責數(shù)據(jù)的存取，包括數(shù)據(jù)表的插入、更新、刪除、查詢等操作，為控制層提供數(shù)據(jù)服務。數(shù)據(jù)模型層主要由數(shù)據(jù)持久化模塊、數(shù)據(jù)訪問模塊、數(shù)據(jù)消息模塊、數(shù)據(jù)處理和數(shù)據(jù)服務模塊組成。根據(jù)業(yè)務邏輯訪問相應的氣象數(shù)據(jù)，通過數(shù)據(jù)處理模塊進行數(shù)據(jù)轉換，提供通用的JSON、Txt、二進制流等數(shù)據(jù)格式以及相應數(shù)據(jù)接口［21］，兼容多種數(shù)據(jù)格式，實現(xiàn)與各氣象數(shù)據(jù)應用平臺無縫對接。

（3）邏輯控制層。為系統(tǒng)核心層，負責可視化的業(yè)務邏輯實現(xiàn)、消息控制和數(shù)據(jù)通信等。主要由數(shù)據(jù)通信模塊、消息控制模塊、業(yè)務組件管理模塊組成。從視圖層獲取用戶指示后，依據(jù)業(yè)務規(guī)則處理數(shù)據(jù)，調用數(shù)據(jù)模型層提供的接口完成數(shù)據(jù)的存儲和訪問，通過消息控制模塊實現(xiàn)業(yè)務邏輯管控，為視圖層提供豐富的業(yè)務邏輯組件。邏輯控制層提供多種通用的數(shù)據(jù)解析顯示方式和圖表面板，用戶可根據(jù)自身業(yè)務需求和業(yè)務邏輯獲取數(shù)據(jù)和圖表。

應用服務采用分布式方式為業(yè)務應用提供服務，主要分為地圖應用服務、圖表應用服務、專題應用服務、可視化組件應用服務等。采取在線和離線方式為業(yè)務系統(tǒng)提供應用服務，用戶也可創(chuàng)建個性化的氣象應用服務并發(fā)布及分享。

2 關鍵技術分析

2.1 消息機制模型

氣象可視化內部采用同步和異步兩種消息機制混合方式，按照系統(tǒng)內部與外部劃分邊界，即可視化服務內部采用同步工作流消息方式，與外部請求交互采用異步的消息方式。整個氣象可視化服務組件內部分為執(zhí)行體和消息體兩個實體。

為了提高用戶體驗，在面向用戶的可視化組件視圖層采用異步的消息方式響應用戶的可視化請求，并在向業(yè)務邏輯層發(fā)送業(yè)務處理請求的同時響應用戶的其他可視化請求。在業(yè)務邏輯層，由于可視化請求邏輯處理采用工作流方式，每項任務都是按照可視化業(yè)務邏輯按序執(zhí)行，所以采用消息同步方式。同樣，在數(shù)據(jù)模型層采用同步的消息方式，而在數(shù)據(jù)模型層請求外部數(shù)據(jù)服務時采用異步消息機制。消息機制模型如圖2 所示。采用混合消息機制模型可實現(xiàn)氣象可視化組件的有序服務，提高用戶體驗和響應效率，有利于擴展新功能、消除并發(fā)訪問高峰、提高系統(tǒng)可用性。

Fig.2 Synchronous and asynchronous message mechanism model圖2 同步、異步消息機制模型

2.2 邏輯結構

可視化應用組件建立在浙江省氣象數(shù)字化平臺的數(shù)據(jù)平臺和地圖模塊之上，提供通用的數(shù)據(jù)格式，獲取并解析氣象站點、網(wǎng)格、圖片、文本等多種格式數(shù)據(jù)，支持本地部署和多終端展示，能自適應PC、大屏和移動端等屏幕分辨率，做到向下兼容氣象云大數(shù)據(jù)平臺，向上自適應多種屏幕分辨率，其邏輯結構如圖3 所示。

Fig.3 Logical structure of visual application components圖3 可視化應用組件邏輯結構

3 基于分布式技術的可視化組件

3.1 可視化組件開發(fā)技術

基于分布式服務思想，氣象數(shù)據(jù)可視化組件開發(fā)將業(yè)務和可復用服務分離，方便部署且易于氣象產(chǎn)品的二次開發(fā)和移植。采用分布式服務架構方式開發(fā)可視化組件，有利于適應海量數(shù)據(jù)存儲、響應速度、后期業(yè)務擴展等需求［22］，其邏輯結構如圖4 所示。

Fig.4 Logical structure of meteorological data visualization component圖4 氣象數(shù)據(jù)可視化組件邏輯結構

氣象數(shù)據(jù)可視化組件以氣象云大數(shù)據(jù)平臺為數(shù)據(jù)支撐，利用分布式云數(shù)據(jù)存儲技術，結合地圖服務和氣象業(yè)務需求，形成各個功能獨立的組件服務，以滿足各氣象業(yè)務系統(tǒng)、各終端展示及其他面對公眾的氣象服務需求［23-24］。

氣象數(shù)據(jù)可視化組件負責提供不同種類的可視化組件服務，包括地圖服務中的地圖引擎、地圖操作，負責地圖的顯示、加載與操作；氣象渲染、格點訂正、分析圖表、氣象編碼、抽取引擎、智能挖掘則屬于基礎的氣象數(shù)據(jù)服務，負責數(shù)據(jù)編碼、圖層渲染、圖表生成等工作；前端模板組件負責直接與用戶交互的顯示模塊，如提供多種數(shù)據(jù)圖表的樣式以及界面外觀等。以分布式服務架構思想將這些組件服務作為中間件按需進行自由組合、相互搭配使用，更靈活、便捷地為氣象系統(tǒng)提供服務，還可為新業(yè)務的二次開發(fā)提供獨立調用、可重用的組件服務。

3.2 可視化數(shù)據(jù)插值方法

本文可視化數(shù)據(jù)插值采用雙線性插值方法，與其他的鄰近插值、雙三次插值方法相比，其運算速度和插值效果更優(yōu)。其原理是利用源圖像中每個點周圍4 個真實點的像素值來共同生成目標圖像中對應點的像素值。在實際算法中，對齊源圖像和目標圖像的幾何中心，以及使用整數(shù)代替浮點運算，能加速與優(yōu)化算法。

3.3 基于HTML5 的Web 可視化技術

HTML5 提供的HTML、CSS、JavaScript 和SVG 等技術應用廣泛，為實現(xiàn)高效的數(shù)據(jù)可視化提供了更多機遇。SVG是基于XML 的一種描述二維矢量圖形格式，因為是矢量的，所以被放大后也不會失真，這對于可視化效果適配不同屏幕大小的終端來說非常有優(yōu)勢［25］。此外，SVG 圖形可以任意組裝，通過CSS 和JavaScript 對圖形進行修改［26］?；贖TML5 提供的API，數(shù)據(jù)經(jīng)過預處理后由服務端以JA?SON 格式傳輸給瀏覽器，在客戶端實現(xiàn)繪制，完成氣象數(shù)據(jù)的可視化過程。

4 性能分析

4.1 數(shù)據(jù)說明

本文選取部分具有代表性的數(shù)據(jù)為例，其中近24h 降水量為站點數(shù)據(jù)，10UV 分量為網(wǎng)格類數(shù)據(jù)，雷達拼圖和FY4A 為柵格類數(shù)據(jù)，如表1 所示。

Table 1 Data description表1 數(shù)據(jù)說明

4.2 性能分析

以Jemeter 為測試工具，從平臺響應速度方面對氣象數(shù)據(jù)可視化應用組件進行評估，測試10 次請求下的響應速度并求出平均響應時間，實驗結果如圖5 所示。

Fig.5 Comparison of test results of various data responses圖5 各類數(shù)據(jù)響應測試結果對比

圖5 中橫軸表示實驗次數(shù)，縱軸為響應速度，單位為ms（毫秒）。圖5（a）中近24h 降水量在前5 次接近平均值，在第6 次時耗時最長接近80ms，第8 次達到最小值接近10ms，平均速度30ms，總體表現(xiàn)良好；圖5（b）展示了雷達拼圖產(chǎn)品響應測試結果，是4 類產(chǎn)品中響應速度最穩(wěn)定的，幾乎都在12ms 左右，表現(xiàn)最好；圖5（c）為10UV 分量響應測試結果，最低響應速度50ms，最慢約95ms，平均68ms，響應速度的穩(wěn)定性稍遜于其他3 類產(chǎn)品；圖5（d）為FY4A 產(chǎn)品響應測試結果，稍優(yōu)于10UV 分量，最快反應速度約18ms，平均值為30ms。

實驗表明，浙江氣象數(shù)字化平臺可視化應用組件在數(shù)據(jù)請求響應方面表現(xiàn)良好，具有較快的響應速度、渲染速度，符合用戶預期。

5 應用效果

氣象可視化組件現(xiàn)已應用于浙江臺風網(wǎng)、浙江氣象防災減災決策服務平臺等氣象業(yè)務系統(tǒng)，運行情況良好，對各類數(shù)據(jù)處理穩(wěn)定，數(shù)據(jù)顯示層次分明、準確流暢，用戶體驗較好，達到了良好的展示效果。

6 結語

本文運用MVC 三層分布式組件開發(fā)技術對多層氣象數(shù)據(jù)可視化實現(xiàn)進行了研究，介紹了氣象數(shù)據(jù)可視化的功能架構，對可視化組件的混合消息機制、氣象數(shù)據(jù)可視化組件開發(fā)技術以及前端實現(xiàn)技術等關鍵技術進行了探究。實際應用表明，本文的氣象數(shù)據(jù)可視化方案達到了應用要求，在一定程度上滿足了氣象業(yè)務對可視化組件靈活性、可移植性要求，為其他業(yè)務提供了便捷，為氣象業(yè)務可視化建設提供了前瞻性的試驗和探索。隨著氣象業(yè)務的發(fā)展，對數(shù)據(jù)可視化要求會逐步提高，該組件功能也將不斷迭代更新與完善。