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 框架，根据气象数据特点设计相应接口等等，有效改善了数据信息可视化的展示效果，加快了数据渲染和网站反应速度，优化了用户体验，取得了良好的应用效果。但系统依然存在不足之处，如界面工具类按钮太多，呈现方式不够一目了然，图表的展现对于重点信息还不够突出等问题。在今后的工作中，还需要对平台前端的信息展示方式和界面设计进一步改良和优化。