EC模式數值預報可視化系統設計

王程程+吳天亭+范玉鑫

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

關鍵詞 EC模式；jQuery；大數據；可視化；氣象；系統設計

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

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

1 氣象大數據可視化現狀

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

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

2 EC模式可視化系統總體設計

數據來源是中國氣象局衛星下發的EC粗網格和EC細網格數據，通過JAVA程序對EC數據進行格式處理，處理成前端javaScript可以使用的json格式的數據。然后利用HTML5技術在網頁上顯示風場、氣壓、濕度、溫度等要素，并且可以將溫度和風場、氣象和風場結合到一起顯示，真正實現了可視化，便于預報員更好地分析未來的天氣情況。

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

3 HTML5和javaScript相關技術

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

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

3.1 jQuery

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

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

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

3.2 MVC

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

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

3.3 后臺搭建

本系統的后臺使用現在前端開發使用比較廣泛的node.js，node.js的優點是本身就是用JavaScript開發的，所以在HTML5和JavaScript支撐的系統當中，既能保持很好的穩定性，又能保持程序運行有較好的速度。而且node.js本身功能也十分強大，便于程序在開發過程中的調試和程序開發結束后的測試。

4 結語

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

5 參考文獻

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

[2] 巴特爾.基于NodeJS的理財應用的設計與實現[D].長春：吉林大學，2014.

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

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