曾悠 楊明

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

1 引言

科學(xué)技術(shù)日新月異，但氣象災(zāi)害難以精準(zhǔn)預(yù)測(cè)，對(duì)人類(lèi)的生命財(cái)產(chǎn)安全仍存在較大威脅[1]，近30年，全球84%的經(jīng)濟(jì)損失是由氣象災(zāi)害造成[2]，因而防災(zāi)減災(zāi)工作在氣象服務(wù)工作中始終占有不可忽視的地位。各地氣象部門(mén)對(duì)防災(zāi)減災(zāi)預(yù)警和決策等方面都已有很多深入的探討研究[3-6]，但現(xiàn)階段依然存在防災(zāi)減災(zāi)體系不完善、互聯(lián)網(wǎng)技術(shù)應(yīng)用不夠[7]、氣象防災(zāi)減災(zāi)工作還未與先進(jìn)的技術(shù)相結(jié)合等問(wèn)題[8]。如今隨著信息技術(shù)的發(fā)展，互聯(lián)網(wǎng)已成為人們工作和生活不可分割的一部分，而Web前端頁(yè)面則是人們獲取信息最主要的途徑，Web前端技術(shù)經(jīng)歷了不斷的更新迭代，在功能和效果上都有了日益精湛的表現(xiàn)，能幫助業(yè)務(wù)工作者從海量氣象數(shù)據(jù)中快速獲取有效信息，并據(jù)此進(jìn)行氣象災(zāi)害分析和決策。因此，本文以浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)的建設(shè)為契機(jī)，探討了Web前端技術(shù)在平臺(tái)中的應(yīng)用，以高效的可視化手段展示氣象產(chǎn)品信息，為氣象部門(mén)降低災(zāi)害風(fēng)險(xiǎn)、政府部門(mén)提高“防災(zāi)、抗災(zāi)、救災(zāi)”氣象決策服務(wù)能力提供有力的支撐。

2 系統(tǒng)架構(gòu)與前端功能組成

從梅汛期、臺(tái)汛期的高溫、強(qiáng)降水，到嚴(yán)寒霜凍對(duì)茶葉的凍害[9]，在防范氣象災(zāi)害帶來(lái)的人身威脅和經(jīng)濟(jì)損失方面，氣象部門(mén)取得了不菲的成績(jī)。浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)依托于浙江氣象大數(shù)據(jù)云試驗(yàn)平臺(tái)，提供了PC 端與浙政釘移動(dòng)端兩種使用方式，方便業(yè)務(wù)人員、決策部門(mén)便捷且有針對(duì)性地查詢信息，獲取準(zhǔn)確快捷、豐富多樣、靈活擴(kuò)展的氣象服務(wù)。

2.1 系統(tǒng)架構(gòu)

浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)融合了浙江省級(jí)氣象部門(mén)的氣象預(yù)警、智能網(wǎng)格預(yù)報(bào)、臺(tái)風(fēng)、梅雨等20 項(xiàng)專(zhuān)題服務(wù)，為政府決策和省市縣三級(jí)氣象部門(mén)提供了氣象監(jiān)測(cè)、預(yù)報(bào)預(yù)警等氣象決策服務(wù)產(chǎn)品，形成了全面統(tǒng)一、豐富多樣的氣象防災(zāi)減災(zāi)決策平臺(tái)，其系統(tǒng)架構(gòu)如圖1所示。

圖1：浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)系統(tǒng)架構(gòu)

2.2 前端功能組成

本平臺(tái)前端功能由三大模塊組成：天氣快報(bào)、天氣實(shí)況和專(zhuān)題服務(wù)。功能圖譜如圖2所示。

圖2：浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)前端功能圖譜

（1）天氣快報(bào)模塊主要提供預(yù)警狀態(tài)提醒和查看、全省氣象預(yù)報(bào)以及各類(lèi)氣象快報(bào)、臺(tái)風(fēng)報(bào)告單等內(nèi)容。正在預(yù)警模塊結(jié)合地理信息實(shí)時(shí)顯示預(yù)警發(fā)生的地點(diǎn)和類(lèi)型；每日監(jiān)測(cè)預(yù)報(bào)預(yù)警主要統(tǒng)計(jì)近24 小時(shí)降水排名、面雨量排名及其24 小時(shí)預(yù)報(bào)數(shù)據(jù)、預(yù)警統(tǒng)計(jì)信息；日常預(yù)報(bào)包含1-72 小時(shí)雨量預(yù)報(bào)、未來(lái)24 小時(shí)及未來(lái)15日天氣預(yù)報(bào)、短期天氣和沿海海面風(fēng)力預(yù)報(bào)、以及中期天氣趨勢(shì)預(yù)報(bào)；氣象信息快報(bào)是對(duì)過(guò)去一周天氣狀況的回顧和未來(lái)一周的展望；重要天氣快報(bào)則是對(duì)重要天氣狀況的總結(jié)。

（2）天氣實(shí)況模塊主要提供浙江當(dāng)前天氣實(shí)況、降水、大風(fēng)、氣溫統(tǒng)計(jì)以及雷達(dá)、衛(wèi)星、自動(dòng)站數(shù)據(jù)。其中，降水、大風(fēng)、氣溫模塊分別展示了各氣象要素近1-24 小時(shí)的分布圖和站點(diǎn)排名情況。

（3）專(zhuān)題服務(wù)模塊主要針對(duì)浙江省的災(zāi)害風(fēng)險(xiǎn)，設(shè)計(jì)了梅雨、臺(tái)風(fēng)、降雪、高溫干旱和霧霾五個(gè)氣象專(zhuān)題，每個(gè)專(zhuān)題則相對(duì)全面地展示相關(guān)各氣象要素，便于氣象決策者在不同的時(shí)期更清晰的關(guān)注不同的專(zhuān)題。

3 Web前端關(guān)鍵技術(shù)

現(xiàn)代信息的發(fā)展對(duì)于Web 承載信息的多樣化有了越來(lái)越高的要求，而Web前端頁(yè)面作為系統(tǒng)與用戶交互的關(guān)鍵連接，能賦予信息更生動(dòng)的表達(dá)方式、內(nèi)容瀏覽更舒適的體驗(yàn)，因而Web前端開(kāi)發(fā)對(duì)于整個(gè)系統(tǒng)來(lái)說(shuō)也尤為關(guān)鍵。

3.1 MVC三層框架設(shè)計(jì)模式

MVC 即“Model-View-Controller”，最初廣泛應(yīng)用于軟件開(kāi)發(fā)中[10]，但隨著Web前端的功能越來(lái)越豐富、復(fù)雜程度更高，Web前端不再僅僅是顯示信息的作用，更多的時(shí)候也要擔(dān)負(fù)數(shù)據(jù)處理等復(fù)雜工作，MVC 設(shè)計(jì)模式在前端技術(shù)中應(yīng)用的優(yōu)點(diǎn)愈發(fā)明顯。浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)MVC 框架設(shè)計(jì)模式如圖3所示。

圖3：浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)Web前端MVC 三層框架設(shè)計(jì)模式

（1）Model 即模型層，負(fù)責(zé)對(duì)業(yè)務(wù)邏輯進(jìn)行描述、對(duì)數(shù)據(jù)訪問(wèn)與調(diào)用，以及相對(duì)于后端來(lái)說(shuō)稍簡(jiǎn)單一些的數(shù)據(jù)處理等工作，也是Web前端讀取后端數(shù)據(jù)庫(kù)、獲取地圖數(shù)據(jù)等建立連接的通道。

（2）View 即視圖層，主要負(fù)責(zé)前端頁(yè)面的顯示工作，包括信息的排布、顏色的搭配等有效的可視化表達(dá)，是與用戶直接交互的模塊，一定程度上決定了系統(tǒng)在用戶心中的直觀感受。

（3）Controller 即控制層，起雙向調(diào)控的作用，負(fù)責(zé)確保Model 和View 層的工作流程保持一致。一方面在View 層收集用戶的指令，發(fā)送給Model 層進(jìn)行處理，另一方面告知View 層從Model 層獲得更新數(shù)據(jù)和結(jié)果，并做出相應(yīng)改變反饋到用戶端。

通過(guò)決策服務(wù)平臺(tái)Web 首頁(yè)點(diǎn)擊“降水統(tǒng)計(jì)”，控制層傳達(dá)指令到模型層，模型層則從后端調(diào)取數(shù)據(jù)反饋給視圖層，最后視圖層按規(guī)則將雨量分布圖、雨量排名等數(shù)據(jù)展現(xiàn)出來(lái)，就是最終用戶看到的頁(yè)面。

3.2 氣象數(shù)據(jù)組織

氣象資料種類(lèi)繁多，數(shù)據(jù)體量大，根據(jù)氣象數(shù)據(jù)結(jié)構(gòu)特點(diǎn)，通常將其分為四類(lèi)：離散型數(shù)據(jù)、網(wǎng)格化數(shù)據(jù)、柵格類(lèi)數(shù)據(jù)和文件類(lèi)型，如表1所示。

表1：氣象數(shù)據(jù)分類(lèi)說(shuō)明

離散型數(shù)據(jù)通常指站點(diǎn)數(shù)據(jù)，包括從氣象地面自動(dòng)觀測(cè)站或者外部門(mén)單位獲取的降水、溫度、氣壓、大風(fēng)等實(shí)時(shí)和歷史數(shù)據(jù)，以及決策服務(wù)平臺(tái)的氣象預(yù)報(bào)預(yù)警、降水統(tǒng)計(jì)等數(shù)據(jù)，涵蓋了經(jīng)緯度、觀測(cè)時(shí)間等空間和時(shí)間信息。網(wǎng)格化數(shù)據(jù)是指經(jīng)過(guò)插值處理過(guò)的網(wǎng)格化產(chǎn)品數(shù)據(jù)，如智能網(wǎng)格預(yù)報(bào)的降水、溫度、大風(fēng)、能見(jiàn)度、相對(duì)濕度等預(yù)報(bào)產(chǎn)品數(shù)據(jù)。常用的柵格類(lèi)數(shù)據(jù)一般指衛(wèi)星云圖、雷達(dá)拼圖等產(chǎn)品數(shù)據(jù)，包含了瓦片數(shù)據(jù)[11]與時(shí)間等信息。還包括一些文件類(lèi)的數(shù)據(jù)，如重要天氣快報(bào)、氣象決策服務(wù)材料等。

在氣象組織方式方面，可分為關(guān)系型、半結(jié)構(gòu)和非結(jié)構(gòu)數(shù)據(jù)組織模型三類(lèi)。其中，關(guān)系型數(shù)據(jù)是以行和列的對(duì)應(yīng)關(guān)系來(lái)組織數(shù)據(jù)的；非結(jié)構(gòu)數(shù)據(jù)一般不規(guī)則，可以用關(guān)鍵字段而非簡(jiǎn)單二維表來(lái)組織存儲(chǔ)數(shù)據(jù)；半結(jié)構(gòu)數(shù)據(jù)特點(diǎn)介于前二者之間，可用節(jié)點(diǎn)的方式來(lái)對(duì)不同類(lèi)的數(shù)據(jù)進(jìn)行組織。

3.3 氣象數(shù)據(jù)服務(wù)接口

浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)數(shù)據(jù)服務(wù)接口是基于浙江省氣象云試驗(yàn)平臺(tái)數(shù)據(jù)環(huán)境，通過(guò)不同的可視化方式建立不同的可視化訪問(wèn)方式，針對(duì)不同類(lèi)型的資料建立相應(yīng)的可視化訪問(wèn)接口。接口調(diào)用方法如表2所示。

表2：浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)可視化接口調(diào)用方法

獲取離散類(lèi)、網(wǎng)格類(lèi)、柵格類(lèi)等數(shù)據(jù)可視化接口后得到返回的不同的可視化數(shù)據(jù)格式，包括Json、XML、Stream 和Txt 等。每個(gè)可視化訪問(wèn)接口可以提供一個(gè)或多個(gè)功能接口，而各個(gè)功能接口則有相應(yīng)的檢索參數(shù)，例如時(shí)間、經(jīng)緯度、站點(diǎn)號(hào)等，實(shí)現(xiàn)按需查找和獲取數(shù)據(jù)。

3.4 平臺(tái)PC版與手機(jī)浙政釘版

浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)有電腦PC 版和用于手機(jī)的浙政釘兩個(gè)版本，利用HTML5 技術(shù)，平臺(tái)優(yōu)化了網(wǎng)頁(yè)自適應(yīng)問(wèn)題，即考慮到網(wǎng)頁(yè)在不同設(shè)備中打開(kāi)能適應(yīng)當(dāng)前屏幕大小，呈現(xiàn)最佳效果。PC 版本功能更全，展示效果更豐富，如圖4所示。

圖4：浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)梅雨專(zhuān)題降水實(shí)況

相較于PC 版，浙政釘版作了相應(yīng)的精簡(jiǎn)，如圖5所示。

圖5：浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)手機(jī)浙政釘版降水實(shí)況頁(yè)面

手機(jī)移動(dòng)版強(qiáng)化焦點(diǎn)、弱化附屬信息，把關(guān)注點(diǎn)放在重要?dú)庀笮畔⑸?，在用戶使用手機(jī)快速瀏覽的場(chǎng)景下，也能使其關(guān)注到主要信息，有助于信息的準(zhǔn)確傳達(dá)。

4 結(jié)論

防災(zāi)減災(zāi)在氣象業(yè)務(wù)工作中占有重要地位，特別對(duì)于臨海省份浙江尤為重要。浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺(tái)利用HTML5 等Web前端技術(shù)，采用MVC 框架，根據(jù)氣象數(shù)據(jù)特點(diǎn)設(shè)計(jì)相應(yīng)接口等等，有效改善了數(shù)據(jù)信息可視化的展示效果，加快了數(shù)據(jù)渲染和網(wǎng)站反應(yīng)速度，優(yōu)化了用戶體驗(yàn)，取得了良好的應(yīng)用效果。但系統(tǒng)依然存在不足之處，如界面工具類(lèi)按鈕太多，呈現(xiàn)方式不夠一目了然，圖表的展現(xiàn)對(duì)于重點(diǎn)信息還不夠突出等問(wèn)題。在今后的工作中，還需要對(duì)平臺(tái)前端的信息展示方式和界面設(shè)計(jì)進(jìn)一步改良和優(yōu)化。