摘 要：文章主要研究利用气象大数据云平台提供的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.
[7] 刘媛媛，何文春，王妍，等.气象大数据云平台归档系统设计及实现 [J].气象科技，2021，49（5）：697-706.
[8] 霍庆，何文春，高峰，等.基于数据感知的气象算法调度框架设计与应用 [J].应用气象学报，2024，35（4）：502-512.
[9] 董良淼，李宇中，覃月凤，等.“天擎”预报服务客户端开发及接口应用技巧 [J].气象科技，2022，50（2）：297-302.
[10] 肖卫青，薛蕾，刘振，等.地面自动气象站数据流式处理设计与实现 [J].应用气象学报，2024，35（3）：373-384.
作者简介：郑舒天（1994—），男，汉族，云南红河人，工程师，理学学士，研究方向：天气预报及相关应用。
