在WEB端加载渲染海洋气象数据的方法和装置制造方法及图纸

本公开提供了一种在WEB端加载渲染海洋气象数据的方法和装置，属于海洋气象数据可视化技术领域，所述方法包括：获取目标海洋区域的原始格点数据的PNG描述文件和Json描述文件，所述PNG描述文件和所述Json描述文件是在服务器端生成的；对所述PNG描述文件和所述Json描述文件进行处理，生成目标海洋区域的原始格点数据；根据当前应用的渲染配色方案和所述原始格点数据定义像元多通道的色值，根据所述色值对目标海洋区域图像的像元进行赋值；对赋值后的目标海洋区域图像进行加载。以此方式，能够提高显示性能，并且支持多种配色方案，渲染配色可以灵活设置，同时可以显示坐标点的产品数值。值。值。

【技术实现步骤摘要】
在WEB端加载渲染海洋气象数据的方法和装置


[0001]本公开的实施例一般涉及海洋气象数据可视化
，并且更具体地，涉及一种在WEB端加载渲染海洋气象数据的方法和装置。

技术介绍

[0002]对于气象海洋数据来说，目前数据的形式主要以栅格数据与矢量数据为主。气象海洋数据的可视化常与GIS引擎相结合，通过将气象数据处理为色斑图、单要素填图、等值线等形式在地图上叠加显示。
[0003]目前，矢量数据以表格、文本、地理信息相关数据等形式来展现，目前主要采用数据库进行存储，通过对数据库的查询，对数据进行展示，如地方站、民航站、船舶、浮标等站点数据的可视化采用站点单要素或者以Html的DOM节点对多要素组合进行可视化渲染。
[0004]栅格数据以二进制、GRIB2、NetCDF、Tiff等形式来进行存储，然而目前浏览器端对二进制、GRIB、NetCDF、Tiff等格式数据的解析方法较少，直接加载源数据进行解析又会加载浏览器的负载和网络传输问题。格点数据在Web端的通常为由服务器端将格点数据利用已有可视化方法绘制图片，浏览器端获取图片并进行裁切、缩放等变形操作后，将其设置到<img>等HTML元素中进行显示。
[0005]申请人在实现本申请技术方案的过程中发现，现有的气象海洋数据的可视化存在以下问题：
[0006]1、气象海洋的站点数据填图大多基于Html的DOM节点进行站点单要素，然而若渲染大量站点时，大量添加和修改DOM元素会拉低浏览器的显示性能，出现卡顿等现象。
[0007]2、栅格格点数据生成的图片分辨率较低时，随着地图级别方法，图片模糊，显示效果差；生成的产品图片分辨率较高时，则会出现占用网络资源，显示延迟等问题；
[0008]3、难以在Web端对产品渲染配色进行再定制，在生产环境修改产品配色或者需要多种配色方案时，满足需求的代价较大。
[0009]4、在WebGIS平台中根据鼠标移动显示坐标点的产品数值难以实现。

技术实现思路

[0010]根据本公开的实施例，提供了一种在WEB端加载渲染海洋气象数据的方案，用于能够提高显示性能，并且支持多种配色方案，渲染配色可以灵活设置，同时可以显示坐标点的产品数值。
[0011]在本公开的第一方面，提供了一种在WEB端加载渲染海洋气象数据的方法，包括：
[0012]获取目标海洋区域的原始格点数据的PNG描述文件和Json描述文件，所述PNG描述文件和所述Json描述文件是在服务器端生成的；
[0013]对所述PNG描述文件和所述Json描述文件进行处理，生成目标海洋区域的原始格点数据；
[0014]根据当前应用的渲染配色方案和所述原始格点数据定义像元多通道的色值，根据
所述色值对目标海洋区域图像的像元进行赋值；
[0015]对赋值后的目标海洋区域图像进行加载。
[0016]在一些实施例中，还包括：服务器端生成PNG描述文件和Json描述文件的过程，具体包括：
[0017]读取目标海洋区域的原始格点数据的最大值和最小值，将格点数据值映射到0
‑
255值域内，存储于PNG单通道灰度图中，同时生成对应的Json描述文件，所述Json描述文件包括对应格点数据的最大值、最小值、经纬度范围、分辨率、宽度和高度。
[0018]在一些实施例中，还包括：
[0019]对包括uv向量的格点数据，采用双通道存储的方式进行存储。
[0020]在一些实施例中，所述对所述PNG描述文件和所述Json描述文件进行处理，生成目标海洋区域的原始格点数据，包括：
[0021]通过Canvas.drawImage获取PNG描述文件的像元数据，通过ctx.getImageData获取Json描述文件中的信息，将所述像元数据进行映射，将像元灰度值反算回原始格点数据。
[0022]在一些实施例中，所述根据当前应用的渲染配色方案和所述原始格点数据定义像元多通道的色值，根据所述色值对目标海洋区域图像的像元进行赋值，包括：
[0023]根据所述原始格点数据在配色方案中对应的颜色值，重新定义像元多通道的色值，将重新定义后的图像像元数据进行赋值，并利用canvas.toDataUrl将渲染好的数据赋值给图像像元的稀疏编码。
[0024]在一些实施例中，所述对赋值后的目标海洋区域图像进行加载，包括：
[0025]对赋值后的目标海洋区域图像进行直接加载或结合GIS引擎加载。
[0026]在一些实施例中，还包括：
[0027]预先在WEB端进行类扩展，生成Stations扩展类，重写updatePath方法，实现站名站号的Canvas标注，通过直接给Options赋值进行Options的重定义，设置站点标注的样式；
[0028]并且通过扩展Stations类，实现地方站、民航站、船舶、浮标的海洋站点的类定义，通过重写updatePath方法，实现各类站点自定义要素的Canvas绘制。
[0029]在本公开的第二方面，提供了一种在WEB端加载渲染海洋气象数据的装置，包括：
[0030]数据获取模块，用于获取目标海洋区域的原始格点数据的PNG描述文件和Json描述文件，所述PNG描述文件和所述Json描述文件是在服务器端生成的；
[0031]原始格点数据生成模块，用于对所述PNG描述文件和所述Json描述文件进行处理，生成目标海洋区域的原始格点数据；
[0032]像元赋值模块，用于根据当前应用的渲染配色方案和所述原始格点数据定义像元多通道的色值，根据所述色值对目标海洋区域图像的像元进行赋值；
[0033]图像加载模块，用于对赋值后的目标海洋区域图像进行加载。
[0034]在本公开的第三方面，提供了一种电子设备，包括存储器和处理器，所述存储器上存储有计算机程序，所述处理器执行所述程序时实现如以上所述的方法。
[0035]在本公开的第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如以上所述的方法。
[0036]通过本公开的在WEB端加载渲染海洋气象数据的方法，能够提高显示性能，并且支持多种配色方案，渲染配色可以灵活设置，同时可以显示坐标点的产品数值。
[0037]
技术实现思路
部分中所描述的内容并非旨在限定本公开的实施例的关键或重要特征，亦非用于限制本公开的范围。本公开的其它特征将通过以下的描述变得容易理解。
附图说明
[0038]结合附图并参考以下详细说明，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。在附图中，相同或相似的附图标记表示相同或相似的元素，其中：
[0039]图1示出了本公开实施例一的在WEB端加载渲染海洋气象数据的方法的流程图；
[0040]图2示出了本公开实施例二的在WEB端加载渲染海洋气象数据的装置的结构示意图；
[0041]图3示出本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.在WEB端加载渲染海洋气象数据的方法，其特征在于，包括：获取目标海洋区域的原始格点数据的PNG描述文件和Json描述文件，所述PNG描述文件和所述Json描述文件是在服务器端生成的；对所述PNG描述文件和所述Json描述文件进行处理，生成目标海洋区域的原始格点数据；根据当前应用的渲染配色方案和所述原始格点数据定义像元多通道的色值，根据所述色值对目标海洋区域图像的像元进行赋值；对赋值后的目标海洋区域图像进行加载。2.根据权利要求1所述的方法，其特征在于，还包括：服务器端生成PNG描述文件和Json描述文件的过程，具体包括：读取目标海洋区域的原始格点数据的最大值和最小值，将格点数据值映射到0
‑
255值域内，存储于PNG单通道灰度图中，同时生成对应的Json描述文件，所述Json描述文件包括对应格点数据的最大值、最小值、经纬度范围、分辨率、宽度和高度。3.根据权利要求2所述的方法，其特征在于，还包括：对包括uv向量的格点数据，采用双通道存储的方式进行存储。4.根据权利要求1所述的方法，其特征在于，所述对所述PNG描述文件和所述Json描述文件进行处理，生成目标海洋区域的原始格点数据，包括：通过Canvas.drawImage获取PNG描述文件的像元数据，通过ctx.getImageData获取Json描述文件中的信息，将所述像元数据进行映射，将像元灰度值反算回原始格点数据。5.根据权利要求4所述的方法，其特征在于，所述根据当前应用的渲染配色方案和所述原始格点数据定义像元多通道的色值，根据所述色值对目标海洋区域图像的像元进行赋值，包括：根据所述原始格点数据在配色方案中对应的颜色值，重新定义像元多通道的色值，将重新定...

【专利技术属性】
技术研发人员：田伟伟，赵心刚，冯德财，朱亚帅，李福桑，
申请(专利权)人：中科星图维天信北京科技有限公司，
类型：发明
国别省市：