基于SSH框架的NC数据可视化验证系统研究

杜景林+喻亚楠

摘 要： 为了增强用户对WRF气象模式数据的直观性认识，设计一种基于SSH框架的NC数据可视化系统。该系统允许用户和数据之间进行交互读取，使用颜色映射函数将具体数据值映射成直观的颜色，结合WebGL绘图技术实现气象数据的形象显示，同时设计以时间、高度为变量的动画展示。利用NCL编码语言，对NC数据进行二次可视化，将两次可视化结果进行对比，完成系统验证。实验结果表明，该系统的可行性可极大地提高气象工作人员对NC数据动态变化的直观把握，有利于其做出相关决策。

关键词： NC数据； WebGL； SSH框架； 可视化； NCL； 系统验证

中图分类号： TN911?34 文献标识码： A 文章编号： 1004?373X（2018）02?0166?04

Abstract： In order to enhance the user′s intuitive understanding of WRF meteorological mode data， an NC data visualization system based on SSH framework is designed. The system allows interactive reading between users and data. The color mapping function is used to map specific data values into intuitive color elements. The images are displayed on the screen by combining WebGL drawing technology. An animation exhibition which uses time and height as the variables is designed. The NCAR command language （NCL） is adopted to realize the secondary visualization of NC data. The two visualization results are compared to accomplish the system verification. The experimental results shows that the feasibility of the system is proved， and meteorological staff′ intuitive control for dynamic changes in NC data is greatly improved which is conducive to making relevant decisions for meteorological staff.

Keywords： NC data； WebGL； SSH framework； visualization； NCL； system verification

0 引 言

隨着气象领域的发展，气象资料服务的需求日益扩大。目前，国内主要气象数据都用NC格式进行输出存储管理，同时紧随着NC数据的广泛使用，诞生了很多NC数据的分析处理软件，如Excel的插件NETCDF.xlsmNC，该插件可以直接读取NC数据，但也只能横向地显示数据值，无法动态地显示数据之间的关联，用户无法直观地感受数据意义。还有一些专业的处理软件，比如Graphics，但都需要专业人士满足一定的专业技能才能使用，用户的体验感不好。

为了提高用户的互操作性，以及对数据的直观认识，本文设计了基于SSH框架的NC数据可视化验证系统，主要涉及NC数据解析读取，存入数据库，设计颜色映射函数，分析WebGL绘图技术，调用NCL绘图对可视化结果进行对比验证，同时为了进一步满足用户的需求，设计了时间和高度动画，动态地显示不同高度不同时间的气象要素动态变化特点，有助于相关人员分析研究。本系统后台采用Java语言结合SSH框架进行开发，前端使用HTML，JQuery，CSS语言，绘图部分采用WebGL 3D绘图标准。

1 相关技术

1.1 NC文件介绍

NC数据格式是由美国大学大气研究协会下Unidata项目科学家针对科学数据的特点[1]，提出的一种结构化数组数据。NC数据全称为（Network Common Data Format），中文译名为“网络通用数据格式”。NC数据格式由于自身的易用性、可追加性、平台无关性、高可用性等特点而受到气象领域的追捧。它本身的格式不固定，能够根据使用者自身的需求去定义。一个NC数据集包含维（dimensions）、变量（variables）和属性（attributes）三种描述类型，每种类型都会被分配一个名字和一个ID，这些类型共同描述了一个数据集。变量存储实际数据，维给出了变量维度信息，属性则给出了变量或者数据集本身的辅助信息属性[2]。目前，随着NC数据格式的推广，NC数据存储格式已经能够用于大气科学，地球物理，海洋水文等诸多领域[3]。

1.2 WebGL绘图

WebGL是一个用于在Web上生成三维图形的应用编程接口。这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型 [4]，还能创建复杂的导航和数据视觉化。WebGL工作流程图如图1所示。

1.3 NCL绘图验证endprint

NCL（The NCAR Command Language）是一种专门为科学数据处理以及数据可视化设计的高级语言，在气象领域科研工作者一般都选择NCL脚本的绘图方法[5]。其中NCL脚本内置了很多用于解决气象领域问题的调用函数，因此可以方便相关专业人员进行数据操作，同时也因为它的相对专业性，使得普通用户的操作体验并不友好。本系统采用NCL绘图结果与WebGL绘图形成对比，体现本系统操作的严谨性。在NCL语言编程中，一般使用命令行交互式或者批处理模式对数据进行操作。以下是NCL编程5个主要步骤：加载库函数；导入数据；打开绘图区；编辑可视化图显示效果；调用绘图函数绘图。

1.4 SSH框架

SSH框架是比较经典的Web应用程序开源集成框架[6]，从职责上分为表示层、业务逻辑层、数据持久层，系统的基本业务流程是：在表示层中，首先根据JSP页面实现客户交互，负责发送请求（Request）和接收服务器响应（Response）[7]；然后Struts根据配置文件（struts?config.xml）将ActionServlet接收到的Request委派给相应的Action处理。在业务层中，管理服务组件的Spring IOC容器负责向Action提供业务模型（Model）组件和该组件的协作对象数据处理（DAO）组件完成业务逻辑[8]，同时Spring容器提供事务处理，缓冲池等容器组件以提升系统性能和保证数据的完整性。而在持久层中，则依赖于Hibernate的对象化映射和数据库交互[9]，完成对持久化对象的操作，并且返回相应的处理结果。

2 系统设计

2.1 系统功能

该系统在前台设计相关展示页面，然后根据用户选取的数据文件，选择的物理量（主要包括QVAPOR（水汽混合比），QRAIN（雨水混合比），QCLOUD（云水混合比）等，以及时间维度（1～24），高度维度（1～49））将可视化结果显示在网页端。由于不同物理量之间的属性不同，所以需要根据前台用户点击的需求数据在后台进行调用，进而传递给颜色传输函数进行映射，最终在前台进行可视化显示。为了方便用户将对不同的气象要素进行对比，前台设计中考虑了多窗口不同要素之间同时进行显示。同时考虑到用户能更直观地感受同一气象要素在不同时间或不同高度维度情况下的区别，设计了时间动画和高度动画进行连续展示。在前台调用数据库进行WebGL绘图展示的同时，可以通过右击鼠标弹出NCL绘图验证模块，将WebGL绘图结果与NCL绘图结果形成印证对比，验证整个系统的可行性。

2.2 NC数据流程

由于NC数据不能直接进行绘制，首先需要对NC格式数据进行解析，然后将解析后的数据存入数据库，用户点击具体物理量显示时，根据Request请求传递的物理量，在后台对物理量进行区分，匹配出相应的物理量数值，将物体的数值传递给颜色映射方法进行映射，映射结束后的数据以Json格式传入WebGL的顶点数据缓冲区（编写顶点索引）以及颜色缓冲区完成相应绘图，最后将数据以可视化图的形式显示到网页端。

2.3 颜色映射函数

在NC数据中，每一个不同的气象要素变量都是以离散网格数组的形式存在的，数组中的数据值一般比较连续，用户无法直观地感觉出数据值之间的差异[10]。因此，本系统中设计了颜色映射函数，将输入的每个具体的数据值转换为具体的可视显示的像素点，将所有的像素点连接在一起以带有颜色的图显示出来就可以直观地判断数据之间的变化。以下是颜色映射函数设计思路，图2是具体的颜色映射函数流程图。

1） 在颜色映射函数中，先根据每个变量数据的索引下标取出每一个数据值，遍历所有索引找出每一个变量的最大最小值，并记录下对应的索引值，将最大的数据值减去最小的数据值得出的结果平均分成255段，这里的每一段都代表一种具体颜色。

2） 根据RGB标准定义红橙黄绿蓝靛紫七种颜色。

3） 重新遍历数据值，并对数据值大小进行判别，将每一个具体的数据值进行归类，在归类同时记录下相对应的数据索引值，从而匹配不同的颜色数据值。

2.4 系统架构

本文系统采用经典的SSH框架搭建整个系统平台，分别是数据持久层、业务逻辑层、表示层，采用MVC分层思想将数据处理、逻辑控制、数据显示三个功能模块分离，使整个系统结构清晰，耦合性低，便于后期维护。

2.4.1 数据持久层

数据持久层主要封装NC变量数据的读取，利用NC文件提供的Java语言接口对数据进行解析，将所有的持久化物理变量映射到底层数据表，然后通过 Hibernate提供的session接口执行被持久化对象的增删改查等系列操作，极大地减少了程序员对底层数据库的直接交互。

2.4.2 业务逻辑层

业务逻辑层主要根据用户请求，将具体的请求传递给Stuts.xml配置文件，配置文件匹配对应的用户命令传递给不同Action层，Action層通过调用Service层，Dao层对数据进行处理操作。本系统主要涉及WebGL绘图显示以及NCL绘图验证模块，根据用户选择的气象变量请求传递给不同的Action层，以及颜色映射函数处理后的颜色数据，通过Ajax技术传递给WebGL绘图脚本进行绘图处理，对于NCL绘图验证主要涉及将数据传递给NCL绘图脚本，并最终发送到表示层，表示层将这些数据进行可视化显示。同时这里使用了Spring容器，采用注入方法，极大地降低了代码之间的耦合性，以及为后期程序开发带来了极大的便利。

2.4.3 表现层

表现层主负责将业务逻辑层的数据进行界面显示，根据用户的需求展示不同的数据可视化方案，包括不同要素不同高度不同时间的WebGL绘图显示，高度动画控制，时间动画控制，NCL绘图验证显示。endprint

图3显示为系统架构图，图中标示了每个层需要实现的功能。

3 系统实现

3.1 系统平台

本系统采用 MyEclipse作为开发平台。MyEclipse是一个多语言集成开发平台，支持Java，JQuery，CSS等一系列语言开发。MyEclipse同时具有友好的用户编程界面，能自动对编写代码进行格式化操作，并伴有代码提示功能。本系统在MyEclipse上进行前台页面设计，后台逻辑处理的开发工作，数据库采用MySQL数据库进行数据存储。

3.2 系统运行测试

图4是系统界面运行的时间高度均为1的QVAQOR（水汽）变量的WebGL以及NCL对比图。

左侧为具体的高度动画和时间动画控制台，可以根据时间或者高度变量以动画的形式动态地显示同一气象要素在不同高度或时间的动态变化效果，给用户更直观的体验效果。图4主体部分为水汽值在同一高度同一时间的WebGL动画与NCL显示图形，两种方法得到的图形基本一致，验证了本系统的可靠性。

4 结 语

围绕NC格式的气象数据，利用WebGL绘图技术，NCL绘图验证技术，将它们封装成不同的绘图脚本，将数据通过颜色映射函数映射传递给不同的绘图脚本进行绘图，最后通过同一高度同一时间的WebGL以及NCL绘图结果的相似性，验证整个系统的可行性，为相关气象工作人员分析NC格式的气象数据提供了动态分析方法，有利于相关工作人员对对应的数据进行更深入的研究。同时，整个系统架构采用SSH框架封装，提高了代码之间的重用性以及降低了代码之间的耦合性，为后续系统的开发维护提供了便利。

参考文献

[1] 李继祥，于立，陈龙泉，等.NetCDF格式在Windows及Linux平台下的读写[J].安徽农业科学，2014，42（33）：11942?11945.

LI Jixiang， YU Li， CHEN Longquan， et al. Read and write NetCDF format files on Windows and Linux platform [J]. Journal of Anhui agricultural sciences， 2014， 42（33）： 11942?11945.

[2] 张弟，吴建平.DotSpatial开源GIS软件扩展研究[J].电子世界，2013（19）：234?236.

ZHANG Di， WU Jianping. Research on DotSpatial open source GIS software extension [J]. Electronics world， 2013（19）： 234?236.

[3] 雏亚未.基于GDAL的NetCDF数据的信息提取及格式转换[J].江西测绘，2014（2）：32?35.

CHU Yawei. Information extraction and format conversion of NetCDF data based on GDAL [J]. Jiangxi surveying and mapping， 2014（2）： 32?35.

[4] 周长江.数字城市三维景观建模及可视化技术研究[D].徐州：中国矿业大学，2014.

ZHOU Changjiang. Research on 3D landscape modeling and visualization technology in digital city [D]. Xuzhou： China University of Mining and Technology， 2014.

[5] 王涵，李玲，孙学庆，等.CMACast内蒙古气象信息Web平台的设计与实现[J].气象科技，2014，42（2）：283?286.

WANG Han， LI Ling， SUN Xueqing， et al. Design and implementation of CMACast Inner Mongolia meteorological information Web platform [J]. Meteorological science and technology， 2014， 42（2）： 283?286.

[6] 周立刚.基于J2EE的外事管理系统的设计与实现[D].天津：南开大学，2014.

ZHOU Ligang. Design and implementation of foreign affairs management system based on J2EE [D]. Tianjin： Nankai University， 2014.

[7] 翟高粤.基于J2EE技術的SSH框架的 改进及应用[J].计算机时代，2012（10）：24?29.

ZHAI Gaoyue. Improvement and application of SSH framework based on J2EE technology [J]. Computer age， 2012（10）： 24?29.

[8] 赵铁松，王晓云，李伟，等.基于B/S架构和开源WebGIS平台的气象观测站网可视化系统[J].气象科技，2013，41（1）：57?61.

ZHAO Tiesong， WANG Xiaoyun， LI Wei， et al. Meteorological observation station network visualization system based on B/S architecture and open source WebGIS platform [J]. Meteorological science and technology， 2013， 41（1）： 57?61.

[9] 林秀芬.基于SSH的招标管理系统的设计与实现[D].成都：电子科技大学，2014.

LIN Xiufen. Design and implementation of the bidding management system based on SSH [D]. Chengdu： University of Electronic Science and Technology of China， 2014.

[10] 刘培宁，韩笑.基于R语言的NetCDF文件分析和可视化应用[J].气象科技，2014，42（4）：629?634.

LIU Peining， HAN Xiao. NetCDF file analysis and visualization application based on R language [J]. Meteorological science and technology， 2014， 42（4）： 629?634.endprint