CN114491351A - 可适配WebGIS平台的格点数据可视化方法和系统 - Google Patents

可适配WebGIS平台的格点数据可视化方法和系统 Download PDF

Info

Publication number
CN114491351A
CN114491351A CN202210404752.9A CN202210404752A CN114491351A CN 114491351 A CN114491351 A CN 114491351A CN 202210404752 A CN202210404752 A CN 202210404752A CN 114491351 A CN114491351 A CN 114491351A
Authority
CN
China
Prior art keywords
data
webgis
point data
webgl
color
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210404752.9A
Other languages
English (en)
Other versions
CN114491351B (zh
Inventor
罗喜伶
王宇鹏
周泽全
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Innovation Research Institute of Beihang University
Original Assignee
Hangzhou Innovation Research Institute of Beihang University
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Innovation Research Institute of Beihang University filed Critical Hangzhou Innovation Research Institute of Beihang University
Priority to CN202210404752.9A priority Critical patent/CN114491351B/zh
Publication of CN114491351A publication Critical patent/CN114491351A/zh
Application granted granted Critical
Publication of CN114491351B publication Critical patent/CN114491351B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/40—Analysis of texture
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/90—Determination of colour characteristics
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02A—TECHNOLOGIES FOR ADAPTATION TO CLIMATE CHANGE
    • Y02A90/00—Technologies having an indirect contribution to adaptation to climate change
    • Y02A90/10—Information and communication technologies [ICT] supporting adaptation to climate change, e.g. for weather forecasting or climate simulation

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Processing Or Creating Images (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

可适配WebGIS平台的格点数据可视化方法和系统
技术领域
本发明属于格点数据可视化技术领域，特别涉及一种可适配WebGIS平台的格点数据可视化方法和系统。
背景技术
格点数据将一定地理范围划分为若干网格，每个网格内格点数值对应表示经纬度子范围内实体的属性。常见的格点数据包括降水量、温度、湿度等气象数据，以及高程、水资源分布等地理数据；格点数据还可以用于表示能见度、人口数量、车流量等的分布情况。
格点数据适合表示地理信息，常与地理信息系统（GIS）平台结合。浏览器端常见的WebGIS平台包括Openlayers、Leaflet、Mapbox等。
目前，格点数据在浏览器端的可视化方法通常为：服务器端由格点数据利用已有可视化方法绘制图片，浏览器端获取图片并进行裁切、缩放等变形操作后，将其设置到<img>等HTML元素中进行显示。该方法存在的缺陷在于：（1）难以取得显示效果与显示速度间的平衡：传输分辨率较低的图片时，变形操作使图片模糊，显示效果差；传输分辨率较高的图片则会导致带宽资源占用大、传输时间长、显示速度慢；（2）难以与WebGIS平台适配工作：将图片以半透明贴图的形式覆盖到地图显示区域上，用户进行地图拖动、缩放等使地图视野变动的交互操作时，变形模糊程度严重，且视野超出当前图片范围时需要重复向服务器端获取图片。
发明内容
本发明的目的在于提供一种可适配WebGIS平台的格点数据可视化方法和系统，以解决现有方法中存在的难以取得显示效果与显示速度间的平衡、难以与WebGIS平台适配工作的问题。
为实现上述目的，本发明提供技术方案如下：
本发明首先提供了一种可适配WebGIS平台的格点数据可视化方法，其包括如下步骤：
1）读取原始格点数据二进制文件，利用压缩函数将格点数据存储于单通道灰度图像中；
2）创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z-index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer-events属性值为none使其不响应用户交互事件；
3）获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理；
4）根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理；
5）顶点着色器读取二维数据纹理，接收像素点的页面坐标和WebGIS地图当前视野 范围参数
Figure 471478DEST_PATH_IMAGE001
、
Figure 919777DEST_PATH_IMAGE002
、
Figure 965093DEST_PATH_IMAGE003
、
Figure 766827DEST_PATH_IMAGE004
，其中
Figure 112358DEST_PATH_IMAGE005
、
Figure 590612DEST_PATH_IMAGE006
分别为经度、纬度，角标min、max分别 指示对应变量的最小值、最大值；一方面，将页面坐标(x,y)转换为二维数据纹理上的坐标
Figure 123225DEST_PATH_IMAGE007
，读取对应程度值传给片段着色器，另一方面，计算并返回页面坐标对应的剪裁空间 上的坐标
Figure 994229DEST_PATH_IMAGE008
；片段着色器读取二维色尺纹理，接收程度值，计算程度值在二维色尺 纹理上的坐标，读取并返回颜色值；调用WebGL API连接顶点着色器与片段着色器，初始化 WebGL绘图程序；
6）创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制；
7）在WebGIS平台生成的地图容器上注册交互事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。
本发明还提供了另一种可适配WebGIS平台的格点数据可视化方法，其将格点数据可视化结果以图层化形式嵌入WebGIS平台，具体包括如下步骤：
a）按照前述方法的步骤1）-步骤6）完成格点数据可视化绘制，然后创建一个与地图容器元素尺寸相同的<canvas>元素，设置其二维渲染上下文；
b）调用二维渲染上下文的drawImage方法将WebGL渲染结果绘制到二维上下文中，调用<canvas>元素toDataURL方法输出绘制结果图像URL；
c）使用绘制结果图像URL创建WebGIS图像图层；
d）在WebGIS平台生成的地图容器上注册事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时，进行重绘，利用重绘结果URL更新WebGIS图像图层。
本发明还进一步提供了一种可适配WebGIS平台的格点数据可视化系统，其包括服务器端、浏览器端，所述浏览器端还包括顶点着色器、片段着色器和交互事件监听器；其中，所述服务器端压缩格点数据于单通道灰度图像中，将其发送到浏览器端完成可视化视图渲染显示；
其中，所述服务器端读取原始格点数据二进制文件，利用压缩函数将格点数据存储于单通道灰度图像中。
进一步的，所述浏览器端创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z-index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer-events属性值为none使其不响应用户交互事件。
进一步的，浏览器端自服务器获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理。
进一步的，浏览器端根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理。
进一步的，浏览器端的顶点着色器读取数据纹理，接收像素点的页面坐标和 WebGIS地图当前视野范围参数
Figure 928687DEST_PATH_IMAGE001
、
Figure 577843DEST_PATH_IMAGE002
、
Figure 863331DEST_PATH_IMAGE003
、
Figure 865922DEST_PATH_IMAGE004
，其中
Figure 795832DEST_PATH_IMAGE005
、
Figure 756834DEST_PATH_IMAGE006
分别为经度、纬 度，角标min、max分别指示对应变量的最小值、最大值；一方面，将页面坐标转换为数据纹理 上的坐标，读取对应数值（程度值）传给片段着色器，另一方面，计算并返回页面坐标对应的 剪裁空间上的坐标；片段着色器读取色尺纹理，接收程度值，计算程度值在色尺纹理上的坐 标，读取并返回颜色值；浏览器端调用WebGL API连接顶点着色器与片段着色器，初始化 WebGL绘图程序。
进一步的，浏览器端创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制。
进一步的，所述交互事件监听器监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。
与现有技术相比，本发明采用数据压缩方式一次性传输全部格点数据，提升了传输效率；渲染阶段对显示区域内每一个像素点绘制一个图元，解决了模糊问题，优化了显示效果。另一方面，本发明提供了元素覆盖、图层嵌入两种与WebGIS平台适配的方式，为格点数据在通用WebGIS平台上的可视化提供了解决方案。
附图说明
为了更清楚地说明本发明方法，下面将对发明方法描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明的格点数据可视化方法流程图。
图2为本发明的色尺纹理的生成方法流程图。
图3为本发明的图层化WebGIS平台嵌入方法流程图。
图4为本发明方法和传统贴图方法的显示效果对比图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，本发明的实施例公开了一种可适配WebGIS平台的格点数据可视化系统，其包括服务器端、浏览器端，所述浏览器端还包括顶点着色器、片段着色器和交互事件监听器；其中，所述服务器端用于压缩格点数据于单通道灰度图像中，将其发送到浏览器端；浏览器完成可视化视图渲染显示。
进一步的，基于上述系统，本发明提供了一种可适配WebGIS平台的格点数据可视化方法，如图1所示，该方法包括如下步骤：
S11服务器端读取原始格点数据二进制文件；
S12服务器端利用压缩函数将各个格点数据值映射为[0,255]区间上的整数值，将压缩后的数值存储于单通道灰度图像中。
S2浏览器端创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z-index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer-events属性值为none使其不响应用户交互事件。
S3浏览器端获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理。
S4浏览器端根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理。
S51浏览器端包含顶点着色器与片段着色器：顶点着色器读取二维数据纹理，接收 像素点的页面坐标和WebGIS地图当前视野范围参数
Figure 388673DEST_PATH_IMAGE001
、
Figure 194955DEST_PATH_IMAGE002
、
Figure 244950DEST_PATH_IMAGE003
、
Figure 111275DEST_PATH_IMAGE004
，其中
Figure 105776DEST_PATH_IMAGE005
、
Figure 843313DEST_PATH_IMAGE006
分别为经度、纬度，角标min、max分别指示对应变量的最小值、最大值；一方面，将页 面坐标(x,y)转换为二维数据纹理上的坐标
Figure 872448DEST_PATH_IMAGE007
；
S52浏览器端读取该坐标处的数值（程度值）传给片段着色器，另一方面，计算并返 回页面坐标对应的剪裁空间上的坐标
Figure 785041DEST_PATH_IMAGE008
；片段着色器读取二维色尺纹理，接收程度 值，计算程度值在二维色尺纹理上的坐标，读取并返回颜色值，
S53浏览器端调用WebGL API连接顶点着色器与片段着色器，初始化WebGL绘图程序（将顶点着色器与片段着色器连接起来成为绘图程序）。
S6浏览器端创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制。
S7浏览器端在WebGIS平台生成的地图容器上注册交互事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。
在本发明的一个优选实施例中，步骤S1中压缩函数为
Figure 266838DEST_PATH_IMAGE009
，其中
Figure 805135DEST_PATH_IMAGE010
为灰度 值，
Figure 423198DEST_PATH_IMAGE011
为原始浮点型数值，
Figure 896905DEST_PATH_IMAGE012
、
Figure 741364DEST_PATH_IMAGE013
为根据格点数据类型设置的参数，步骤包括：（1）
Figure 427561DEST_PATH_IMAGE014
，其中round()为取整函数；（2）
Figure 555922DEST_PATH_IMAGE015
，其中max()与 min()分别为取最大值与最小值函数。
在本发明的一个优选实施例中，步骤S1中单通道灰度图像构建方法为：创建一个宽为格点数据水平方向数据数量，高为格点数据竖直方向数据数量，颜色模式为灰度模式，图像深度为8位的空白图像；遍历格点数据中所有格点数值，对应设置图像像素的灰度值。
在本发明的一个优选实施例中，如图2所示，步骤S4中色尺纹理的生成方法为：
1）创建一个宽为256像素，高为1像素的<canvas>元素，设置其二维渲染上下文；
2）读取色彩规则数据
Figure 200530DEST_PATH_IMAGE016
，其中
Figure 391340DEST_PATH_IMAGE017
为 [0,255]区间内的浮点数，color为颜色值，每组(stop,color)描述了对应灰度值下的颜色，n为色彩规则总数量；
3）创建水平方向的线性渐变，遍历色彩规则中的每组数据
Figure 22173DEST_PATH_IMAGE018
，添加渐变
Figure 614828DEST_PATH_IMAGE019
；将生成的渐变填充到渲染上下文中；
4）取二维渲染上下文的图像数据，应用WebGL线性插值方法生成色尺纹理。
在本发明的一个优选实施例中，步骤S51中页面坐标(x,y)转换为二维数据纹理上 的坐标
Figure 554971DEST_PATH_IMAGE007
的转化方法为：
1）未传入WebGIS平台参数时，设置视野范围为西经180度到东经180度，南纬90度到北纬90度；
2）将视野范围转换到EPSG:3857坐标系；EPSG:3857坐标系下页面坐标对应的地理 坐标
Figure 233077DEST_PATH_IMAGE020
：
Figure DEST_PATH_IMAGE021
，
Figure 198759DEST_PATH_IMAGE022
，其中lon、lat分别为经度、纬度，w、h分别为<canvas>元素宽、高，角标min、max分别指示对应变量的最 小值、最大值；将其转换到EPSG:4326坐标系坐标
Figure 645921DEST_PATH_IMAGE023
；
3）二维数据纹理坐标
Figure 771614DEST_PATH_IMAGE007
通过下式得到：
Figure 937016DEST_PATH_IMAGE024
，
Figure 909651DEST_PATH_IMAGE025
。
在本发明的一个优选实施例中，步骤S51中页面坐标(x,y)到与剪裁空间坐标
Figure 476899DEST_PATH_IMAGE008
的对应关系为：
Figure 493265DEST_PATH_IMAGE026
，
Figure 411543DEST_PATH_IMAGE027
，其中w、h分别为<canvas>元素 宽、高。
如图3所示，本发明还提供了另一种可适配WebGIS平台的格点数据可视化方法，其将格点数据可视化结果以图层化形式嵌入WebGIS平台，具体包括如下步骤：
a）按照前述方法的步骤S11-步骤S6完成格点数据可视化绘制，然后创建一个与地图容器元素尺寸相同的<canvas>元素，设置其二维渲染上下文；
b）调用二维渲染上下文的drawImage方法将WebGL渲染结果绘制到二维上下文中，调用<canvas>元素toDataURL方法输出绘制结果图像URL；
c）使用绘制结果图像URL创建WebGIS图像图层；
d）在WebGIS平台生成的地图容器上注册事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时，进行重绘，利用重绘结果URL更新WebGIS图像图层。
以下对本发明图1所示方法和传统方法进行比较。其中，所采用的传统的格点数据在浏览器端的可视化方法为贴图方案：浏览器端获取图片并进行裁切、缩放等变形操作后，将其设置到<img>等HTML元素中进行显示。在此对比本发明方案与贴图方案在传输速度、渲染时间、显示效果方面的差异。
以渲染全球雷达基本反射率数据为例，在相同机器、相同网络环境下进行5次实验并取平均值，得到本发明方案与传统贴图方案性能参数如下表所示。该场景下，传输图片总数量方面，传统方案需要传输若干图片共同组成全球数据可视化结果；本方案仅需要传输一个包含全球格点数据的图片。传输图片总大小方面，传统方案需要传输的数据量约为本方案的10倍。传输时间方面，传统方案下浏览器并行发起24个请求，总耗时6.17s；本方案仅发起1个请求，总耗时1.88s。渲染时间方面，传统方案耗时约为本方案的10倍。
Figure 46923DEST_PATH_IMAGE028
显示效果方面，如图4所示，左边为本发明方案显示效果，右边为传统方案显示效果。可以看出，传统方案的图片经过裁切、放大后产生明显的模糊，图片边缘存在严重失真；在相同的缩放层级下，本方案显示效果可以保持均匀连续，不会发生明显失真。
最后应说明的是，以上各实施例仅用以说明本发明的技术方案，而非对其限制。尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或全部技术特征进行等同替换，而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (8)

1.一种可适配WebGIS平台的格点数据可视化方法，其特征在于，包括如下步骤：
1）读取原始格点数据二进制文件，利用压缩函数将格点数据存储于单通道灰度图像中；
2）创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z-index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer-events属性值为none使其不响应用户交互事件；
3）获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理；
4）根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理；
5）顶点着色器读取二维数据纹理，接收像素点的页面坐标和WebGIS地图当前视野范围 参数
Figure 239361DEST_PATH_IMAGE001
、
Figure 953239DEST_PATH_IMAGE002
、
Figure 388768DEST_PATH_IMAGE003
、
Figure 315136DEST_PATH_IMAGE004
，其中
Figure 536033DEST_PATH_IMAGE005
、
Figure 279867DEST_PATH_IMAGE006
分别为经度、纬度，角标min、max分别指示 对应变量的最小值、最大值；一方面，将页面坐标(x,y)转换为二维数据纹理上的坐标
Figure 78059DEST_PATH_IMAGE007
，读取对应程度值传给片段着色器，另一方面，计算并返回页面坐标对应的剪裁空间 上的坐标
Figure 683484DEST_PATH_IMAGE008
；片段着色器读取二维色尺纹理，接收程度值，计算程度值在二维色尺 纹理上的坐标，读取并返回颜色值；调用WebGL API连接顶点着色器与片段着色器，初始化 WebGL绘图程序；
6）创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制；
7）在WebGIS平台生成的地图容器上注册交互事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。
2.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于， 步骤1）所述的压缩函数为
Figure 883521DEST_PATH_IMAGE009
，其中
Figure 332344DEST_PATH_IMAGE010
为灰度值，
Figure 493198DEST_PATH_IMAGE011
为原始浮点型数值，
Figure 761369DEST_PATH_IMAGE012
、
Figure 940546DEST_PATH_IMAGE013
为根 据格点数据类型设置的参数，其中，
Figure 635970DEST_PATH_IMAGE014
，round()为取整函数；
Figure 284120DEST_PATH_IMAGE015
，max()与min()分别为取最大值与最小值函数。
3.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于，步骤1）所述的单通道灰度图像的构建方法具体步骤为：创建一个宽为格点数据水平方向数据数量，高为格点数据竖直方向数据数量，颜色模式为灰度模式，图像深度为8位的空白图像；遍历格点数据中所有格点数值，计算并设置对应像素的灰度值。
4.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于，步骤4）所述的二维色尺纹理的生成方法具体步骤包括：
4.1）读取色彩规则数据
Figure 90402DEST_PATH_IMAGE016
，其中
Figure 999452DEST_PATH_IMAGE017
为[0, 255]区间内的浮点数，color为颜色值，每组(stop,color)描述了对应灰度值下的颜色，n为 色彩规则总数量；
4.2）创建一个宽为256像素，高为1像素的<canvas>元素，设置其二维渲染上下文；创建 水平方向的线性渐变，遍历色彩规则中的每组数据
Figure 990410DEST_PATH_IMAGE018
，添加渐变
Figure 250490DEST_PATH_IMAGE019
；将生成的渐变填充到渲染上下文中；
4.3）取二维渲染上下文的图像数据，调用WebGL API生成色尺纹理。
5.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于， 步骤5）所述的页面坐标(x,y)到转换为二维数据纹理上的坐标
Figure 735830DEST_PATH_IMAGE007
的方法，具体步骤为：
5.1）未传入WebGIS平台参数时，设置视野范围为西经180度到东经180度，南纬90度到北纬90度；
5.2）将视野范围转换到EPSG:3857坐标系；EPSG:3857坐标系下页面坐标对应的地理坐 标
Figure 499386DEST_PATH_IMAGE020
：
Figure 926825DEST_PATH_IMAGE021
，
Figure 408622DEST_PATH_IMAGE022
，其中lon、lat分别为经度、纬度，w、h分别为<canvas>元素宽、高，角标min、max分别指示对应变量的最 小值、最大值；将其转换到EPSG:4326坐标系坐标
Figure 556707DEST_PATH_IMAGE023
；
5.3）二维数据纹理坐标
Figure 315715DEST_PATH_IMAGE007
通过下式得到：
Figure 523843DEST_PATH_IMAGE024
，
Figure 886079DEST_PATH_IMAGE025
。
6.根据权利要求1所述的一种可适配WebGIS平台的格点数据可视化方法，其特征在于， 步骤5）中，页面坐标(x,y)到与剪裁空间坐标
Figure 837854DEST_PATH_IMAGE008
的对应关系为：
Figure 716948DEST_PATH_IMAGE026
，
Figure 95977DEST_PATH_IMAGE027
，其中w、h分别为<canvas>元素宽、高。
7.一种可适配WebGIS平台的格点数据可视化方法，其特征在于，将格点数据可视化结果以图层化形式嵌入WebGIS平台，具体包括如下步骤：
a）按照权利要求1-6中任一项所述方法的步骤1）-步骤6）完成格点数据可视化绘制，然后创建一个与地图容器元素尺寸相同的<canvas>元素，设置其二维渲染上下文；
b）调用二维渲染上下文的drawImage方法将WebGL渲染结果绘制到二维上下文中，调用<canvas>元素toDataURL方法输出绘制结果图像URL；
c）使用绘制结果图像URL创建WebGIS图像图层；
d）在WebGIS平台生成的地图容器上注册事件监听器，监听使WebGIS地图视野范围变更的交互事件，交互事件触发时，进行重绘，利用重绘结果URL更新WebGIS图像图层。
8.一种可适配WebGIS平台的格点数据可视化系统，其特征在于，包括服务器端、浏览器端，所述浏览器端还包括顶点着色器、片段着色器和交互事件监听器；其中，所述服务器端压缩格点数据于单通道灰度图像中，将其发送到浏览器端完成可视化视图渲染显示；
其中，所述服务器端读取原始格点数据二进制文件，利用压缩函数将格点数据存储于单通道灰度图像中；
所述浏览器端创建与WebGIS平台生成的地图容器元素尺寸相同的<canvas>元素，设置其WebGL渲染上下文，将其添加为与地图容器同级的DOM元素，并设置z-index属性使其覆盖于地图容器元素之上，设置opacity属性值小于1使其具有一定透明度，设置pointer-events属性值为none使其不响应用户交互事件；
浏览器端自服务器获取单通道灰度图像，应用WebGL插值方法生成存有图像中数据的二维数据纹理；
浏览器端根据格点数据类型设置色彩规则，生成存有颜色值的二维色尺纹理；
浏览器端的顶点着色器读取数据纹理，接收像素点的页面坐标和WebGIS地图当前视野 范围参数
Figure 677000DEST_PATH_IMAGE001
、
Figure 166887DEST_PATH_IMAGE002
、
Figure 759543DEST_PATH_IMAGE003
、
Figure 450418DEST_PATH_IMAGE004
，其中
Figure 128524DEST_PATH_IMAGE005
、
Figure 812315DEST_PATH_IMAGE006
分别为经度、纬度，角标min、max分别 指示对应变量的最小值、最大值；一方面，将页面坐标转换为数据纹理上的坐标，读取对应 程度值传给片段着色器，另一方面，计算并返回页面坐标对应的剪裁空间上的坐标；片段着 色器读取色尺纹理，接收程度值，计算程度值在色尺纹理上的坐标，读取并返回颜色值；浏 览器端调用WebGL API连接顶点着色器与片段着色器，初始化WebGL绘图程序；
浏览器端创建包含<canvas>绘图区域全部像素点的顶点矩阵，存入WebGL绘图缓冲区，调用WebGL API绘制点图元，完成区域内所有像素点的绘制；
所述交互事件监听器监听使WebGIS地图视野范围变更的交互事件，交互事件触发时清除WebGL上下文缓存并重新绘制格点数据。
CN202210404752.9A 2022-04-18 2022-04-18 可适配WebGIS平台的格点数据可视化方法和系统 Active CN114491351B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210404752.9A CN114491351B (zh) 2022-04-18 2022-04-18 可适配WebGIS平台的格点数据可视化方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210404752.9A CN114491351B (zh) 2022-04-18 2022-04-18 可适配WebGIS平台的格点数据可视化方法和系统

Publications (2)

Publication Number Publication Date
CN114491351A true CN114491351A (zh) 2022-05-13
CN114491351B CN114491351B (zh) 2022-08-23

Family

ID=81489649

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210404752.9A Active CN114491351B (zh) 2022-04-18 2022-04-18 可适配WebGIS平台的格点数据可视化方法和系统

Country Status (1)

Country Link
CN (1) CN114491351B (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115965752A (zh) * 2022-12-19 2023-04-14 中科三清科技有限公司 环境数据分布图的生成方法、装置、存储介质及电子设备
CN116610746A (zh) * 2023-07-17 2023-08-18 南京壹波云信息科技有限公司 一种基于WebGIS的气象格点数据分片展示方法
CN117392298A (zh) * 2023-10-18 2024-01-12 亿海蓝（北京）数据技术股份公司 基于WebGIS平台的图像渲染方法、系统、存储介质和电子设备

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1072987A1 (en) * 1999-07-29 2001-01-31 International Business Machines Corporation Geographic web browser and iconic hyperlink cartography
US20030030634A1 (en) * 1996-11-12 2003-02-13 Sang'udi Gerald P. Computer-related method, system, and program product for controlling data visualization in external dimension(s)
CN103606192A (zh) * 2013-11-27 2014-02-26 国家电网公司 一种基于三维虚拟地球的风场可视化展示方法
CN108447121A (zh) * 2018-03-26 2018-08-24 南京恩瑞特实业有限公司 NRIETWebGIS动态色斑图绘制方法
CN109783177A (zh) * 2019-01-18 2019-05-21 成都新橙北斗智联有限公司 一种基于HTML5 Canvas的GIS栅格数据渲染方法
CN109801352A (zh) * 2018-12-28 2019-05-24 宁波市气象台 一种气象格点数据动画显示方法
CN110298781A (zh) * 2019-07-04 2019-10-01 南京恩瑞特实业有限公司 基于WebGL的气象雷达及卫星大数据可视化方法
CN110544290A (zh) * 2019-09-06 2019-12-06 广东省城乡规划设计研究院 数据渲染方法及装置
CN111080782A (zh) * 2019-10-17 2020-04-28 湖北泰跃卫星技术发展股份有限公司 基于实景三维地理信息系统的可视化系统
CN112102437A (zh) * 2020-08-04 2020-12-18 中科三清科技有限公司 一种基于Canvas的雷达图生成方法、装置、存储介质及终端
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030030634A1 (en) * 1996-11-12 2003-02-13 Sang'udi Gerald P. Computer-related method, system, and program product for controlling data visualization in external dimension(s)
EP1072987A1 (en) * 1999-07-29 2001-01-31 International Business Machines Corporation Geographic web browser and iconic hyperlink cartography
CN103606192A (zh) * 2013-11-27 2014-02-26 国家电网公司 一种基于三维虚拟地球的风场可视化展示方法
CN108447121A (zh) * 2018-03-26 2018-08-24 南京恩瑞特实业有限公司 NRIETWebGIS动态色斑图绘制方法
CN109801352A (zh) * 2018-12-28 2019-05-24 宁波市气象台 一种气象格点数据动画显示方法
CN109783177A (zh) * 2019-01-18 2019-05-21 成都新橙北斗智联有限公司 一种基于HTML5 Canvas的GIS栅格数据渲染方法
CN110298781A (zh) * 2019-07-04 2019-10-01 南京恩瑞特实业有限公司 基于WebGL的气象雷达及卫星大数据可视化方法
CN110544290A (zh) * 2019-09-06 2019-12-06 广东省城乡规划设计研究院 数据渲染方法及装置
CN111080782A (zh) * 2019-10-17 2020-04-28 湖北泰跃卫星技术发展股份有限公司 基于实景三维地理信息系统的可视化系统
CN112102437A (zh) * 2020-08-04 2020-12-18 中科三清科技有限公司 一种基于Canvas的雷达图生成方法、装置、存储介质及终端
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
李显风: "基于WebGIS的实况网格产品应用分析平台及关键技术", 《气象科技》 *
李诗: "基于HTML5及WebGL的周口店虚拟通信平台构建", 《计算机仿真》 *
遥想公瑾当年: "格点数据应用之二WebGIS等值面可视化篇", 《知乎》 *
韦青: "国家级天气预报检验分析系统建设与应用", 《应用气象学报》 *

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115965752A (zh) * 2022-12-19 2023-04-14 中科三清科技有限公司 环境数据分布图的生成方法、装置、存储介质及电子设备
CN115965752B (zh) * 2022-12-19 2023-09-01 中科三清科技有限公司 环境数据分布图的生成方法、装置、存储介质及电子设备
CN116610746A (zh) * 2023-07-17 2023-08-18 南京壹波云信息科技有限公司 一种基于WebGIS的气象格点数据分片展示方法
CN117392298A (zh) * 2023-10-18 2024-01-12 亿海蓝（北京）数据技术股份公司 基于WebGIS平台的图像渲染方法、系统、存储介质和电子设备
CN117392298B (zh) * 2023-10-18 2024-05-14 亿海蓝（北京）数据技术股份公司 基于WebGIS平台的图像渲染方法、系统、存储介质和电子设备

Also Published As

Publication number Publication date
CN114491351B (zh) 2022-08-23

Similar Documents

Publication Publication Date Title
CN114491351B (zh) 可适配WebGIS平台的格点数据可视化方法和系统
US9773343B2 (en) Method for real-time and realistic rendering of complex scenes on internet
US7884825B2 (en) Drawing method, image generating device, and electronic information apparatus
US7432936B2 (en) Texture data anti-aliasing method and apparatus
CN110832278B (zh) 使用栅格差异的描述来渲染地图数据
CN111508052A (zh) 三维网格体的渲染方法和装置
US11600044B2 (en) Rendering textures utilizing sharpness maps
KR20140073480A (ko) 라인을 따른 텍스트 이미지 렌더링
US8854360B2 (en) Water surface generation
CN111862295A (zh) 一种虚拟对象的展示方法、装置、设备和存储介质
GB2526359A (en) Graphics processing systems
CN114625992B (zh) 一种百兆级气象网络数据的可视化方法及系统
CN114092575B (zh) 数字地球实时着色方法和装置
CN114511659A (zh) 数字地球地形约束下的体绘制渲染优化方法
US11593992B2 (en) Rendering three-dimensional objects utilizing sharp tessellation
CN112017286A (zh) 一种数字地球无裙边地形瓦块无缝拼接显示仿真方法
CN113495933A (zh) 一种矢量瓦片显示方法及系统
CN111028349A (zh) 一种适用于海量三维实景数据快速可视化的层级构建方法
CN113674419B (zh) 气象云数据的三维展示方法、装置、电子设备及存储介质
CN113379814B (zh) 一种三维空间关系判定方法及装置
CN115496829A (zh) 一种基于网页的局部高清影像地图快速制作方法及装置
CN111127297B (zh) 顾及线宽一致性的矢量地图实线符号绘制方法
CN112465973A (zh) 一种用于数字地面模型的高精度仿真贴图技术方法
CN109710784B (zh) 一种基于lerc的遥感影像数据空间快速可视化方法
CN113808243B (zh) 一种可形变雪地网格的绘制方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant