Web前端技術(shù)在浙江氣象防災(zāi)減災(zāi)決策服務(wù)平臺中的應(yīng)用

曾悠 楊明

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

1 引言

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

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

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

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

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

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

2.2 前端功能組成

本平臺前端功能由三大模塊組成：天氣快報、天氣實況和專題服務(wù)。功能圖譜如圖2所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表1：氣象數(shù)據(jù)分類說明

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)論

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