基于网格化处理的Web端疫情分布可视化系统与方法

摘要

本发明提供基于网格化处理的Web端疫情分布可视化系统与方法，该系统包括树状网格化预处理模块、类瓦片数据请求模块、资源池调度渲染模块，通过树状网格化预处理模块对可视化目标数据进行处理，生成具空间分布信息为基础的树状网格化数据；类瓦片数据请求模块根据客户端的摄像机或相机数据计算三维空间视窗范围内所有瓦片层级与信息，根据层级与行列号异步向服务端请求瓦片内目标数据；资源池调度渲染模块根据可视化渲染策略对目标数据进行可视化渲染，最后进行展示。本发明统通过客户端的摄像机或相机信息获取当前展示的位置信息，结合树状网格化预处理的数据结构，在一定硬件条件下实现Web端疫情分布可视化系统设计。

说明书

技术领域

本发明涉及B/S架构的三维空间场景可视化技术，具体而言是一种基于网格化处理的Web端疫情分布可视化系统与方法。

背景技术

各类B/S架构的在线信息服务系统针与疫情相关的服务在不断延伸，因此疫情相关服务与流程的信息化建设成了众多机构与政府重视的着力点之一，目前国内大多数疫情分布可视化服务还停留在二维地图或者静态图片结合文字描述阶段，显然目前存在一些二维模式下无法有效展示的特殊场景和问题。

疫情相关数据的可视化需求包括疑似病例、确诊病例、防疫相关物资等信息，这些数据的共同特点是数据量大、时效性高、精准度高，在面对如此复杂的数据进行叠加展示时，平面二维地图或静态图片加一些文本语言描述的信息展示能力十分局限，难以实现对数据量大目标的动态刷新，而且二维地图只能展示出可视化对象的平面地理位置信息，无法展示出可视化对象的空间位置信息。同时对上述疫情相关数据除了单独的可视化需求外，在一些特殊的应用场景下，存在需要同一视窗内共同展示多种不同类型数据的需求，因此采用三维空间场景代替二维平面场景是必然趋势，三维空间场景能有效提高信息展示的空间性和展示效果。

常规Web端三维空间场景的可视化服务主要集中在中小空间，如房屋、楼宇、街道等的渲染，对全国甚至全球范围内的大量目标可视化渲染方向建设较少，同时受限于浏览器能够调用的硬件资源瓶颈，在涉及到疫情相关数据的三维空间场景可视化展示时会出现以下问题：

1、常规B/S架构的基于空间信息的大量数据可视化大多根据视窗范围，向服务端请求数据，服务端根据范围参数在数据库中检索出范围内的所有目标返回至客户端，客户端异步接收到目标数据后，将所有目标解析并进行可视化渲染，这种情况在数据量相对较少的(1万以内)情况下没有问题，但随着数据量的上升，服务端检索需要的时间会线性增长，而客户端无法及时展示数据则会引起视窗变化等操作，引发更频繁的数据请求加重服务端的负担，最终导致客户端无法展示数据。

2、谷歌、火狐等主流浏览器对渲染调度机制，尤其是三维场景渲染机制相关优化较少，Web端三维场景的可视化展示性能受限，同时浏览器运行的代码均在同一线程内，在三维渲染引擎占用浏览器的算力过高的情况下，会出现客户端出现卡顿的情况，导致影响用户体验。因此，目前Web端的三维场景下的渲染性能普遍低下。

3、短时间内大量创建实例易导致内存溢出。以谷歌浏览器的引擎为例，在谷歌浏览器引擎中所有的实例对象都是通过堆来进行内存分配的，声明变量并赋值时，引擎在堆内存中分配若干内存给此变量，这一系列操作都是在浏览器引擎内部实现的，没有供外部调用的接口，因此外部无法主动释放浏览器的内存，而浏览器的垃圾回收机制存在一定延迟，一旦在内存没有被回收的情况下大量占用内存，就会造成内存溢出导致浏览器崩溃。

发明内容

本发明的目的在于提供一种基于网格化处理的Web端疫情分布可视化系统与方法，基于B/S架构，对目标种类多、数据量大的原始数据进行预处理并生成中间数据，通过类瓦片数据请求模块和资源池进行数据三维空间场景内的可视化展示，在Web端实现三维空间场景内的大量不同类型的相关数据的叠加可视化展示，特别适用于疫情相关数据的分析展示。

为了达到上述目的，本发明采用以下技术方案：

本发明提出的基于网格化处理的Web端疫情分布可视化系统，包括客户端设置的类瓦片数据请求模块、资源池调度渲染模块和服务端设置的树状网格化预处理模块；所述树状网格化预处理模块，用于对可视化目标数量在10000以上的原始数据进行预处理，生成分片和树结构组织的可视化目标数据，所述可视化目标数据具备一定空间分布信息；所述类瓦片数据请求模块，用于根据客户端当前三维空间场景内的摄像机或相机信息计算出待展示视窗内需加载数据的瓦片层行列号以及层级信息，根据瓦片信息异步从服务端请求目标数据；所述资源池调度渲染模块，用于对目标与可视化类型做分析，根据Web端可视化目标数量级制定可视化渲染策略后，在三维空间场景内进行目标数据的可视化展示，能满足流畅交互要求。

所述客户端还设置有目标资源池，所述目标资源池是在系统初始化阶段创建用于存放具备通用可视化能力的实例合集；所述具备通用可视化能力的实例的ID属性是辨别该实例的唯一标识，包括支持动态编辑可视化样式、支持动态编辑空间信息、支持动态控制实例显隐等能力。

所述客户端还设置有瓦片数据缓存系统，具体实现是维护一个包含以层行列号为KEY值的数组，将所述加载数据的瓦片层行列号传入瓦片数据缓存系统后，根据传入的层行列号进行匹配，若根据属性唯一标识KEY值匹配到数据，则将匹配到数据返回至类瓦片数据请求模块，无需发送请求向服务端访问；若未匹配到数据，则发送请求向服务端访问，瓦片数据缓存系统监听请求返回的数据，将返回的数据以及对应的层行列号存入瓦片数据缓存系统，同时根据存入时间移除存入时间最早的数据。

所述基于网格化处理的Web端疫情分布可视化系统也同样适用于全球AIS 数据或全国实时物流数据。

根据上述系统，基于网格化处理的Web端疫情分布可视化系统实现的方法，包括以下步骤：

(1)对种类多、数据量大的原始数据进行预处理，重新构建生成树状文件系统；所述树状文件系统为以0层0行0列为根节点的文件夹，每层每行每列的文件夹对应包含着当前瓦片对应的目标数据和当前瓦片空间范围内下一级瓦片的文件夹；

(2)获取步骤(1)中每个瓦片对应目标数据的总量，按照不同层级进行数据抽稀，将瓦片对应目标数据的数量控制在客户端浏览器能够对目标全量渲染同时又保证用户交互流畅的数量内，所有数据处理完成后发布为Web服务；

(3)通过客户端三维空间场景的摄像机或相机信息计算瓦片的层行列号数据；

(4)根据步骤(3)中计算得到的瓦片的层行列号后，在瓦片数据缓存系统中检索：若根据层行列号匹配到数据，将匹配到数据发送至步骤(5)进行处理，若瓦片数据缓存系统没有对应层行列号匹配的数据，则访问步骤(2)中发布Web服务的数据，通过发送请求获取对应层行列号的数据；

(5)在所述Web端疫情分布可视化系统的客户端初始化阶段，创建目标资源池，所述瓦片数据缓存系统监听步骤(4)发送请求中要求返回的数据，如果返回数据成功，则根据获取的目标数据解析目标类型与可视化展示方式，并判断当前目标资源池内是否有准备就绪的此类型实例，如果有此类型实例，则通过修改该类型实例的空间位置和样式(即空间位置信息、渲染效果等属性)使其实现请求返回目标数据应有的展示效果。

进一步的，步骤(1)中所述重新构建生成树状文件系统，是指遍历目标数据的、所有层级的瓦片，将在对应瓦片空间信息范围内的目标数据，添加到对应层行列文件夹的目标数据文件中。

进一步的，步骤(1)中所述重新构建是以Web墨卡托分片规则为基准。

进一步的，步骤(2)中所述按照不同层级进行数据抽稀的方式，具体如下：

A、计算不同层级单个瓦片内所能展示的最大数量上限，数量上限＝(当前层级+1)*(客户端渲染阈值/24)；

B、获取当前瓦片文件夹内目标数据的数量，若这一数量大于客户端渲染阈值，则通过点抽稀算法对当前瓦片文件夹内的目标数据进行抽稀，直至这一数量等于客户端渲染阈值上限；

C、获取当前瓦片文件夹内目标数据的数量，若这一数量小于由客户端渲染阈值上限，则不对当前瓦片文件夹内的目标数据进行处理。

进一步的，步骤(3)中所述通过客户端三维空间场景的摄像机或相机信息获取当前视窗内范围中心点，通过摄像机或相机的高度数据计算得出当前地图级别，通过当前视椎体获取屏幕范围所对应的地理范围，即经度纬度区间，根据瓦片行列号换算原理计算出当前三维空间场景视窗内展示的瓦片层行列号。

本发明的有益效果如下：

本发明是基于B/S架构，针对大数据通过服务端与客户端联合进行资源调度的数据处理与加载的方案，该系统通过客户端的摄像机或相机信息获取当前展示的位置信息，结合树状网格化预处理的数据结构，在一定硬件条件下，可以实现对大量不同类型目标叠加渲染，实现Web端三维空间内海量的不同类型目标的高性能可视化展示；特别适用于具有目标类型多，数据量大的数据，例如疫情数据。

附图说明

图1是本发明的业务流程图。

图2是本发明的树状网格化预处理示意图。

图3是本发明的类瓦片数据请求流程图。

具体实施方法

以下结合说明书附图对本发明的技术方案进行清楚、完整的描述，显然，此处所描述的具体实施例仅用以解释本发明，并不限于本发明。

如图1所示，基于网格化处理的Web端疫情分布可视化系统，包括客户端设置的类瓦片数据请求模块、资源池调度渲染模块和服务端设置的树状网格化预处理模块；所述树状网格化预处理模块，用于对目标种类多、数据量大的原始数据(特别是用于对可视化目标数量在10000以上的数据)进行预处理，生成分片和树结构组织的可视化目标数据，所述可视化目标数据具备一定空间分布信息；所述类瓦片数据请求模块，用于根据客户端当前三维空间场景内的摄像机或相机信息计算出待展示视窗内需加载数据的瓦片层行列号以及层级信息，根据瓦片信息异步从服务端请求目标数据；所述资源池调度渲染模块，用于对目标与可视化类型做分析，根据Web端可视化目标数量级制定可视化渲染策略后，在三维空间场景内进行目标数据的可视化展示。

所述客户端还设置有目标资源池，所述目标资源池是在系统初始化阶段创建用于存放具备通用可视化能力的实例合集；所述具备通用可视化能力的实例的ID属性是辨别该实例的唯一标识，包括支持动态编辑可视化样式、支持动态编辑空间信息、支持动态控制实例显隐等能力。本实施例中，对应的是Cesium.js 开源库中的PrimitiveCollection对象；利用目标资源池降低浏览器因大量实例化对象而导致的内存波动，资源池即对单个实例对象的重复利用，在系统初始化时创建一个池子用来存放实例，待需要频繁进行重复性的实例化创建时，通过调度机制从资源池中拉去已被实例化的对象，通过编辑其属性实现与新创建实例一样的效果，从而有效降低浏览器的内存波动，解决浏览器因内存溢出而崩溃的问题，优化显示效率。

所述客户端还设置有瓦片数据缓存系统，具体实现是维护一个包含以层行列号为KEY值的数组，将所述加载数据的瓦片层行列号传入瓦片数据缓存系统后，根据传入的层行列号进行匹配，若匹配到数据，若根据属性唯一标识KEY 值匹配到数据，则将匹配到数据返回至类瓦片数据请求模块，无需发送请求向服务端访问；若未匹配到数据，则发送请求向服务端访问，瓦片数据缓存系统监听请求返回的数据，将返回的数据以及对应的层行列号存入瓦片数据缓存系统，同时根据存入时间移除存入时间最早的数据。

根据上述系统，如图2-3所示，基于网格化处理的Web端疫情分布可视化系统实现的方法，包括以下步骤：

(1)对种类多、数据量大的原始数据进行预处理，以Web墨卡托分片规则为基准，构建生成树状文件系统。

所述树状文件系统为以0层0行0列为根节点的文件夹，每层每行每列的文件夹对应包含着当前瓦片对应的目标数据和当前瓦片空间范围内下一级瓦片的文件夹。

(2)获取步骤(1)中每个瓦片对应目标数据的总量，按照不同层级进行数据抽稀，将瓦片对应目标数据的数量控制在客户端浏览器能够对目标全量渲染同时又保证用户交互流畅的数量内，所有数据处理完成后发布为Web服务。

(3)通过客户端三维空间场景的摄像机或相机信息计算瓦片的层行列号数据。

(4)根据步骤(3)中计算得到的瓦片的层行列号后，在瓦片数据缓存系统中检索：若根据层行列号匹配到数据，将匹配到数据发送至步骤(5)进行处理，若瓦片数据缓存系统没有对应层行列号匹配的数据，则访问步骤(2)中发布Web服务的数据，通过发送请求获取对应层行列号的数据。

(5)在所述Web端疫情分布可视化系统的客户端初始化阶段，创建目标资源池，所述瓦片数据缓存系统监听步骤(4)发送请求中要求返回的数据，如果返回数据成功，则根据获取的目标数据解析目标类型与可视化展示方式，并判断当前目标资源池内是否有准备就绪的此类型实例，如果有此类型实例，则通过修改该类型实例的空间位置信息、渲染效果等属性使其实现请求返回目标数据应有的展示效果。

进一步的，步骤(1)中所述重新构建生成树状文件系统，是指遍历目标数据的、所有层级的瓦片，将在对应瓦片空间信息范围内的目标数据，添加到对应层行列文件夹的目标数据文件中。

其中，树状文件系统的组织方式类比Web墨卡托坐标系下的WMTS切片策略，通过对全球范围经纬度坐标转换为Web墨卡托米制单位，后转换为像素再根据层级进行切片，切片的第一级为0级，切片的大小为256像素乘256像素，对应到的Web墨卡托的坐标范围，换算第一级的分辨率是：Web墨卡托坐标系范围(单位米)/256，后每放大一级，对应的用第一级分辨率/2，以此方法将所有层级的全球范围内：[-180,-85.05112878,180,85.05112878]区域中的分割成正方形的瓦片区域，每个区域的目标数据进行数据抽稀处理，同时上一级的瓦片会涵盖下一级若干瓦片，从0级开始为根节点，向下延伸形成树状结构。

进一步的，数据抽稀的原则是对包含数据量较大的区域内数据进行抽稀，在不影响数据整体分布的前提下降低此区域的数据量。步骤(2)中所述按照不同层级进行数据抽稀的方式，具体如下：

A、计算不同层级单个瓦片内所能展示的最大数量上限，数量上限＝(当前层级+1)*(客户端渲染阈值/24)；

B、获取当前瓦片文件夹内目标数据的数量，若这一数量大于客户端渲染阈值，则通过点抽稀算法对当前瓦片文件夹内的目标数据进行抽稀，直至这一数量等于客户端渲染阈值上限；

C、获取当前瓦片文件夹内目标数据的数量，若这一数量小于由客户端渲染阈值上限，则不对当前瓦片文件夹内的目标数据进行处理。

其中，瓦片为将全球范围按照一定规则在不同层级分割为不同范围，瓦片内的目标数据即此范围内的原始数据集合。

进一步的，步骤(3)中所述通过客户端三维空间场景的相机信息获取当前视窗内范围中心点，通过摄像机或相机的高度数据计算得出当前地图级别，通过当前视椎体获取屏幕范围所对应的地理范围，即经度纬度区间，根据瓦片行列号换算原理计算出当前三维空间场景视窗内展示的瓦片层行列号。

本发明总体是采用B/S架构实现的在线信息系统，要求的可视化目标是在三维空间场景，要求可视化的目标种类多、数据量大。需要说明的是，对于二维平面场景和数据量较小的信息系统不在本发明范围内。

上面结合附图对本发明的实施方式作了详细地说明，但是本发明并不局限于上述实施方式，在本领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下做出各种变化。

上述基于网格化处理的Web端疫情分布可视化系统和方法，用于疫情数据可视化展示时，具体如下：

全球疫情分布Web端展示——此案例数据基于时间截止至2022年1月19 日下午13：20分，过去28天内全球新冠疫情确诊病例数、过去28天内全球新冠致死例数、过去28天全球接种新冠疫苗数，采用基于网格化处理的Web端疫情分布可视化系统实现Web端可视化展示效果。

(1)对过去28天内全球新冠疫情确诊病例数57716314例、过去28天内全球新冠致死例数184148例、过去28天全球接种新冠疫苗数824746982例等三种原始数据进行预处理，上述三种数据数量较大，因此使用0-21级的分级标准、采用Web墨卡托分片规则，树状文件系统的组织方式采用Web墨卡托坐标系下的WMTS切片策略，通过对全球范围经纬度坐标转换为Web墨卡托米制单位，后转换为像素再根据层级进行切片，切片的第一级为0级，切片的大小为 256像素乘256像素，对应到的Web墨卡托的坐标范围，换算第一级的分辨率是：Web墨卡托坐标系范围(单位米)/256，后每放大一级，对应的用第一级分辨率/2，以此方法将所有层级的全球范围内：[-180,-85.05112878,180, 85.05112878]区域中的分割成正方形的瓦片区域，每个区域的目标数据进行数据抽稀处理，同时上一级的瓦片会涵盖下一级若干瓦片，从0级开始为根节点，向下延伸形成树状结构，构建生成树状文件系统。

共生成三个文件系统，分别为以0层0行0列为根节点，每层每行每列的文件夹对应包含着当前瓦片对应的目标数据和当前瓦片空间范围内下一级瓦片的文件夹。

(2)获取步骤(1)中每个瓦片对应目标数据的总量，根据LayerNumbers (瓦片数量)＝2

(3)获取当前瓦片文件夹内目标数据的数量MaxNumber，若MaxNumber 大于步骤(2)中单个瓦片展示最大数量上限，则通过点抽稀算法对当前瓦片文件夹内的目标数据进行抽稀，在单个瓦片内，基于步骤(1)中单个瓦片内目标数据，以瓦片左上角为起始点，将瓦片横向切分为10个等长矩形，矩形内最左端和最右端的目标分别为A、B点，通过连接矩形内目标绘制曲线，在曲线首尾两点A，B之间连接一条直线AB，该直线为曲线的弦；得到曲线上离该直线段距离最大的点C，计算其与AB的距离d；比较该距离d和阈值threshold的大小，如果小于threshold，则该直线段作为曲线的近似，该段曲线处理完毕。如果距离d大于阈值，则用C将曲线分为两段AC和BC，并分别对两段曲线进行分段处理。当所有曲线都处理完毕时，依次连接各个分割点形成的折线，即可以作为曲线的近似，依次处理直至当前瓦片内目标数据数量小于或等于单个瓦片展示最大数量上限，所有数据处理完成后将步骤(1)中的三个文件系统发布为 Web服务。

(4)监听客户端三维空间场景的视角改变事件，通过客户端三维空间场景的相机信息获取当前视窗内范围中心点[longitude,latitude]，通过摄像机或相机的高度数据CameraHeight通过三维场景computeViewRectangle方法获取得出当前地图级别Zoom，通过当前视椎体获取屏幕范围所对应的地理范围Extend，即经度纬度区间，根据瓦片行列号换算原理计算出当前三维空间场景视窗内展示的瓦片层行列号[Zoom,X,Y]。

(5)根据步骤(4)中计算得到的瓦片的层行列号[Zoom,X,Y]后，在瓦片数据缓存系统中检索：若根据层行列号匹配到数据，将匹配到数据发送至步骤 (6)进行处理，若瓦片数据缓存系统没有对应层行列号匹配的数据，则访问步骤(3)中发布Web服务的数据，通过发送请求获取步骤(1)中文件系统内以行列号与文件名对应的数据。

(6)在所述Web端疫情分布可视化系统的客户端初始化阶段，创建目标资源池FeaturePond，初始状态下，创建10000个实例显隐属性Visible为不可见的实例存放入FeaturePond中，所述瓦片数据缓存系统监听步骤(4)发送请求中要求返回的数据，如果返回数据成功，则根据获取的目标数据解析目标类型与可视化展示方式，其中目标数据包含[longitude,latitude]经纬度位置信息，通过Position.set([longitude,latitude])修改实例空间位置，其中longitude,latitude为步骤(5)中获取目标的经纬度数据实现请求返回目标数据应有的展示效果。

本发明的基于网格化处理的Web端疫情分布可视化系统和方法还适用于全球AIS数据或全国实时物流数据。