可适配WebGIS平台的格点数据可视化方法和系统技术方案

本发明专利技术提供了一种可适配WebGIS平台的格点数据可视化方法和系统，系统包括服务器端和浏览器端：服务器端压缩格点数据于单通道灰度图像中并发送到浏览器端，浏览器端生成数据纹理、色尺纹理，创建WebGL着色器程序，绘制各个像素对应的点图元，完成可视化视图渲染显示，同时提供与通用WebGIS平台适配的工作模式。本发明专利技术采用数据压缩方式一次性传输全部格点数据，提升了传输效率；渲染阶段对显示区域内每个像素点绘制一个图元，优化了显示效果。本发明专利技术提供了元素覆盖、图层嵌入两种与WebGIS平台适配的方式，为格点数据在通用WebGIS平台上的可视化提供了解决方案。可视化提供了解决方案。可视化提供了解决方案。

【技术实现步骤摘要】
可适配WebGIS平台的格点数据可视化方法和系统


[0001]本专利技术属于格点数据可视化
，特别涉及一种可适配WebGIS平台的格点数据可视化方法和系统。

技术介绍

[0002]格点数据将一定地理范围划分为若干网格，每个网格内格点数值对应表示经纬度子范围内实体的属性。常见的格点数据包括降水量、温度、湿度等气象数据，以及高程、水资源分布等地理数据；格点数据还可以用于表示能见度、人口数量、车流量等的分布情况。
[0003]格点数据适合表示地理信息，常与地理信息系统（GIS）平台结合。浏览器端常见的WebGIS平台包括Openlayers、Leaflet、Mapbox等。
[0004]目前，格点数据在浏览器端的可视化方法通常为：服务器端由格点数据利用已有可视化方法绘制图片，浏览器端获取图片并进行裁切、缩放等变形操作后，将其设置到<img>等HTML元素中进行显示。该方法存在的缺陷在于：（1）难以取得显示效果与显示速度间的平衡：传输分辨率较低的图片时，变形操作使图片模糊，显示效果差；传输分辨率较高的图片则会导致带宽资源占用大、传输时间长、显示速度慢；（2）难以与WebGIS平台适配工作：将图片以半透明贴图的形式覆盖到地图显示区域上，用户进行地图拖动、缩放等使地图视野变动的交互操作时，变形模糊程度严重，且视野超出当前图片范围时需要重复向服务器端获取图片。

技术实现思路

[0005]本专利技术的目的在于提供一种可适配WebGIS平台的格点数据可视化方法和系统，以解决现有方法中存在的难以取得显示效果与显示速度间的平衡、难以与WebGIS平台适配工作的问题。
[0006]为实现上述目的，本专利技术提供技术方案如下：本专利技术首先提供了一种可适配WebGIS平台的格点数据可视化方法，其包括如下步骤：1）读取原始格点数据二进制文件，利用压缩函数将格点数据存储于单通道灰度图像中；2）创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z
‑
index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer
‑
events属性值为none使其不响应用户交互事件；3）获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理；4）根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理；5）顶点着色器读取二维数据纹理，接收像素点的页面坐标和WebGIS地图当前视野
范围参数、、、 ，其中、分别为经度、纬度，角标min、max分别指示对应变量的最小值、最大值；一方面，将页面坐标(x,y)转换为二维数据纹理上的坐标，读取对应程度值传给片段着色器，另一方面，计算并返回页面坐标对应的剪裁空间上的坐标；片段着色器读取二维色尺纹理，接收程度值，计算程度值在二维色尺纹理上的坐标，读取并返回颜色值；调用WebGL API连接顶点着色器与片段着色器，初始化WebGL绘图程序；6）创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制；7）在WebGIS平台生成的地图容器上注册交互事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。
[0007]本专利技术还提供了另一种可适配WebGIS平台的格点数据可视化方法，其将格点数据可视化结果以图层化形式嵌入WebGIS平台，具体包括如下步骤：a）按照前述方法的步骤1）
‑
步骤6）完成格点数据可视化绘制，然后创建一个与地图容器元素尺寸相同的<canvas>元素，设置其二维渲染上下文；b）调用二维渲染上下文的drawImage方法将WebGL渲染结果绘制到二维上下文中，调用<canvas>元素toDataURL方法输出绘制结果图像URL；c）使用绘制结果图像URL创建WebGIS图像图层；d）在WebGIS平台生成的地图容器上注册事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时，进行重绘，利用重绘结果URL更新WebGIS图像图层。
[0008]本专利技术还进一步提供了一种可适配WebGIS平台的格点数据可视化系统，其包括服务器端、浏览器端，所述浏览器端还包括顶点着色器、片段着色器和交互事件监听器；其中，所述服务器端压缩格点数据于单通道灰度图像中，将其发送到浏览器端完成可视化视图渲染显示；其中，所述服务器端读取原始格点数据二进制文件，利用压缩函数将格点数据存储于单通道灰度图像中。
[0009]进一步的，所述浏览器端创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z
‑
index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer
‑
events属性值为none使其不响应用户交互事件。
[0010]进一步的，浏览器端自服务器获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理。
[0011]进一步的，浏览器端根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理。
[0012]进一步的，浏览器端的顶点着色器读取数据纹理，接收像素点的页面坐标和WebGIS地图当前视野范围参数、、、 ，其中、分别为经度、纬度，角标min、max分别指示对应变量的最小值、最大值；一方面，将页面坐标转换为数据纹理上的坐标，读取对应数值（程度值）传给片段着色器，另一方面，计算并返回页面坐标对应的剪裁空间上的坐标；片段着色器读取色尺纹理，接收程度值，计算程度值在色尺纹理上的坐标，读取并返回颜色值；浏览器端调用WebGL API连接顶点着色器与片段着色器，初始化
WebGL绘图程序。
[0013]进一步的，浏览器端创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制。
[0014]进一步的，所述交互事件监听器监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。
[0015]与现有技术相比，本专利技术采用数据压缩方式一次性传输全部格点数据，提升了传输效率；渲染阶段对显示区域内每一个像素点绘制一个图元，解决了模糊问题，优化了显示效果。另一方面，本专利技术提供了元素覆盖、图层嵌入两种与WebGIS平台适配的方式，为格点数据在通用WebGIS平台上的可视化提供了解决方案。
附图本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可适配WebGIS平台的格点数据可视化方法，其特征在于，包括如下步骤：1）读取原始格点数据二进制文件，利用压缩函数将格点数据存储于单通道灰度图像中；2）创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z
‑
index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer
‑
events属性值为none使其不响应用户交互事件；3）获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理；4）根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理；5）顶点着色器读取二维数据纹理，接收像素点的页面坐标和WebGIS地图当前视野范围参数、、、 ，其中、分别为经度、纬度，角标min、max分别指示对应变量的最小值、最大值；一方面，将页面坐标(x,y)转换为二维数据纹理上的坐标，读取对应程度值传给片段着色器，另一方面，计算并返回页面坐标对应的剪裁空间上的坐标；片段着色器读取二维色尺纹理，接收程度值，计算程度值在二维色尺纹理上的坐标，读取并返回颜色值；调用WebGL API连接顶点着色器与片段着色器，初始化WebGL绘图程序；6）创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制；7）在WebGIS平台生成的地图容器上注册交互事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。2.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于，步骤1）所述的压缩函数为，其中为灰度值，为原始浮点型数值，、为根据格点数据类型设置的参数，其中，，round()为取整函数；，max()与min()分别为取最大值与最小值函数。3.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于，步骤1）所述的单通道灰度图像的构建方法具体步骤为：创建一个宽为格点数据水平方向数据数量，高为格点数据竖直方向数据数量，颜色模式为灰度模式，图像深度为8位的空白图像；遍历格点数据中所有格点数值，计算并设置对应像素的灰度值。4.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于，步骤4）所述的二维色尺纹理的生成方法具体步骤包括：4.1）读取色彩规则数据，其中为[0,255]区间内的浮点数，color为颜色值，每组(stop,color)描述了对应灰度值下的颜色，n为色彩规则总数量；4.2）创建一个宽为256像素，高为1像素的<canvas>元素，设置其二维渲染上下文；创建水平方向的线性渐变，遍历色彩规则中的每组数据，添加渐变；将生成的渐变填充到渲染上下文中；4.3）取二维渲染上下文的图像数据，调用WebGL API生成色尺纹理。
5.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于，步骤5）所述的页面坐标(x,y)到转换为二维数据纹理上的坐标的方法，具体步骤为：5.1）未传入WebGIS平台参数时，设置视野范围为西经180度到东经180度，南纬90度到北纬90度；5.2）将视野范围转换到EPSG:3857坐标系；EPS...

【专利技术属性】
技术研发人员：罗喜伶，王宇鹏，周泽全，
申请(专利权)人：北京航空航天大学杭州创新研究院，
类型：发明
国别省市：