CN116610746A - 一种基于WebGIS的气象格点数据分片展示方法 - Google Patents

Abstract

本发明公开了一种基于WebGIS的气象格点数据分片展示方法，涉及图像数据处理技术领域，如下步骤：计算标准分辨率，格点数据重采样，生成多层抽稀数据并建立索引，计算展示空间范围，计算所需切片数据索引，分片数据异步请求，Webgl数据渲染，WebGIS平台展示。本发明结合地图比例尺进行了数据的多级抽稀，即减少了数据的传输量，又保留了数据的完整性，同时，提出了数据的分片处理及索引建立方法，减少了冗余数据的传输，进一步提升了数据的传输效率，在数据渲染方面，采用Webgl这一高效的渲染方法，并通过双线性插值方法对数据进行平滑操作，提升了数据的展示效果，同时，使用异步请求渲染的方式，解决了分片数据不同时展示的问题。

Description

一种基于WebGIS的气象格点数据分片展示方法

技术领域

本发明属于基于WebGIS的气象格点数据分片展示方法技术领域，具体涉及一种基于WebGIS的气象格点数据分片展示方法。

背景技术

格点数据是气象行业主要的数据格式之一，色斑作为格点数据最常见的展示形式，其可视化展示也是WebGIS平台重要的功能。传统的格点数据可视化技术往往先通过服务端渲染格点数据至图片文件，然后采用WebGIS平台直接加载显示。这种方法虽然实现简单，但是存在大量数据传输缓慢、占用服务端资源、可视化产品无法交互等弊端，导致无法满足交互分析的需求并且使用体验感较差。因此，设计一种具有高交互性、高性能的海量格点数据实时渲染技术具有十分重要的意义。

格点数据可视化的核心在于数据的处理与渲染。在数据处理方面，主流的方式是将指定空间范围内的气象信息按特定的分辨率处理成格点形式，并保存为json、nc、灰度图等格式的文件进行数据存储与传输，当面对由于大空间范围及高分辨率导致数据量庞大的情况，这种数据处理方法会导致数据传输缓慢，严重影响可视化效率。

格点数据渲方面，传统的图片加载方式无法提供颜色修改、格点数值修改等交互分析操作，因此，需要一种对格点数据进行实时渲染绘制的方法。目前常见的实时渲染实现方式是利用Canvas绘图技术结合等值面生成算法进行格点色斑展示，首先通过等值面计算方法对格点数据进行处理并生成闭合等值面轮廓线拐点坐标集合，并依次对生成的结果进行空间裁剪操作，将裁剪结果进行渲染绘制。这种方法在实现上较为容易，但是当面对由于数据量庞大、色例过多因素导致等值面过多的情况时，会导致色斑渲染缓慢并出现系统卡顿等问题，影响使用体验。

发明内容

本发明的目的是为了解决现有技术中存在数据方面，由于大空间范围及高分辨率会造成数据量十分庞大，导致在WebGIS平台中进行渲染时，数据的请求效率低下并且占用缓存资源，不利于系统使用的缺点，而提出的一种基于WebGIS的气象格点数据分片展示方法。该基于WebGIS的气象格点数据分片展示方法采用数据分片的形式对格点数据进行处理与存储，同时加入了数据抽稀机制，对数据进行分级抽稀处理以提升传输效率并减少缓存占用。在格点渲染方面，采用Webgl渲染技术进行格点数值的可视化展示。

为了实现上述目的，本发明采用了如下技术方案：

设计一种基于WebGIS的气象格点数据分片展示方法，具体包括如下步骤：

步骤1）、计算标准分辨率：据谷歌地图标准比例尺，建立标准比例尺级别及相应的格点数据分辨率；

步骤2）、格点数据重采样：根据当前格点的实际分辨率，选取最相近的标准比例尺级别，进行格点数据的重采样生成新的标准比例尺格点数据；

步骤3）、生成多层抽稀数据并建立索引：用均值池化的方法，依次对每一比例尺级别进行数据的抽稀处理，并记录每一数据切片的比例尺级别、行数及列数作为数据的索引；

步骤4）、计算展示空间范围：利用WebGIS平台，计算窗口展示的实际空间范围，包括最小经度、最大经度、最小纬度、最大纬度及当前地图比例尺等信息；

步骤5）、计算所需切片数据索引：根据实际空间范围、数据分片规则以及每一分片数据的空间信息，计算出所需切片数据的索引；

步骤6）、分片数据异步请求：Web端通过异步的方式，进行数据请求，提升数据传输效率；

步骤7）、Webgl数据渲染：采用webgl渲染方法进行格点数据的实时渲染；建立画布及webgl上下文，根据数据的空间信息建立顶点着色器，然后根据色例等样式信息进行片元着色器的建立，同时，添加双线性插值方法以进行格点数据的平滑处理；

步骤8）、WebGIS平台展示：在WebGIS平台上将所渲染的图像进行加载展示。

进一步的，在步骤3）中，所述均值池化算法，具体包括如下步骤：

步骤31）、根据所需级别与当前数据级别计算所需池化窗口的大小；

步骤32）、将格点数据划分为大小为池化窗口的子区域；

步骤33）、对于每个子区域，计算所有格点的平均值，并将该平均值作为子区域的新数值；

步骤34）、将所有子区域的新数值合并成一个新的格点。

进一步的，在步骤3）中，数据分辨率与抽稀级别的计算方式如下：

（1）

式（1）中，res是不同级别下的数据分辨率，Res是地图的最高级别的瓦片分辨率，为156543.033928；n是抽稀级别。

进一步的，在步骤5）中，切片数据索引的具体步骤如下：

步骤51）、将平面空间递归地分割成四个象限，每个象限对应着一个子节点；

步骤52）、然后将子节点再继续递归地分割，直到分割至实际格点数据标准比例尺为止；

步骤53）、提取每一数据切片的比例尺级别、行数及列数作为唯一标识，即为数据分片的索引。

进一步的，在步骤7）中，所述webgl渲染方法包括如下步骤：

步骤71）、数据处理，提取数据的空间范围信息，包括最小经度、最小纬度、最大经度、最大纬度、当前窗口范围、画布尺寸等参数；

步骤72）、结合WebGIS平台，构建画布，提取上下文信息；

步骤73）、构建顶点着色器，其中记录了格点数据的空间信息；

步骤74）、构建片元着色器，根据空间信息、渲染样式进行数据渲染。

进一步的，在步骤74）中，所述渲染样式包括色斑的色例信息。

进一步的，在进行格点数据中，添加双线性插值方法以进行格点数据的平滑处理，所述双线性插值方法包括如下步骤：

步骤a）、取坐标(x,y)的四方向格点数值，四方向及坐标分别为左上(x₁,y₁)、右上(x₂,y₁)、左下(x₁,y₂)及右下(x₂,y₂)，它们的值分别为f(x₁,y₁)、f(x₂,y₁)、f(x₁,y₂)及f(x₂,y₂)；

步骤b）、对上方及下方左边位置按如下公式进行线性插值：

（2）

（3）

式（2）和（3）中，f(x,y₁)，f(x,y₂)分别为上方及下方坐标插值后的数值；

步骤c）、获取当前坐标值f(x,y)，计算如下：

（4）

式（4）中，f(x,y)为前坐标值。

本发明提出的一种基于WebGIS的气象格点数据分片展示方法，有益效果在于：本发明通过对气象格点数据、展示形式及渲染过程的分析，总结出了数据处理与实时渲染的核心问题。在数据处理方面，本发明结合实际使用场景，结合地图比例尺进行了数据的多级抽稀，即减少了数据的传输量，又保留了数据的完整性，同时，提出了数据的分片处理及索引建立方法，减少了冗余数据的传输，进一步提升了数据的传输效率。在数据渲染方面，采用Webgl这一高效的渲染方法，并通过双线性插值方法对数据进行平滑操作，提升了数据的展示效果，同时，考虑到数据分片的特性，使用异步请求渲染的方式，解决了分片数据不同时展示的问题。具体地：

（1）、本发明采用多比例尺数据抽稀：

数据量庞大影响传输效率，需要对数据进行抽稀操作以降低其数据量，但单一的抽稀会在一定程度上导致信息的丢失。考虑到WebGIS在展示数据时，不同比例尺下对数据展示的精细度程度有所不同，因此，需要将分片数据根据不同比例尺进行抽稀，既可以保证数据在大空间范围与小比例尺下的快速传输又能使得在小空间范围与大比例尺下，保留数据信息的完整性。

（2）、本发明采用格点数据分片处理及索引建立：

由于在实际展示过程中，窗口中所显示的空间范围往往小于数据的实际空间范围，因此，在数据可视化过程中，仅需要部分数据即可，数据的全量传输会导致大量的数据冗余，严重影响传输效率。对数据的切片处理可以有效的解决此问题，其原理为将数据根据空间位置进行大量拆分，根据渲染所需的范围，传输相应的数据。在数据分片处理的过程中，需要建立一套数据与空间位置的计算规则，并建立索引，以便数据的传输。

3）、本发明采用格点数据实时渲染：

Webgl是一种较为底层的web端渲染方式，通过建立顶点着色器与片元着色器来控制屏幕进行渲染展示。简单的格点数据渲染往往会导致色斑图像成方块矩阵状，美观性较差，因此需要对其进行平滑处理以提高可视化效果。

4）、本发明采用分片格点数据同时展示：数据分片带来了数据传输效率的提升，但是由于传输时间有所差异，先到的数据会提前渲染展示，导致色斑不能同时展示，影响效果，而使用异步请求渲染的方式，解决了分片数据不同时展示的问题。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1是本发明的流程框图。

图2是本发明关于实施例中原始格点数据图。

图3是本发明关于实施例中风速格点数据分片渲染展示效果图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述；显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

现结合说明书附图，详细说明本发明的结构特点。

参见图1，一种基于WebGIS的气象格点数据分片展示方法，具体包括如下步骤：

S1、计算标准分辨率

据谷歌地图标准比例尺，建立标准比例尺级别及相应的格点数据分辨率。

S2、格点数据重采样

根据当前格点的实际分辨率，选取最相近的标准比例尺级别，进行格点数据的重采样生成新的标准比例尺格点数据。

S3、生成多层抽稀数据并建立索引

用均值池化的方法，依次对每一比例尺级别进行数据的抽稀处理，并记录每一数据切片的比例尺级别、行数及列数作为数据的索引。

S4、计算展示空间范围

利用WebGIS平台，计算窗口展示的实际空间范围，包括最小经度、最大经度、最小纬度、最大纬度及当前地图比例尺等信息。

S5、计算所需切片数据索引

根据实际空间范围、数据分片规则以及每一分片数据的空间信息，计算出所需切片数据的索引。

S6、分片数据异步请求

Web端通过异步的方式，进行数据请求，提升数据传输效率。

S7、Webgl数据渲染

建立画布及webgl上下文，根据数据的空间信息建立顶点着色器，然后根据色例等样式信息进行片元着色器的建立，同时，添加双线性插值方法以进行格点数据的平滑处理。

S8、WebGIS平台展示

在WebGIS平台上将所渲染的图像进行加载展示。

本发明的基于WebGIS的气象格点数据分片展示方法，通过对气象格点数据、展示形式及渲染过程的分析，总结出了数据处理与实时渲染的核心问题。在数据处理方面，本发明结合实际使用场景，结合地图比例尺进行了数据的多级抽稀，即减少了数据的传输量，又保留了数据的完整性，同时，提出了数据的分片处理及索引建立方法，减少了冗余数据的传输，进一步提升了数据的传输效率。在数据渲染方面，采用Webgl这一高效的渲染方法，并通过双线性插值方法对数据进行平滑操作，提升了数据的展示效果，同时，考虑到数据分片的特性，使用异步请求渲染的方式，解决了分片数据不同时展示的问题。具体地：

1、多比例尺数据抽稀

多比例尺抽稀首先需要根据数据的分辨率和可视化要求抽稀的级别。一般来说比例尺越小，对数据的压缩比例越高，但同时也会导致数据的精度损失越大，本发明采用谷歌地图的标准比例尺级别进行数据抽稀，数据分辨率与抽稀级别的计算方式如下所示：

其中，res是不同级别下的数据分辨率，Res是地图的最高级别（即全球范围）的瓦片分辨率，为156543.033928；n是抽稀级别。在这种情况下，第1级别的分辨率为156543.033928，第2级别的分辨率为78271.516964，第3级别的分辨率为39135.758482，以此类推。

在建立多比例尺级别后，根据当前格点的实际分辨率，选取最相近的比例尺级别，进行格点数据的重采样生成新的标准比例尺格点数据，并通过均值池化算法按各个比例尺进行数据抽稀，均值池化算法大致思路如下：

（1）根据所需级别与当前数据级别计算所需池化窗口的大小。

（2）将格点数据划分为大小为池化窗口的子区域。

（3）对于每个子区域，计算所有格点的平均值，并将该平均值作为子区域的新数值。

（4）将所有子区域的新数值合并成一个新的格点。

2、格点数据分片处理及索引建立

格点数据的分片处理及索引建立基本思路是将完整的格点数据处理成若干个小块，每个小块都有自己的坐标范围和唯一的标识符。

数据分片的定义规则借鉴了GIS中四叉树索引的建立规则，将平面空间递归地分割成四个象限，每个象限对应着一个子节点，然后将子节点再继续递归地分割，直到分割至实际格点数据标准比例尺为止，提取每一数据切片的比例尺级别、行数及列数作为唯一标识，即数据分片的索引。当数据渲染时，通过当前屏幕窗口的空间范围及缩放级别即可计算得到所需数据的索引，并根据索引仅对所需数据进行请求，减少了冗余数据的传输，大大提升了数据的传输效率。

3、格点数据实时渲染

本发明采用webgl渲染技术进行格点数据的实时渲染展示，基本处理流程如下：

（1）数据处理，提取数据的空间范围信息，包括最小经度、最小纬度、最大经度、最大纬度、当前窗口范围、画布尺寸等参数；

（2）结合WebGIS平台，构建画布，提取上下文信息；

（3）构建顶点着色器，其中记录了格点数据的空间信息；

（4）构建片元着色器，根据空间信息、渲染样式进行数据渲染。其中渲染样式包括了色斑的色例信息，同时，为了提升效果，本发明采用了双线性平滑的方法对数据进行平滑操作，其原理如下：

a.取坐标(x,y)的四方向格点数值，四方向及坐标分别为左上(x₁,y₁)、右上(x₂,y₁)、左下(x₁,y₂)及右下(x₂,y₂)，它们的值分别为f(x₁,y₁)、f(x₂,y₁)、f(x₁,y₂)及f(x₂,y₂)。

b.对上方及下方左边位置按如下公式进行线性插值：

式中f(x,y₁)，f(x,y₂)分别为上方及下方坐标插值后的数值。

c.获取当前坐标值f(x,y)，计算如下：

式中f(x,y)为前坐标值。

（5）构建转移矩阵并进行数据渲染，最后加载至WebGIS平台中。

4、分片格点数据同时展示

由于格点数据的分片特性，同一视同窗口内会存在多个数据切片，各个分片数据的请求过程互相独立，在传统的Web开发中，前端与后端的交互模式通常是同步请求，当用户在浏览器中发送请求时，浏览器会一直等待，直到后端服务器处理完请求并返回响应结果，才能继续加载页面和执行下一步操作。这种同步请求的方式存在一个严重的问题：如果后端响应速度较慢，会导致等待时间过长，且数据渲染展示不同步，影响用户体验。

为了解决这个问题，本发明采用异步请求渲染的方式进行数据请求绘制。在前端异步请求中，当用户请求数据时，浏览器不会一直等待，而是向后端服务器发送一个异步请求，并继续加载页面和执行下一步操作。当后端服务器响应请求后，浏览器会异步地将数据传输到前端页面中，并对页面进行相应的操作，从而避免了等待时间过长，达到多切片同时展示的效果。

实施例

以2022年7月26日某一时刻江苏省风速数据为例，对此数据进行格点数分片渲染展示：

1、计算标准分辨率

根据谷歌标准地图比例尺计算格点数据的标准分辨率，根据实际需求，展示10级即可，得到每一级别分辨率（显示两位小数）为156543.03，78271.52，39135.76，19567.88，9783.94，4891.97，2445.98，1222.99，611.50，305.75。

2、格点数据重采样

原始数据参见图2所示，数据中，“data”表示格点数值，“Info”表示格点数据的空间信息，包括最大经度、最小经度、最大纬度、最小纬度、数据行数、数据列数。根据判断选取305.75作为数据的分辨率并进行重采样。

3、生成多层抽稀数据并建立索引

依次对每个级别进行数据抽稀，并进行分片处理，提取级别、行数及列数保存为字符串，作为每一数据分片的名称保存在文件夹中。

4、计算展示空间并计算所需索引

计算当前视角的空间范围，根据分片规则计算出所需分片数据的索引。

5、分片数据异步请求

Web端采用异步请求方式，根据索引名称，在对应目录文件夹中进行分片数据的异步请求。

6、格点数据渲染及展示

采用Webgl渲染技术，建立画布及上下文，通过创建顶点着色器及片元着色器根据所需要的样式进行平滑处理并渲染，最后在WebGIS平台上进行加载显示，显示效果如图3所示。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种基于WebGIS的气象格点数据分片展示方法，其特征在于，具体包括如下步骤：

步骤1、计算标准分辨率：据谷歌地图标准比例尺，建立标准比例尺级别及相应的格点数据分辨率；

步骤2、格点数据重采样：根据当前格点的实际分辨率，选取最相近的标准比例尺级别，进行格点数据的重采样生成新的标准比例尺格点数据；

步骤3、生成多层抽稀数据并建立索引：用均值池化的方法，依次对每一比例尺级别进行数据的抽稀处理，并记录每一数据切片的比例尺级别、行数及列数作为数据的索引；

步骤4、计算展示空间范围：利用WebGIS平台，计算窗口展示的实际空间范围，包括最小经度、最大经度、最小纬度、最大纬度及当前地图比例尺信息；

步骤5、计算所需切片数据索引：根据实际空间范围、数据分片规则以及每一分片数据的空间信息，计算出所需切片数据的索引；

步骤6、分片数据异步请求：Web端通过异步的方式，进行数据请求，提升数据传输效率；

步骤7、Webgl数据渲染：采用webgl渲染方法进行格点数据的实时渲染；

步骤8、WebGIS平台展示：在WebGIS平台上将所渲染的图像进行加载展示。

2.根据权利要求1所述的一种基于WebGIS的气象格点数据分片展示方法，其特征在于，在步骤3中，所述均值池化算法，具体包括如下步骤：

步骤31、根据所需级别与当前数据级别计算所需池化窗口的大小；

步骤32、将格点数据划分为大小为池化窗口的子区域；

步骤33、对于每个子区域，计算所有格点的平均值，并将该平均值作为子区域的新数值；

步骤34、将所有子区域的新数值合并成一个新的格点。

3.根据权利要求1所述的一种基于WebGIS的气象格点数据分片展示方法，其特征在于，在步骤3中，数据分辨率与抽稀级别的计算方式如下：

（1）

式（1）中，res是不同级别下的数据分辨率，Res是地图的最高级别的瓦片分辨率，为156543.033928；n是抽稀级别。

4.根据权利要求1所述的一种基于WebGIS的气象格点数据分片展示方法，其特征在于，在步骤5中，切片数据索引的具体步骤如下：

步骤51、将平面空间递归地分割成四个象限，每个象限对应着一个子节点；

步骤52、然后将子节点再继续递归地分割，直到分割至实际格点数据标准比例尺为止；

步骤53、提取每一数据切片的比例尺级别、行数及列数作为唯一标识，即为数据分片的索引。

5.根据权利要求1所述的一种基于WebGIS的气象格点数据分片展示方法，其特征在于，在步骤7中，所述webgl渲染方法包括如下步骤：

步骤71、数据处理，提取数据的空间范围信息，包括最小经度、最小纬度、最大经度、最大纬度、当前窗口范围、画布尺寸参数；

步骤72、结合WebGIS平台，构建画布，提取上下文信息；

步骤73、构建顶点着色器，其中记录了格点数据的空间信息；

步骤74、构建片元着色器，根据空间信息、渲染样式进行数据渲染。

6.根据权利要求5所述的一种基于WebGIS的气象格点数据分片展示方法，其特征在于，在步骤74中，所述渲染样式包括色斑的色例信息。

7.根据权利要求1或5所述的一种基于WebGIS的气象格点数据分片展示方法，其特征在于，在进行格点数据中，添加双线性插值方法以进行格点数据的平滑处理，所述双线性插值方法包括如下步骤：

a、取坐标(x,y)的四方向格点数值，四方向及坐标分别为左上(x₁,y₁)、右上(x₂,y₁)、左下(x₁,y₂)及右下(x₂,y₂)，它们的值分别为f(x₁,y₁)、f(x₂,y₁)、f(x₁,y₂)及f(x₂,y₂)；

b、对上方及下方左边位置按如下公式进行线性插值：

（2）

（3）

式（2）和（3）中，f(x,y₁)，f(x,y₂)分别为上方及下方坐标插值后的数值；

c、获取当前坐标值f(x,y)，计算如下：

（4）

式（4）中，f(x,y)为前坐标值。