Web前端技術在浙江氣象防災減災決策服務平臺中的應用

曾悠 楊明

（浙江省氣象信息網絡中心 浙江省杭州市 310017）

1 引言

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

2 系統架構與前端功能組成

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

2.1 系統架構

浙江氣象防災減災決策服務平臺融合了浙江省級氣象部門的氣象預警、智能網格預報、臺風、梅雨等20 項專題服務，為政府決策和省市縣三級氣象部門提供了氣象監測、預報預警等氣象決策服務產品，形成了全面統一、豐富多樣的氣象防災減災決策平臺，其系統架構如圖1所示。

圖1：浙江氣象防災減災決策服務平臺系統架構

2.2 前端功能組成

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

圖2：浙江氣象防災減災決策服務平臺前端功能圖譜

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

（2）天氣實況模塊主要提供浙江當前天氣實況、降水、大風、氣溫統計以及雷達、衛星、自動站數據。其中，降水、大風、氣溫模塊分別展示了各氣象要素近1-24 小時的分布圖和站點排名情況。

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

3 Web前端關鍵技術

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

3.1 MVC三層框架設計模式

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

圖3：浙江氣象防災減災決策服務平臺Web前端MVC 三層框架設計模式

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

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

（3）Controller 即控制層，起雙向調控的作用，負責確保Model 和View 層的工作流程保持一致。一方面在View 層收集用戶的指令，發送給Model 層進行處理，另一方面告知View 層從Model 層獲得更新數據和結果，并做出相應改變反饋到用戶端。

通過決策服務平臺Web 首頁點擊“降水統計”，控制層傳達指令到模型層，模型層則從后端調取數據反饋給視圖層，最后視圖層按規則將雨量分布圖、雨量排名等數據展現出來，就是最終用戶看到的頁面。

3.2 氣象數據組織

氣象資料種類繁多，數據體量大，根據氣象數據結構特點，通常將其分為四類：離散型數據、網格化數據、柵格類數據和文件類型，如表1所示。

表1：氣象數據分類說明

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

在氣象組織方式方面，可分為關系型、半結構和非結構數據組織模型三類。其中，關系型數據是以行和列的對應關系來組織數據的；非結構數據一般不規則，可以用關鍵字段而非簡單二維表來組織存儲數據；半結構數據特點介于前二者之間，可用節點的方式來對不同類的數據進行組織。

3.3 氣象數據服務接口

浙江氣象防災減災決策服務平臺數據服務接口是基于浙江省氣象云試驗平臺數據環境，通過不同的可視化方式建立不同的可視化訪問方式，針對不同類型的資料建立相應的可視化訪問接口。接口調用方法如表2所示。

表2：浙江氣象防災減災決策服務平臺可視化接口調用方法

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

3.4 平臺PC版與手機浙政釘版

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

圖4：浙江氣象防災減災決策服務平臺梅雨專題降水實況

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

圖5：浙江氣象防災減災決策服務平臺手機浙政釘版降水實況頁面

手機移動版強化焦點、弱化附屬信息，把關注點放在重要氣象信息上，在用戶使用手機快速瀏覽的場景下，也能使其關注到主要信息，有助于信息的準確傳達。

4 結論

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