MVC 模式在数据可视化组件中的研究与应用

曾 悠，杨 明

（浙江省气象信息网络中心，浙江杭州 310017）

0 引言

气象数据分析与应用成为大数据研究的热门领域之一［1］。在海量气象数据挖掘基础上，气象数据的可视化将极大提高数据分析效率，而前端的架构设计对于优化可视化效果及后续工作的高效开展具有十分重要的意义［2-6］。目前气象可视化系统多基于Silverlight 和WebGIS 技术［7-10］，但Silverlight 使用前必须安装插件且使用成本较高，基于WebGIS 的可视化功能往往不能单独使用；采用基于GIS 的ArcEngine 模式开发的可视化地图组件［11-12］具有针对性和专属性，不便于移植到其他系统或平台。20 世纪70 年代，MVC 模式在Smalltalk-80 的GUI 设计中被提出［13］。本文基于气象云平台的数据可视化组件，采用MVC（Model-View-Controller）设计模式［14］，分析整合多种气象数据源，以组件形式提供气象数据综合展示、气象设备监控预警、气象应用在线分享等功能，实现气象数据的有效可视化，具有较强的可扩展性和可移植性。

1 框架设计

面向复杂多维的气象数据和可视化需求，本文数据可视化组件采用MVC 三层框架模式设计思想。框架的视图层、数据模型层和逻辑控制层相互独立，将不同的功能分配给相应的层实现。视图（View）主要用于实现页面展示，数据模型（Model）负责数据的访问和调用，逻辑控制层（Controller）实现组件系统的业务逻辑、协调视图与模型［15-19］，应用服务则在三者基础上实现，其功能架构如图1所示。三层架构模式实现的系统能极大降低程序间的耦合性，增强组件的伸缩性、稳定性，便于组件扩展和维护［20］。

Fig.1 Functional architecture of visual application components图1 可视化应用组件功能架构

（1）视图层。是用户和组件系统的交互窗口，负责获取用户指示和显示控制层反馈的数据信息，采用HTML5、CSS3 和JavaScript 等Web 前端技术完成应用组件的内容布局，结合地图模块的WebGIS 技术实现在互联网平台上进行地理信息发布、交流协作和数据共享。在视图层使用Ja⁃vaScript 和WebGIS 技术开发交互界面，不但能支撑多种数据类型的分析展示，提供图表、地图、空间数据等多种可视化风格，实现用户自定义的操作界面风格制定，还能适配PC 端、移动端和大屏等多种分辨率的本地部署和多终端展示。

（2）数据模型层。以分布式云存储技术、数据中心技术为支撑，负责数据的存取，包括数据表的插入、更新、删除、查询等操作，为控制层提供数据服务。数据模型层主要由数据持久化模块、数据访问模块、数据消息模块、数据处理和数据服务模块组成。根据业务逻辑访问相应的气象数据，通过数据处理模块进行数据转换，提供通用的JSON、Txt、二进制流等数据格式以及相应数据接口［21］，兼容多种数据格式，实现与各气象数据应用平台无缝对接。

（3）逻辑控制层。为系统核心层，负责可视化的业务逻辑实现、消息控制和数据通信等。主要由数据通信模块、消息控制模块、业务组件管理模块组成。从视图层获取用户指示后，依据业务规则处理数据，调用数据模型层提供的接口完成数据的存储和访问，通过消息控制模块实现业务逻辑管控，为视图层提供丰富的业务逻辑组件。逻辑控制层提供多种通用的数据解析显示方式和图表面板，用户可根据自身业务需求和业务逻辑获取数据和图表。

应用服务采用分布式方式为业务应用提供服务，主要分为地图应用服务、图表应用服务、专题应用服务、可视化组件应用服务等。采取在线和离线方式为业务系统提供应用服务，用户也可创建个性化的气象应用服务并发布及分享。

2 关键技术分析

2.1 消息机制模型

气象可视化内部采用同步和异步两种消息机制混合方式，按照系统内部与外部划分边界，即可视化服务内部采用同步工作流消息方式，与外部请求交互采用异步的消息方式。整个气象可视化服务组件内部分为执行体和消息体两个实体。

为了提高用户体验，在面向用户的可视化组件视图层采用异步的消息方式响应用户的可视化请求，并在向业务逻辑层发送业务处理请求的同时响应用户的其他可视化请求。在业务逻辑层，由于可视化请求逻辑处理采用工作流方式，每项任务都是按照可视化业务逻辑按序执行，所以采用消息同步方式。同样，在数据模型层采用同步的消息方式，而在数据模型层请求外部数据服务时采用异步消息机制。消息机制模型如图2 所示。采用混合消息机制模型可实现气象可视化组件的有序服务，提高用户体验和响应效率，有利于扩展新功能、消除并发访问高峰、提高系统可用性。

Fig.2 Synchronous and asynchronous message mechanism model图2 同步、异步消息机制模型

2.2 逻辑结构

可视化应用组件建立在浙江省气象数字化平台的数据平台和地图模块之上，提供通用的数据格式，获取并解析气象站点、网格、图片、文本等多种格式数据，支持本地部署和多终端展示，能自适应PC、大屏和移动端等屏幕分辨率，做到向下兼容气象云大数据平台，向上自适应多种屏幕分辨率，其逻辑结构如图3 所示。

Fig.3 Logical structure of visual application components图3 可视化应用组件逻辑结构

3 基于分布式技术的可视化组件

3.1 可视化组件开发技术

基于分布式服务思想，气象数据可视化组件开发将业务和可复用服务分离，方便部署且易于气象产品的二次开发和移植。采用分布式服务架构方式开发可视化组件，有利于适应海量数据存储、响应速度、后期业务扩展等需求［22］，其逻辑结构如图4 所示。

Fig.4 Logical structure of meteorological data visualization component图4 气象数据可视化组件逻辑结构

气象数据可视化组件以气象云大数据平台为数据支撑，利用分布式云数据存储技术，结合地图服务和气象业务需求，形成各个功能独立的组件服务，以满足各气象业务系统、各终端展示及其他面对公众的气象服务需求［23-24］。

气象数据可视化组件负责提供不同种类的可视化组件服务，包括地图服务中的地图引擎、地图操作，负责地图的显示、加载与操作；气象渲染、格点订正、分析图表、气象编码、抽取引擎、智能挖掘则属于基础的气象数据服务，负责数据编码、图层渲染、图表生成等工作；前端模板组件负责直接与用户交互的显示模块，如提供多种数据图表的样式以及界面外观等。以分布式服务架构思想将这些组件服务作为中间件按需进行自由组合、相互搭配使用，更灵活、便捷地为气象系统提供服务，还可为新业务的二次开发提供独立调用、可重用的组件服务。

3.2 可视化数据插值方法

本文可视化数据插值采用双线性插值方法，与其他的邻近插值、双三次插值方法相比，其运算速度和插值效果更优。其原理是利用源图像中每个点周围4 个真实点的像素值来共同生成目标图像中对应点的像素值。在实际算法中，对齐源图像和目标图像的几何中心，以及使用整数代替浮点运算，能加速与优化算法。

3.3 基于HTML5 的Web 可视化技术

HTML5 提供的HTML、CSS、JavaScript 和SVG 等技术应用广泛，为实现高效的数据可视化提供了更多机遇。SVG是基于XML 的一种描述二维矢量图形格式，因为是矢量的，所以被放大后也不会失真，这对于可视化效果适配不同屏幕大小的终端来说非常有优势［25］。此外，SVG 图形可以任意组装，通过CSS 和JavaScript 对图形进行修改［26］。基于HTML5 提供的API，数据经过预处理后由服务端以JA⁃SON 格式传输给浏览器，在客户端实现绘制，完成气象数据的可视化过程。

4 性能分析

4.1 数据说明

本文选取部分具有代表性的数据为例，其中近24h 降水量为站点数据，10UV 分量为网格类数据，雷达拼图和FY4A 为栅格类数据，如表1 所示。

Table 1 Data description表1 数据说明

4.2 性能分析

以Jemeter 为测试工具，从平台响应速度方面对气象数据可视化应用组件进行评估，测试10 次请求下的响应速度并求出平均响应时间，实验结果如图5 所示。

Fig.5 Comparison of test results of various data responses图5 各类数据响应测试结果对比

图5 中横轴表示实验次数，纵轴为响应速度，单位为ms（毫秒）。图5（a）中近24h 降水量在前5 次接近平均值，在第6 次时耗时最长接近80ms，第8 次达到最小值接近10ms，平均速度30ms，总体表现良好；图5（b）展示了雷达拼图产品响应测试结果，是4 类产品中响应速度最稳定的，几乎都在12ms 左右，表现最好；图5（c）为10UV 分量响应测试结果，最低响应速度50ms，最慢约95ms，平均68ms，响应速度的稳定性稍逊于其他3 类产品；图5（d）为FY4A 产品响应测试结果，稍优于10UV 分量，最快反应速度约18ms，平均值为30ms。

实验表明，浙江气象数字化平台可视化应用组件在数据请求响应方面表现良好，具有较快的响应速度、渲染速度，符合用户预期。

5 应用效果

气象可视化组件现已应用于浙江台风网、浙江气象防灾减灾决策服务平台等气象业务系统，运行情况良好，对各类数据处理稳定，数据显示层次分明、准确流畅，用户体验较好，达到了良好的展示效果。

6 结语

本文运用MVC 三层分布式组件开发技术对多层气象数据可视化实现进行了研究，介绍了气象数据可视化的功能架构，对可视化组件的混合消息机制、气象数据可视化组件开发技术以及前端实现技术等关键技术进行了探究。实际应用表明，本文的气象数据可视化方案达到了应用要求，在一定程度上满足了气象业务对可视化组件灵活性、可移植性要求，为其他业务提供了便捷，为气象业务可视化建设提供了前瞻性的试验和探索。随着气象业务的发展，对数据可视化要求会逐步提高，该组件功能也将不断迭代更新与完善。