MVC 模式在數據可視化組件中的研究與應用

曾 悠，楊 明

（浙江省氣象信息網絡中心，浙江杭州 310017）

0 引言

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

1 框架設計

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

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

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

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

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

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

2 關鍵技術分析

2.1 消息機制模型

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

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

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

2.2 邏輯結構

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

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

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

3.1 可視化組件開發技術

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

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

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

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

3.2 可視化數據插值方法

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

3.3 基于HTML5 的Web 可視化技術

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

4 性能分析

4.1 數據說明

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

Table 1 Data description表1 數據說明

4.2 性能分析

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

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

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

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

5 應用效果

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

6 結語

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