基于天擎JSONP的降雨實況分級預警平臺建設與實現

2025-02-21 00:00:00鄭舒天錢媛李鑫焱

現代信息科技 2025年2期

摘要：文章主要研究利用氣象大數據云平臺提供的JSONP格式數據搭建Web平臺，跨域請求數據后直接利用瀏覽器可視化氣象數據，免去了服務器搭建環節，降低了門檻和成本。此外，獲取分鐘降雨量數據集后計算不同時效分級的滑動累計降雨量，并用圖表形式可視化，相較大部分基于GIS系統顯示氣象要素的平臺，圖表形式具有更加簡潔、高效、直觀等優勢。與此同時，圖表能在減少人機互動的情況下自動更新數據，并能在同一個界面下提供更為豐富的信息量，有利于快速分析研判降雨實況信息，為發布暴雨預警增加提前量。

關鍵詞：氣象大數據云平臺；JavaScript；降雨實況平臺

中圖分類號：TP311 文獻標識碼：A 文章編號：2096-4706（2025）02-0096-05

Construction and Implementation of Rainfall Real-time Grading Early Warning Platform Based on Tianqing JSONP

ZHENG Shutian， QIAN Yuan， LI Xinyan

（Honghe Meteorological Bureau， Mengzi 661199， China）

Abstract： This paper mainly studies the use of the JSONP format data provided by CMADaaS to build the Web platform. After the cross-domain request of data， it directly uses the browser to visualize the meteorological data， eliminates the server construction link， and reduces the threshold and cost. In addition， after obtaining the minute rainfall dataset， the sliding cumulative rainfall of different time grades is calculated and visualized in the form of charts. Compared with a large part of the platforms which display meteorological elements based on GIS system， the chart form has the advantages of more conciseness， efficiency， and intuitiveness. At the same time， the chart can automatically update the data in the case of reducing human-computer interaction， and can provide more abundant information in the same interface， which is conducive to the rapid analysis， research， and judgment of real-time rainfall information， and increases the amount of advance for the release of rainstorm warning.

Keywords： CMADaaS; JavaScript; rainfall real-time platform

DOI：10.19850/j.cnki.2096-4706.2025.02.017

收稿日期：2024-06-05

基金項目：云南省氣象局基層臺站氣象科技創新與能力提升計劃項目STIAP（STIAP202224）

0 引言

氣象作為防災減災的第一道防線，各行各業對于氣象服務的需求日益旺盛。氣象實況監測又是短臨預報預警的先導條件，能穩定、快速、高效的獲取氣象自動監測站點的降雨實況，為做好短臨監測和發布暴雨預警爭取提前量都起到決定性的因素。現行大部分的氣象業務軟件和平臺主要基于GIS系統搭建氣象要素時空分布的界面，這類平臺一般底圖為行政區或者衛星圖，可以更為方便直觀地查看氣象要素的空間分布[1-5]。但是在面對降雨實況分析時，由于氣象暴雨預警的發布涉及多個分級時次的滑動累計降雨量，傳統GIS系統難以在同一個界面顯示出過多信息，需要通過交互實現不同時次要素的切換顯示，而圖表顯示的方式這時就更為高效和直觀，圖表可以在同一個界面甚至一個圖表中就反映出豐富的數據信息，方便基層業務人員快速地分析降雨實況，減少與界面的人機交互，實現自動更新數據。

1 平臺技術設計

1.1 總體框架

降雨實況分級預警平臺的總體設計為無服務器的純Web應用，利用跨域請求直接獲取天擎接口數據在前端計算分析后可視化顯示，可減去傳統業務平臺建設中搭建服務器環節，減輕基層臺站的建設及維持成本。平臺包括數據層、儲存層、組件層和應用層4部分[6-7]，如圖1所示。數據層提供分鐘降雨量的基礎數據，由天擎的中國地面分鐘降水資料接口返回。存儲層利用前端內存進行基礎數據、工具函數和計算后站點數組的存儲。組件層面向數據計算、邏輯判斷和圖表可視化等平臺服務需求，構建既能夠分離又可以耦合的各類組件和工具函數。應用層圍繞降雨實況分析需求，以用戶對數據顯示持有主動權為要求，建成基于模塊化服務的快速響應、動態顯示的降雨實況分級預警平臺，提供分級顯示的降雨圖表，實現用戶根據需求交互圖表動態顯示，快速響應反饋豐富信息。

1.2 功能設計

1.2.1 降雨實況分級表格

平臺核心是一個滑動累計降雨量遞進分級表格，表格在呈現降雨量的時間遞進關系上更加清晰直觀，且可以通過各種樣式功能實現信息反饋的拓展。為提高信息反饋效率，后臺邏輯判斷對累計降雨量為0的單元格進行透明化，執行hover命令可顯示，減少無效信息的反饋，加快視覺獲取重點信息區域的速度。并且表格將最近5分鐘的累計降雨量顯示在1小時降雨量括號后方便用戶快速判斷最新降雨趨勢；最后表格后臺邏輯設計根據暴雨預警業務規范閾值計算分析后，單元格背景高亮提示應該發布的預警等級（顏色），各地區可以根據本地化標準進行設置。由此可見表格的拓展應用豐富，且表格形式可一次顯示多個分級時次下的滑動累計降雨量，無須在不同時次按鈕上點擊切換，減少人機交互的同時提高獲取多維度信息的高效性和直觀性。圖2為2023年7月15日云南省個舊市氣象臺升級發布暴雨紅色預警信號，從分級表格可以快速獲取檸檬基地站3小時滑動累計降水量達到88.9毫米，其中1小時滑動累計降水量高達79毫米，且臨近5分鐘累計降水量達2.6毫米，計算以該強度降雨再持續20分鐘就可以達到暴雨紅色預警信號標準，表格顯示紅色高亮提醒發布預警信號。從括號中的臨近5分鐘累計降水量可以判斷除冷墩站和檸檬基地站雨強較大外，其余站點雨強較弱，對強降雨落區有指導意義。圖3為氣象要素查詢界面。

1.2.2 降雨實況堆疊柱狀圖

將分級表格中數據可視化為一個堆疊柱狀圖。堆疊柱狀圖的形式與累計降雨量的遞進累加非常契合。通過堆疊的柱子顏色和長度可以快速直觀的分析降雨集中的時間段和降雨量的大小。平臺引用ECharts組件來繪制柱狀圖，點擊圖例可顯示/隱藏相應時段的降雨量數據，鼠標移動到相應時段可以高亮顯示當前選擇的數據組，用戶根據需求主觀交互動態圖表，獲取所需信息更加便捷。圖2中通過堆疊柱狀圖可以直觀看出紅色為臨近1小時累計降水量，檸檬基地站接近80毫米，冷墩站接近40毫米。藍色為臨近3小時累計降水量，超過40毫米的有3個站點。

1.2.3 單站分鐘降雨量柱狀圖

在實際工作中經常需要分析單個站點的降雨實況特征來判斷降雨情況和后續預測。平臺實現分級表格中點擊對應站點所在行，即可讀取該站點近3小時的逐分鐘降雨量數據，進行柱狀圖可視化顯示。該模塊依然采取動態圖表思路，工具欄提供豐富的按鈕讓用戶與圖表交互實現信息反饋。折線圖和柱狀圖的切換按鈕，方便用戶根據使用習慣選擇；降雨數據源查看按鈕，方便用戶復制原始數據到其他軟件進行計算分析；時間軸縮放滾動條，默認顯示近一小時逐分鐘降雨量，用戶可通過拖拽滾動條或者滾輪方式在近3小時數據中縮放查看。圖2下方檸檬基地站分鐘降水量柱狀圖中，分鐘雨強最大出現在7月15日00時44分超過4毫米/分鐘，最近1分鐘雨強小于1毫米/分鐘，判斷降水較最強時段有所減弱但仍在持續。

2 平臺實現

2.1 天擎JSONP數據請求

天擎接口提供的返回數據中包括JSONP數據格式[8]，JSONP是瀏覽器常用的跨域請求方式，原理是利用lt;scriptgt;等標簽的scr屬性沒有跨域限制來實現的，瀏覽器在lt;scriptgt;等標簽返回數據時以回調函數的方式拿到返回的數據。實現請求方式首先需要在URL中將參數dataFormat的值改為JSONP，然后將參數callbackName的值改為回調函數的函數名[8-10]。這個回調函數會在返回數據后自動調用，回調函數中傳一個形參data來獲取返回數據，在回調函數中操作返回數據就直接操作data變量即可。這種方式每次請求都會增加一個lt;scriptgt;標簽，導致長時間運行瀏覽器冗余，在結束請求后可刪除該標簽。關鍵代碼如下：

//聲明回調函數

function callbackName（data） {

//操作返回的數據data

console.log（data）;

}

//獲取jsonp數據的函數

function getJsonp（） {

// 1.創建一個script標簽

const script = document.createElement（'script'）;

// 2.設置標簽的src屬性

script.src = URL;

// 3.將script標簽插入到文檔中，通過回調函數獲取到數據

document.body.appendChild（script）;

// 4.刪除該script標簽

document.body.removeChild（script）;

};

2.2 數據計算和可視化

使用天擎的SURF_CHN_PRE_MIN接口獲取分鐘降水數據，該接口的數據入庫規則是每5分鐘入庫一次[1]，為了減少無效請求次數和提高數據獲取時效性，盡量讓轄區所有站點數據均入庫后發起一次請求全部獲取，設置定時器在第6分鐘發起請求，然后每間隔5分鐘請求一次即可實現數據自動刷新。需要注意回調函數中獲取的返回數據是一個帶有響應信息的對象，真正可用的氣象要素信息以數組形式賦值在該data對象DS屬性中，為便于排序可以在請求時增加資料時間參數Datetime，這樣在回調函數中操作DS數組的Datetime屬性即可排序。示例代碼如下：

function callbackName（data） {

let dataArr = data.DS.sort（function（a， b） {

return （new Date（b.Datetime） - new Date（a.Datetime））;

}）;

}

排序后依次計算不同時效的滑動累計降雨量賦值給相應lt;tdgt;標簽的innerHTML屬性。之后將表1中的閾值作為if語句的判斷條件，判斷為true則更改lt;tdgt;標簽的className屬性變更lt;tdgt;標簽的背景色實現提醒功能。

柱狀圖的實現使用Echarts庫，用setOption方法生成柱狀圖。該方法中可以傳一個參數option，option對象的series屬性是一個以對象為存儲單位的數組，將計算好的累計降雨量數組賦值給數組對象的data屬性即可。關鍵代碼如下：

var option = {

series：[

{name：'1小時累計降雨量'，type： 'bar'， data： 1hdata，}，

{name：'2小時累計降雨量'，type： 'bar'， data： 2hdata，}

…

]

};

// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption（option）;

2.3 預警閾值設置

根據云南本地降雨特征結合暴雨預警信號發布標準在平臺內嵌入一個預警提示邏輯模塊。由于發布暴雨預警信號的判別依據復雜，該平臺僅基于實況降雨量，所以依然采取分級提醒的原則，對每個時效單獨設置閾值，各閾值間采取遞進關系，業務人員根據提醒提前關注降雨實況，并結合其他類型的氣象數據綜合判斷發布相應暴雨預警信號，如表1所示。

3 結論

綜合本文分析，得出以下結論：

1）基于氣象大數據云平臺提供的JSONP跨域方式直接在前端獲取返回數據后可視化能簡單搭建氣象業務平臺，降低搭建和維護服務器的成本，并且因為數據在前端內存中計算，可以降低數據安全風險。這種方式適用于基層實現本地化小程序或者輕量級業務平臺。

2）基層對降雨實況監測上采取分級圖表的方式顯示滑動累計降雨量更加契合暴雨預警信號發布標準的時效分級邏輯，方便業務人員根據降雨實況對應預警標準選擇相應等級。表格形式可以在同一個界面上體現多維度信息，減少頻繁人機交互的同時還增加信息傳遞效率。

3）無服務器架構存在拓展性和推廣性差的問題，版本功能更新不便捷，不能獲取用戶使用信息來分析優化用戶體驗。表格顯示降雨實況在時間分析上有優勢，但是對于空間分析還是不如GIS顯示直觀，不方便疊加雷達資料等空間產品綜合分析天氣形勢。

參考文獻：

[1] 陳鵬心，吉曹翔，張海洋，等.基于“天擎”的沈陽智慧氣象數據應用服務平臺設計與應用 [J].陜西氣象，2023（4）：56-62.

[2] 李顯風，張瑋，李芬，等.基于WebGIS的實況網格產品應用分析平臺及關鍵技術 [J].氣象科技，2020，48（2）：185-194.

[3] 馮冼，屈右銘，劉曉波，等.基于插件技術的湖南氣象服務平臺設計與實現 [J].氣象科技，2023，51（5）：658-667.

[4] 劉彬，李曉鵬.基于Silverlight的氣象信息查詢系統設計與應用 [J].氣象科技，2016，44（3）：369-373+391.

[5] 陳京華，鄧莉，王舒，等.國家氣象業務內網WebGIS數據服務系統設計與應用 [J].氣象科技，2020，48（4）：496-502.

[6] 許皓皓，姚日升，沃偉峰.標準化氣象數據服務接口設計與實現 [J].氣象科技，2018，46（4）：685-691.