王程程+吳天亭+范玉鑫

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

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

中圖分類號 P456.7 文獻(xiàn)標(biāo)識碼 A 文章編號 1007-5739（2017）10-0198-02

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

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

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

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

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

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

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

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

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

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

3.1 jQuery

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

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

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

3.2 MVC

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

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

3.3 后臺搭建

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

4 結(jié)語

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

5 參考文獻(xiàn)

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

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

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

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