CN109801352B - 一种气象格点数据动画显示方法 - Google Patents

Abstract

本发明公开了一种气象格点数据动画显示方法，其在服务器端，对原始气象格点数据对应的二进制形式数据段中的二进制格点数据体进行无损压缩，再传输压缩后的数据给计算机终端的浏览器；在浏览器中，解压还原得到二进制格点数据体，并通过配置的数值和颜色的映射关系转换为WebGL支持的纹理对象，将纹理对象传入WebGL中和GPU中，利用GPU对WebGL进行加速实现对纹理对象的快速渲染，完成图像绘制；对每相邻的两帧绘制图像进行线性插值处理，获得足够多的中间帧；将图像序列光栅化后传入WebGL的颜色缓冲区中，再采用JavaScript中的定时器事件驱动，并利用Canvas标签依次将每帧图像显示到浏览器页面上；优点是能实现大数据量的气象格点数据的实时绘制，并作快速平滑的时序动画显示。

Description

一种气象格点数据动画显示方法

技术领域

本发明涉及一种气象数据的处理传输及绘制显示技术，尤其是涉及一种气象格点数据动画显示方法。

背景技术

当前，Web端图像数据显示技术通常结合HTML(Hyper Text Mark-up Language，超文本标记语言)的image标签或Canvas(画布)标签来实现，这些常规的显示技术一般会存在以下问题：1)单纯利用image标签实现，虽然以image标签加载图片时，数据较小，效率较高，但是图片放大会模糊，且图片本身也不便于数值分析；2)利用Canvas标签实时绘图实现，虽然以Canvas标签实时绘制时解决了数据失真的问题，但是如果每帧数据体较大，则会导致加载速度较慢；3)若基于以上两种方式不做处理进行时序动画显示时，则对于时序间隔较大的气象数据容易出现卡顿的现象，动态效果比较生硬，突变现象明显。

因此气象数据在Web端做动画时，往往由于气象数据本身观测的时间间隔较大，且格点类数据本身一般数据量较大，使用传统的Web端数据显示技术，始终存在或播放速度卡顿，或前后跳跃明显的情况，动画播放效果无法达到流畅平滑的要求。

发明内容

本发明所要解决的技术问题是提供一种气象格点数据动画显示方法，其能够实现大数据量的气象格点数据快速传输和绘制，并能够通过实时插值实现效果平滑的时序动画。

本发明解决上述技术问题所采用的技术方案为：一种气象格点数据动画显示方法，其特征在于包括以下步骤：

步骤一：在服务器中，将一帧原始气象格点数据存储为二进制形式数据段，该二进制形式数据段包含该帧描述信息和二进制格点数据体；然后对该二进制形式数据段中的二进制格点数据体进行无损压缩处理，从而得到该二进制形式数据段压缩后的数据；再传输该二进制形式数据段压缩后的数据给计算机终端的浏览器；其中，描述信息包含气象格点数据的多个参数，有气象格点数据的地理范围、气象格点数据的网格分辨率、二进制格点数据体的存储规则和压缩方式；

步骤二：在计算机终端的浏览器中，首先在获得二进制形式数据段压缩后的数据后，利用该数据中的描述信息对其中压缩的二进制格点数据体进行解压处理，还原得到二进制格点数据体；然后通过配置的数值和颜色的映射关系将还原得到的二进制格点数据体转换为WebGL支持的纹理对象；接着将该WebGL支持的纹理对象传入WebGL中，同时由CPU将该WebGL支持的纹理对象传入GPU中；再利用GPU对WebGL进行加速实现对每个WebGL支持的纹理对象的快速渲染，完成图像绘制，得到原始气象格点数据对应的绘制图像；

步骤三：对每相邻的两帧绘制图像进行线性插值处理，根据播放时间和资料数据量进行内插，获得能够保证每秒30帧或以上播放的时序数据，使得展现的图像序列平滑变化；

步骤四：将线性插值处理后得到的图像序列光栅化后传入WebGL的颜色缓冲区内，再采用JavaScript中的定时器事件驱动，并利用Canvas标签依次将WebGL的颜色缓冲区内的图像序列中的每帧图像显示到计算机终端的浏览器页面上，获得最终的动画效果。

与现有技术相比，本发明的优点在于：

本发明方法通过数据压缩传输、利用硬件支持的时序间线性插值、WebGL加速显示多种技术的结合，使气象格点数据的传输和显示效果得到了大大提升，在雷达、卫星、数值预报的降水、温度等格点类型的数据进行动画时具有快速和平滑的效果，主要体现在：

1)本发明方法在服务器端对每帧原始气象格点数据的数据段进行无损压缩处理，在保证不破坏原始气象格点数据的前提下，有效地提高了服务器端向计算机终端的浏览器传输气象格点数据的传输速度，这样使得本发明方法能够快速传输气象格点数据，减少了处理造成的卡顿。

2)本发明方法通过WebGL调用硬件加速，对时间间隔较大的气象格点数据根据播放时间和资料的数量动态决定内插帧数，进行线性的时序内插，获得平滑变化的时序数据，从而保持每秒30帧的数据量，用以支持平滑播放的动画效果。

3)本发明方法通过JavaScript中的定时器事件驱动，并利用Canvas标签依次显示插值获得的平滑变化的时序数据，从而获得平滑的动画显示效果。

4)利用本发明方法可以针对气象大数据快速的在计算机终端的浏览器上实现平滑的时间序列动画，从而能够提高气象预报员对天气系统演变的理解程度。

附图说明

图1为本发明方法的总体实现流程框图；

图2a为2018年8月25日08时00分获得的卫星数据(原始气象格点数据)的示意图；

图2b为2018年8月25日08时30分获得的卫星数据(原始气象格点数据)的示意图；

图3a为2018年8月25日08时00分获得的卫星数据(原始气象格点数据)的示意图；

图3b为2018年8月25日08时10分获得的卫星数据(插值气象格点数据)的示意图；

图3c为2018年8月25日08时20分获得的卫星数据(插值气象格点数据)的示意图；

图3d为2018年8月25日08时30分获得的卫星数据(原始气象格点数据)的示意图。

具体实施方式

以下结合附图实施例对本发明作进一步详细描述。

本发明提出的一种气象格点数据动画显示方法，其总体实现流程框图如图1所示，其包括以下步骤：

步骤一：在服务器中，将一帧原始气象格点数据存储为二进制形式数据段，该二进制形式数据段包含该帧描述信息和二进制格点数据体；然后对该二进制形式数据段中的二进制格点数据体进行无损压缩处理，从而得到该二进制形式数据段压缩后的数据；再传输该二进制形式数据段压缩后的数据给计算机终端的浏览器；其中，描述信息包含气象格点数据的多个参数，有气象格点数据的地理范围、气象格点数据的网格分辨率、二进制格点数据体的存储规则和压缩方式等信息，这些参数用于还原和显示气象格点数据；对二进制格点数据体进行无损压缩处理直接采用现有的无损压缩方法，可以通过实验确定一种最优的无损压缩方法；将原始气象格点数据存储为二进制形式数据段采用现有技术。

步骤二：在计算机终端的浏览器中，首先在获得二进制形式数据段压缩后的数据后，利用该数据中的描述信息对其中压缩的二进制格点数据体进行解压处理，还原得到二进制格点数据体；然后通过配置的数值和颜色的映射关系将还原得到的二进制格点数据体转换为WebGL(Web Graphics Library，Web图形库)支持的纹理对象；接着将该WebGL支持的纹理对象传入WebGL中，同时由CPU(Central Processing Unit，中央处理器)将该WebGL支持的纹理对象传入GPU(Graphics Processing Unit，图形处理器)中；再利用GPU对WebGL进行加速实现对每个WebGL支持的纹理对象的快速渲染，完成图像绘制，得到原始气象格点数据对应的绘制图像。

步骤三：对每相邻的两帧绘制图像进行线性插值处理，根据播放时间和资料数据量进行内插，获得能够保证每秒30帧或以上播放的数据，使得展现的图像序列平滑变化。

步骤四：将线性插值处理后得到的图像序列光栅化后传入WebGL的颜色缓冲区内，再采用JavaScript中的定时器事件驱动，并利用Canvas标签依次将WebGL的颜色缓冲区内的图像序列中的每帧图像显示到计算机终端的浏览器页面上，获得最终的动画效果。

为了进一步说明本发明方法的可行性和有效性，对本发明方法进行实验。

使用雷达、自动站、卫星云图和数值模式预报的气象格点数据对本发明方法进行技术验证，在数据传输效率和平滑动画两方面进行验证。

实验一：

使用指定经纬度范围内的气象格点数据，分别在压缩和非压缩的条件下传输到计算机终端的浏览器中，在相同带宽下，对压缩数据和非压缩数据进行传输对比：

表1给出了原始气象格点数据对应的二进制形式数据段中的二进制格点数据体经无损压缩处理后，得到的二进制形式数据段压缩后的数据的指标，由于气象观测数据在有天气和晴空时的压缩率差异较大，因此一般实验以有天气的数据作为指标数据。从表1中可以看出，同等分辨率大小的气象格点数据，压缩效率提升了近20倍。

表2给出了二进制形式数据段压缩后的数据从数据传输到还原后的二进制格点数据体最终展示至预报员桌面所需的响应时间，从表2中可以看出不管是什么类型的气象格点数据，在当前主流的数据分辨率下，单时效的二进制形式数据段压缩后的数据请求总计耗时均在0.6秒以内；同等分辨率大小的气象格点数据，多时效压缩传输时性能均有明显提升。

表1原始气象格点数据对应的二进制形式数据段中的二进制格点数据体经无损压缩处理后，得到的二进制形式数据段压缩后的数据的指标

表2二进制形式数据段压缩后的数据从数据传输到还原后的二进制格点数据体最终展示至预报员桌面所需的响应时间

实验二：

使用同一时序的气象格点数据，比较播放时采用线性插值(即执行本发明方法中的步骤三的情况下)和不采用线性插值(即不执行本发明方法中的步骤三的情况下)时的效果，数据样本相同，播放时间相同，采用线性插值时对气象格点数据内插一定数量的数据帧，保证数据平滑播放。

实验效果：指定时序的数据根据播放时长决定插值帧数，实际操作中，自动将时序数据插值到每秒30帧进行播放，以达到流畅的播放效果。例如卫星数据从08时-20时，原始数据每半小时一个，共12个资料，若要在12秒内完成动画播放，达到每秒30帧的要求，则在每个数据之间插值29个数据。本实验只使用部分数据来表现其中间过程：图2a给出了2018年8月25日08时00分获得的卫星数据(原始气象格点数据)的示意图，图2b给出了2018年8月25日08时30分获得的卫星数据(原始气象格点数据)的示意图。采用本发明方法对图2a和图2b所示的卫星数据进行处理，对其进行时序数据间插值，作为示意在中间插入2帧数据，得到变化较为平滑的图像序列，图3a给出了插值得到的图像序列的第1帧(2018年8月25日08时00分获得的卫星数据(原始气象格点数据))、图3b给出了插值得到的图像序列的第2帧(2018年8月25日08时10分获得的卫星数据(插值气象格点数据))、图3c给出了插值得到的图像序列的第3帧(2018年8月25日08时20分获得的卫星数据(插值气象格点数据))、图3d给出了插值得到的图像序列的第4帧(2018年8月25日08时30分获得的卫星数据(原始气象格点数据))。从图3a至图3d中可以看出，从图3a至图3d的播放过程中，由于加入了图3b和图3c的动态插值过渡，因此使得图像动态演变更加平滑流畅，从而提高了气象预报员对天气系统演变的理解程度。

Claims (1)

1.一种气象格点数据动画显示方法，其特征在于包括以下步骤：

步骤一：在服务器中，将一帧原始气象格点数据存储为二进制形式数据段，该二进制形式数据段包含该帧描述信息和二进制格点数据体；然后对该二进制形式数据段中的二进制格点数据体进行无损压缩处理，从而得到该二进制形式数据段压缩后的数据；再传输该二进制形式数据段压缩后的数据给计算机终端的浏览器；其中，描述信息包含气象格点数据的多个参数，有气象格点数据的地理范围、气象格点数据的网格分辨率、二进制格点数据体的存储规则和压缩方式；

步骤二：在计算机终端的浏览器中，首先在获得二进制形式数据段压缩后的数据后，利用该数据中的描述信息对其中压缩的二进制格点数据体进行解压处理，还原得到二进制格点数据体；然后通过配置的数值和颜色的映射关系将还原得到的二进制格点数据体转换为WebGL支持的纹理对象；接着将该WebGL支持的纹理对象传入WebGL中，同时由CPU将该WebGL支持的纹理对象传入GPU中；再利用GPU对WebGL进行加速实现对每个WebGL支持的纹理对象的快速渲染，完成图像绘制，得到原始气象格点数据对应的绘制图像；

步骤三：对每相邻的两帧绘制图像进行线性插值处理，根据播放时间和资料数据量进行内插，获得能够保证每秒30帧或以上播放的时序数据，使得展现的图像序列平滑变化；

步骤四：将线性插值处理后得到的图像序列光栅化后传入WebGL的颜色缓冲区内，再采用JavaScript中的定时器事件驱动，并利用Canvas标签依次将WebGL的颜色缓冲区内的图像序列中的每帧图像显示到计算机终端的浏览器页面上，获得最终的动画效果。

Images