EC模式數(shù)值預(yù)報可視化系統(tǒng)設(shè)計

王程程+吳天亭+范玉鑫

摘要 本文利用javaScript技術(shù)，設(shè)計了一款歐洲細網(wǎng)格數(shù)據(jù)氣象大數(shù)據(jù)可視化系統(tǒng)，它是一個以中國氣象局下發(fā)的EC模式數(shù)據(jù)為數(shù)據(jù)源的各主要氣象要素的大數(shù)據(jù)可視化系統(tǒng)。jQuery作為程序的異步處理函數(shù)庫，Angular.js作為MVC函數(shù)庫。

關(guān)鍵詞 EC模式；jQuery；大數(shù)據(jù)；可視化；氣象；系統(tǒng)設(shè)計

中圖分類號 P456.7 文獻標識碼 A 文章編號 1007-5739（2017）10-0198-02

隨著氣象事業(yè)的發(fā)展，數(shù)據(jù)預(yù)報的精度越來越準確，特別是在氣象預(yù)報當中的EC模式數(shù)據(jù)精度更是越來越高，但是一直沒有一個直觀的可視化系統(tǒng)，可以幫助預(yù)報員在宏觀上對數(shù)值預(yù)報結(jié)果有一個直觀的分析。本文研究的EC模式數(shù)值預(yù)報可視化系統(tǒng)解決了這個問題。無論是數(shù)據(jù)量較小的EC粗網(wǎng)格數(shù)據(jù)還是數(shù)據(jù)量較大的EC細網(wǎng)格數(shù)據(jù)，本系統(tǒng)都可以直觀利用網(wǎng)頁的動畫效果實現(xiàn)各要素的全球化展示，特別是風場數(shù)據(jù)在可視化當中風的強度和風的速度，準確而直觀。在吉林省的氣象預(yù)報業(yè)務(wù)當中得到了廣泛應(yīng)用。

1 氣象大數(shù)據(jù)可視化現(xiàn)狀

枯燥的數(shù)據(jù)在氣象預(yù)報當中經(jīng)常使用，很早就有氣象人員提出了對氣象要素進行可視化研究，但是一般局限于實時數(shù)據(jù)和歷史數(shù)據(jù)。對于在預(yù)報當中非常有用的數(shù)值預(yù)報數(shù)據(jù)的可視化一直研究較少，特別是對于EC模式可視化研究，目前國內(nèi)還不多見。

關(guān)于歷史數(shù)據(jù)可視化研究，目前英國的氣象工作者走在前列，特別是歷史數(shù)據(jù)中的溫度要素，英國氣象開發(fā)者開發(fā)了一個關(guān)于英國氣象溫度歷史的網(wǎng)頁，在該網(wǎng)頁上不僅能夠用可視化的方式展示1911—2012年整個氣象史的數(shù)據(jù)情況，還可以對英國這些年的溫度情況進行比較和統(tǒng)計分析。對于英國曾經(jīng)在哪些年出現(xiàn)過氣象災(zāi)害也會標注，通過可視化的溫度數(shù)據(jù)也利于找到溫度和氣象災(zāi)害的關(guān)系。100年的歷史僅僅用一張可交互的D3圖形就清晰明了地展現(xiàn)出來（圖1）。

2 EC模式可視化系統(tǒng)總體設(shè)計

數(shù)據(jù)來源是中國氣象局衛(wèi)星下發(fā)的EC粗網(wǎng)格和EC細網(wǎng)格數(shù)據(jù)，通過JAVA程序?qū)C數(shù)據(jù)進行格式處理，處理成前端javaScript可以使用的json格式的數(shù)據(jù)。然后利用HTML5技術(shù)在網(wǎng)頁上顯示風場、氣壓、濕度、溫度等要素，并且可以將溫度和風場、氣象和風場結(jié)合到一起顯示，真正實現(xiàn)了可視化，便于預(yù)報員更好地分析未來的天氣情況。

要素的可視化是以風場動畫圖與其他要素的色斑圖結(jié)合為主，并且可以通過時間線做多看72 h后的數(shù)值預(yù)報情況。世界地圖通過將時間地圖的SHP數(shù)據(jù)轉(zhuǎn)化為TOPOJSON數(shù)據(jù)，然后通過網(wǎng)頁將世界地圖放在地球上，這樣可視化過程更為直觀（圖2）。

3 HTML5和javaScript相關(guān)技術(shù)

HTML（HyperText Mark-up Language）是網(wǎng)頁當中的核心部分，舊有的HTML技術(shù)雖然在互聯(lián)網(wǎng)上還在廣泛使用，但是對于現(xiàn)在來說在技術(shù)上已經(jīng)有些不足，無論是CPU占有率還是對插件和圖像的支持都已落后于時代，所以在2006年提出了HTML5對HTML的升級版，相較之前無論是網(wǎng)頁的速度還是對多媒體的支持都有了質(zhì)的飛躍，所以在新研究開發(fā)的網(wǎng)頁應(yīng)用上都已經(jīng)開始普遍使用HTML5技術(shù)。

HTML5和HTML比較再也不用使用FLASH了，新的HTML5支持聲音標簽和視頻標簽。因為不再使用FLASH，HTML5在移動端也更加方便，甚至服務(wù)器上的程序不用更改就直接可以在手機移動端運行。利用HTML5結(jié)合JavaScript處理矢量圖形非常方便，矢量圖形的優(yōu)點是在圖形放大或者縮小時不會影響圖形的清晰度。這個優(yōu)點使氣象數(shù)據(jù)的可視化變得方便和友好。并且利用JavaScript和HTML5的接口，還有很多封裝好的插件供程序使用，開發(fā)起來非常方便[1-2]。

3.1 jQuery

jQuery是使用JavaScript開發(fā)的一個接口。jQuery在開發(fā)過程中能更便捷地處理HTML的文檔，由于它的功能強大，幾乎在所有的前端開發(fā)當中都要使用JavaScript的這個函數(shù)庫。jQuery使用簡單，而且無論是動畫還是CSS操作還是異步處理都能更加方便地實現(xiàn)。

嵌入在HTML頁面的里的JavaScript表達式或語句，不管是作為HTML元素的特性，還是嵌入在頁面中的腳本JavaScript，都是不正確的。這樣做的理由主要基于低耦合，或者叫作分離的思想，這完全雷同于在HTML中把樣式通過CSS從結(jié)構(gòu)中分離出來。對于CSS樣式的應(yīng)用，所帶來的好處，在此不再贅敘[3-4]。

不管是基于樣式還是行為，它們所實現(xiàn)的是與結(jié)構(gòu)的分離，最顯而易見的好處即是可以通過某一語句實現(xiàn)對所選定元素的樣式或行為的統(tǒng)一，而無需針對某一個逐個改變。

3.2 MVC

在WEB開發(fā)中框架的選擇至關(guān)重要，因為框架決定著開發(fā)的難度和軟件維護的成本。本文選擇了在github上開源的AngularJS作為軟件開發(fā)的MVC框架。AngularJS是一個由谷歌開發(fā)的MVC框架，雖然是使用的JavaScript但是不依賴于任何其他的JavaScript框架。因為本系統(tǒng)開發(fā)過程遵循模塊化開發(fā)的原則，所以MVC框架必不可少，只有這樣，以后的擴展和維護才更加方便。

Angular.js的優(yōu)點就是模塊功能強大，自帶豐富的Angular.js指令，是一個比較完善的前MVC端框架，包含模板、數(shù)據(jù)雙向綁定、路由、模塊化、服務(wù)、過濾器、依賴注入等所有功能。唯一的缺點就是代碼體積略大，但是經(jīng)過本系統(tǒng)測試，并不影響前端可視化速度。

3.3 后臺搭建

本系統(tǒng)的后臺使用現(xiàn)在前端開發(fā)使用比較廣泛的node.js，node.js的優(yōu)點是本身就是用JavaScript開發(fā)的，所以在HTML5和JavaScript支撐的系統(tǒng)當中，既能保持很好的穩(wěn)定性，又能保持程序運行有較好的速度。而且node.js本身功能也十分強大，便于程序在開發(fā)過程中的調(diào)試和程序開發(fā)結(jié)束后的測試。

4 結(jié)語

作為輕量級的前端網(wǎng)頁可視化程序，無論是異步處理還是MVC都考慮到后，對于以后的程序擴展非常方便。當增加資料類型或者要素類型時，只要尊重本系統(tǒng)模塊化開發(fā)的規(guī)則，就能在可視化的技術(shù)上走得更遠。因為本系統(tǒng)支持的EC模式數(shù)據(jù)是格點化數(shù)據(jù)，如果是實時或者歷史的站點數(shù)據(jù)，可以通過插值成格點數(shù)據(jù)然后加入到本程序的模塊當中，所以本系統(tǒng)不只是一個EC模式的可視化系統(tǒng)，隨著研究的深入，也將是一個氣象綜合數(shù)據(jù)的可視化系統(tǒng)。

5 參考文獻

[1] 鐘強.Node.JS平臺下Web前端架構(gòu)的研究[J].無線互聯(lián)科技，2013（12）：124.

[2] 巴特爾.基于NodeJS的理財應(yīng)用的設(shè)計與實現(xiàn)[D].長春：吉林大學(xué)，2014.

[3] 荀學(xué)義，孟雪峰，王學(xué)強，等.T639和EC模式對內(nèi)蒙古主要天氣系統(tǒng)的預(yù)報性能檢驗[J].氣象科技，2014（5）：832-838.

[4] 曹增節(jié).關(guān)于可視化EC模式的研究：基于GIS與PIS互嵌集成的EC模式設(shè)計[J].科技通報，2002（4）：310-313.