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

曾 悠，楊 明

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

0 引言

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

1 框架設(shè)計

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

Fig.1 Functional architecture of visual application components圖1 可視化應(yīng)用組件功能架構(gòu)

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

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

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

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

2 關(guān)鍵技術(shù)分析

2.1 消息機制模型

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

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

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

2.2 邏輯結(jié)構(gòu)

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

Fig.3 Logical structure of visual application components圖3 可視化應(yīng)用組件邏輯結(jié)構(gòu)

3 基于分布式技術(shù)的可視化組件

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

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

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

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

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

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

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

3.3 基于HTML5 的Web 可視化技術(shù)

HTML5 提供的HTML、CSS、JavaScript 和SVG 等技術(shù)應(yīng)用廣泛，為實現(xiàn)高效的數(shù)據(jù)可視化提供了更多機遇。SVG是基于XML 的一種描述二維矢量圖形格式，因為是矢量的，所以被放大后也不會失真，這對于可視化效果適配不同屏幕大小的終端來說非常有優(yōu)勢［25］。此外，SVG 圖形可以任意組裝，通過CSS 和JavaScript 對圖形進行修改［26］。基于HTML5 提供的API，數(shù)據(jù)經(jīng)過預(yù)處理后由服務(wù)端以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 為測試工具，從平臺響應(yīng)速度方面對氣象數(shù)據(jù)可視化應(yīng)用組件進行評估，測試10 次請求下的響應(yīng)速度并求出平均響應(yīng)時間，實驗結(jié)果如圖5 所示。

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

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

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

5 應(yīng)用效果

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

6 結(jié)語

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