基于天擎JSONP的降雨實(shí)況分級預(yù)警平臺建設(shè)與實(shí)現(xiàn)

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

關(guān)鍵詞：氣象大數(shù)據(jù)云平臺；JavaScript；降雨實(shí)況平臺

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：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

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

0 引 言

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

1 平臺技術(shù)設(shè)計

1.1 總體框架

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

1.2 功能設(shè)計

1.2.1 降雨實(shí)況分級表格

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

1.2.2 降雨實(shí)況堆疊柱狀圖

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

1.2.3 單站分鐘降雨量柱狀圖

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

2 平臺實(shí)現(xiàn)

2.1 天擎JSONP數(shù)據(jù)請求

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

//聲明回調(diào)函數(shù)

function callbackName（data） {

//操作返回的數(shù)據(jù)data

console.log（data）;

}

//獲取jsonp數(shù)據(jù)的函數(shù)

function getJsonp（） {

// 1.創(chuàng)建一個script標(biāo)簽

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

// 2.設(shè)置標(biāo)簽的src屬性

script.src = URL;

// 3.將script標(biāo)簽插入到文檔中，通過回調(diào)函數(shù)獲取到數(shù)據(jù)

document.body.appendChild（script）;

// 4.刪除該script標(biāo)簽

document.body.removeChild（script）;

};

2.2 數(shù)據(jù)計算和可視化

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

function callbackName（data） {

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

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

}）;

}

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

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

var option = {

series：[

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

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

…

]

};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

myChart.setOption（option）;

2.3 預(yù)警閾值設(shè)置

根據(jù)云南本地降雨特征結(jié)合暴雨預(yù)警信號發(fā)布標(biāo)準(zhǔn)在平臺內(nèi)嵌入一個預(yù)警提示邏輯模塊。由于發(fā)布暴雨預(yù)警信號的判別依據(jù)復(fù)雜，該平臺僅基于實(shí)況降雨量，所以依然采取分級提醒的原則，對每個時效單獨(dú)設(shè)置閾值，各閾值間采取遞進(jìn)關(guān)系，業(yè)務(wù)人員根據(jù)提醒提前關(guān)注降雨實(shí)況，并結(jié)合其他類型的氣象數(shù)據(jù)綜合判斷發(fā)布相應(yīng)暴雨預(yù)警信號，如表1所示。

3 結(jié) 論

綜合本文分析，得出以下結(jié)論：

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

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

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

參考文獻(xiàn)：

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

[2] 李顯風(fēng)，張瑋，李芬，等.基于WebGIS的實(shí)況網(wǎng)格產(chǎn)品應(yīng)用分析平臺及關(guān)鍵技術(shù) [J].氣象科技，2020，48（2）：185-194.

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

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

[5] 陳京華，鄧?yán)?，王舒，?國家氣象業(yè)務(wù)內(nèi)網(wǎng)WebGIS數(shù)據(jù)服務(wù)系統(tǒng)設(shè)計與應(yīng)用 [J].氣象科技，2020，48（4）：496-502.

[6] 許皓皓，姚日升，沃偉峰.標(biāo)準(zhǔn)化氣象數(shù)據(jù)服務(wù)接口設(shè)計與實(shí)現(xiàn) [J].氣象科技，2018，46（4）：685-691.

[7] 劉媛媛，何文春，王妍，等.氣象大數(shù)據(jù)云平臺歸檔系統(tǒng)設(shè)計及實(shí)現(xiàn) [J].氣象科技，2021，49（5）：697-706.

[8] 霍慶，何文春，高峰，等.基于數(shù)據(jù)感知的氣象算法調(diào)度框架設(shè)計與應(yīng)用 [J].應(yīng)用氣象學(xué)報，2024，35（4）：502-512.

[9] 董良淼，李宇中，覃月鳳，等.“天擎”預(yù)報服務(wù)客戶端開發(fā)及接口應(yīng)用技巧 [J].氣象科技，2022，50（2）：297-302.

[10] 肖衛(wèi)青，薛蕾，劉振，等.地面自動氣象站數(shù)據(jù)流式處理設(shè)計與實(shí)現(xiàn) [J].應(yīng)用氣象學(xué)報，2024，35（3）：373-384.

作者簡介：鄭舒天（1994—），男，漢族，云南紅河人，工程師，理學(xué)學(xué)士，研究方向：天氣預(yù)報及相關(guān)應(yīng)用。