CN111192339A - 地理位置数据的渲染方法及装置 - Google Patents

Abstract

本申请涉及通信计算机技术领域，公开了一种地理位置数据的渲染方法及装置。本申请通过结合地图网格划分、Web Worker、Canvas及OffscreenCanvas，在Web端多线程地进行海量地理位置数据的渲染，极大提升了海量地理位置数据的渲染效率。

Description

地理位置数据的渲染方法及装置

技术领域

本申请涉及通信计算机技术领域，特别涉及一种地理位置数据的渲染方法及装置。

背景技术

近年来，随着互联网的迅速发展，越来越多的地理位置信息展示的应用采用了B/S架构，在展示端采用了浏览器作为展示窗口。当遇到需要同时渲染海量数据的位置信息时，浏览器天生的单线程运行特性会极大地限制渲染性能，导致渲染缓慢、卡顿。

现有技术方案中，所有的逻辑运算与图形绘制都在同一个线程中进行，当数据量较小时，图形界面可以表现出较高的流畅度，但当数据量非常巨大时，单线程的计算瓶颈就会暴露出来，渲染缓慢；针对这种问题，现有的技术方案又提出了一种逐帧分摊计算量的方法，该方法虽然使得图形界面的流畅度得到提升，但是极大牺牲了图形绘制速度。

发明内容

本申请的目的在于提供一种地理位置数据的渲染方法及装置，在满足图形界面的渲染流畅度的情况下，极大的提高了图形绘制速度。

为了解决上述问题，本申请公开了一种地理位置数据的渲染方法，包括以下步骤：

将地图可视区域划分成若干预设尺寸的网格，并对各个网格创建展示层的画布；

将每个地理位置数据根据其经纬度坐标分配至该各个网格的数据存储对象；

启动至少一个前端工作线程，将该画布对应的离屏对象传入该前端工作线程，将该各个网格的数据存储对象传入该前端工作线程；

该前端工作线程通过预定义的数据处理与图形渲染逻辑，将数据渲染到该离屏对象上，在该离屏对象上渲染的图像将自动同步到该展示层的画布后呈现到图形界面上。

在一个优选例中，各该前端工作线程构成一个线程池；该线程池中的前端工作线程的个数≤处理器的逻辑处理器个数-1。

在一个优选例中，在该线程池中，当需求更多前端工作线程时，该前端工作线程先进入先进先出存储器队列进行等待，一旦有前端工作线程运行完成，则从该队列中弹出一个前端工作线程进行运行。

在一个优选例中，将该画布对象进行转换控制权处理，得到该画布对应的离屏对象。

在一个优选例中，该将每个地理位置数据根据其经纬度坐标分配至所述各个网格的数据存储对象进一步包括：

根据该地理位置数据中的经纬度计算得到该地理位置数据的网格坐标；

根据各网格坐标将对应的地理位置数据分配至对应的网格的数据存储对象；其中，所述地图上的网格是通过网格坐标来识别的。

在一个优选例中，该创建展示层的画布进一步包括：

针对每一个网格创建一个画布对象；

通过级联样式表将该每一个画布对象定位至所对应的网格位置。

在一个优选例中，该网格的预设尺寸长宽均为256像素。

本申请还公开了一种海量地理位置数据的渲染装置，包括数据分组模块，数据转换和通信控制模块，以及图形绘制模块；

该数据分组模块用于将地图可视区域划分成若干预设尺寸的网格，并对各个网格创建展示层的画布，将每个地理位置数据根据其经纬度坐标分配至该各个网格的数据存储对象；该数据转换和通信控制模块用于启动至少一个前端工作线程，将该画布对应的离屏对象传入该前端工作线程，将该各个网格的数据存储对象传入该前端工作线程；该图形绘制模块用于将该前端工作线程通过预定义的数据处理与图形渲染逻辑，将数据渲染到该离屏对象上，在该离屏对象上渲染的图像将自动同步到该展示层的画布后呈现到图形界面上。

本申请还公开了一种地理位置数据处理设备，包括：

存储器，用于存储计算机可执行指令；以及，

处理器，用于在执行该计算机可执行指令时实现如前文描述的方法中的步骤。

本申请还公开了一种计算机可读存储介质，该计算机可读存储介质中存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现如前文描述的方法中的步骤。

本申请实施方式中，所述地理位置数据的渲染方法和装置主要优点包括：

(1)高性能性：无论是图形界面流畅度，还是图形渲染速度，均能达到非常流畅的水平；

(2)低成本：相比于现有技术的“单线程进行所有逻辑运算和图形绘制工作的方法”和“逐帧分摊计算量的方法”，本申请实施方式不需要网络带宽与服务器计算能力的支撑，亦不需要独立的GPU资源来进行运算支撑。

(3)提升开发效率：在本申请的方法指导下进行海量数据开发，由于其高性能性，可以提升开发效率和调试效率。

总之，本发明结合了地图网格划分、前端工作线程(Web Worker)，画布(Canvas)及画布对应的离屏对象(OffscreenCanvas)等多种技术手段，达成对海量地理位置数据的高效渲染的目的。

本申请的说明书中记载了大量的技术特征，分布在各个技术方案中，如果要罗列出本申请所有可能的技术特征的组合(即技术方案)的话，会使得说明书过于冗长。为了避免这个问题，本申请上述发明内容中公开的各个技术特征、在下文各个实施方式和例子中公开的各技术特征、以及附图中公开的各个技术特征，都可以自由地互相组合，从而构成各种新的技术方案(这些技术方案均因视为在本说明书中已经记载)，除非这种技术特征的组合在技术上是不可行的。例如，在一个例子中公开了特征A+B+C，在另一个例子中公开了特征A+B+D+E，而特征C和D是起到相同作用的等同技术手段，技术上只要择一使用即可，不可能同时采用，特征E技术上可以与特征C相组合，则，A+B+C+D的方案因技术不可行而应当不被视为已经记载，而A+B+C+E的方案应当视为已经被记载。

附图说明

图1是根据本申请第一实施方式的一种地理位置数据的渲染方法流程示意图

图2是根据本申请采用墨卡托投影的方法对地图可视区域进行网格划分的一个实施例的示意图

图3是根据本申请将海量数据根据其经纬度坐标分配至各个网格的数据存储中的一个实施例的示意图

图4是根据本申请一个前端工作线程工作过程示意图

图5是根据本申请第二实施方式的一种地理位置数据的渲染装置结构示意图

图6是根据本申请一种监控大屏的具体实例示意图

具体实施方式

在以下的叙述中，为了使读者更好地理解本申请而提出了许多技术细节。但是，本领域的普通技术人员可以理解，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请所要求保护的技术方案。

部分概念的说明：

Web Worker(本申请中文名称为：前端工作线程)：在Web端后台线程执行脚本的对象。

Canvas(本申请中文名称为：画布)：一种在Web端进行图形绘制的接口。

OffscreenCanvas(本申请中文名称为：离屏对象)：一种离屏渲染前端画布的接口。

多线程：使用多个CPU线程资源，以达到最大化利用计算机计算能力的目的。

墨卡托投影：是正轴等角圆柱投影；假想一个与地轴方向一致的圆柱切或割于地球，按等角条件，将经纬网投影到圆柱面上，将圆柱面展为平面后，即得本投影。墨卡托投影在切圆柱投影与割圆柱投影中，最早也是最常用的是切圆柱投影。

级联样式表：又称层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请的实施方式作进一步地详细描述。

本申请的第一实施方式涉及一种地理位置数据的渲染方法，其流程如图1所示，该方法包括以下步骤：

101：将地图可视区域划分成若干预设尺寸的网格，并对各个网格创建展示层的画布；

102：将每个地理位置数据根据其经纬度坐标分配至该各个网格的数据存储对象；

103：启动至少一个前端工作线程，将该画布对应的离屏对象传入该前端工作线程，将该各个网格的数据存储对象传入该前端工作线程；

104：该前端工作线程通过预定义的数据处理与图形渲染逻辑，将数据渲染到该离屏对象上，在该离屏对象上渲染的图像将自动同步到该展示层的画布后呈现到图形界面上。

本申请所述网格划分的预设尺寸是可以通过设置改变的；可选地，每个网格长宽均为256像素；可选地，每个网格长为300像素，宽为200像素；等等。

图2是本申请网格划分的一个实施例，采用墨卡托投影(WGS 84Web Mercator)的方法对地图中可视区域进行网格划分，包括：(1)每一个网格有一个网格坐标(X,Y,Z)，每一个网格的长宽设置为256像素；(2)针对每一个网格，创建一个Canvas对象，并通过级联样式表(Cascading Style Sheets)将每一个Canvas对象定位至网格的位置；这样，我们就完成了对即将要渲染地理位置的地图划分为了若干区域，后续可以针对每个区域，进行独立的数据运算与图形渲染。

可选地，将地理位置数据根据其经纬度坐标分配至各个网格的数据存储中进一步包括：(1)根据该地理位置数据中的经纬度计算得到该地理位置数据的网格坐标；(2)根据各网格坐标将对应的地理位置数据分配至对应的网格的数据存储对象；其中，地图上的网格是通过网格坐标来识别的。

本申请中“地理位置数据根据其经纬度坐标分配至各个网格的数据存储中”的一个实施例是：根据地理位置数据中的经纬度坐标(longitude,latitude)，将经纬度坐标(longitude,latitude)及地图缩放级别(Level)输入墨卡托投影的公式中，即公式(1)、公式(2)中，可以计算出网格坐标(tileX,tileY,level)。

其中,lat是纬度，lng是经度，level是地图缩放等级。

如图3所示，最后根据计算得到的各网格坐标(tileX,tileY,level)来确定该数据单元提交到哪个网格的数据存储中，其中该数据单元包括多个数据项(Data Item)。

可选地，本申请创建展示层的画布(Canvas)进一步包括，(1)针对每一个网格创建一个Canvas对象；(2)通过级联样式表将该每一个画布对象定位至所对应的网格位置。

图4是步骤103的处理过程示意图，具体过程包括：启动一个Web Worker线程；将步骤101中所创建的画布对象进行transfer处理，得到其对应的离屏对象，传入Web Worker线程中；将步骤102中所归纳的网格数据存储对象传入Web Worker线程中。

可选地，各前端工作线程(Web Worker)构成一个线程池。

由于用户处理器(CPU)的逻辑处理器个数(CPU_NUM)是不确定的，又因为必须要留至少一个逻辑处理器来运行主线程，因此我们不能同时创建超过(CPU_NUM–1)个WebWorker进行计算，否则依旧会妨碍主线程的运行，因此我们可以建立该线程池的管理机制来规定线程中前端工作线程的工作情况；可选地，该线程池中的前端工作线程的个数≤处理器的逻辑处理器个数-1；可选地，在该线程池中，当需求更多前端工作线程时，该前端工作线程先进入先进先出存储器队列进行等待，一旦有前端工作线程运行完成，则从该队列中弹出一个前端工作线程进行运行。

可选地，将该画布对象进行转换控制权(transfer)处理，得到该画布对应的离屏对象。

具体的，“转换控制权(transfer)处理”是针对在不同可执行上下文中相互传递的对象；例如，主线程和Worker间：在前端脚本中，不是任何对象都可以随意在主线程与Worker之间传递的，对于普通对象，传递时会进行一次深度拷贝，从而破坏了原有的上下文；只有经过transfer处理的对象，才能够在主线程与Worker之间传递。

因此，需要对画布对象(Canvas)进行transfer处理，成为一个离屏画布对象(OffscreenCanvas)，使之可被传递，代码实例如下:

//创建主线程的画布对象

const canvas＝document.createElement('canvas')；

//进行transfer处理，得到离屏对象，后续可以将此对象传入Worker中

const offscreenCanvas＝canvas.transferControlToOffscreen()；

在离屏对象(OffscreenCanvas)上进行的绘制，将自动同步到展示层的画布(Canvas)上，呈现到图形界面上来，具体的，在OffscreenCanvas上渲染了图像后，会自动同步到展示层的Canvas上，该过程不涉及任何数据运算，是栅格化后的图像数据的直接渲染，所占系统资源非常低。

本申请的第二实施方式涉及一种地理位置数据的渲染装置，如图5所示，该装置包括：数据分组模块，数据转换和通信控制模块，和图形绘制模块；

所述数据分组模块用于将地图可视区域划分成若干预设尺寸的网格，并对各个网格创建展示层的画布，将每个地理位置数据根据其经纬度坐标分配至所述各个网格的数据存储对象；所述数据转换和通信控制模块用于启动至少一个前端工作线程，将所述画布对应的离屏对象传入所述前端工作线程，将所述各个网格的数据存储对象传入所述前端工作线程；所述图形绘制模块用于将所述前端工作线程通过预定义的数据处理与图形渲染逻辑，将数据渲染到所述离屏对象上，在所述离屏对象上渲染的图像将自动同步到所述展示层的画布后呈现到图形界面上。

第一实施方式是与本实施方式相对应的方法实施方式，第一实施方式中的技术细节可以应用于本实施方式，本实施方式中的技术细节也可以应用于第一实施方式。

为了能够更好地理解本申请的技术方案，下面结合一个具体的例子来进行说明。

我们监控系统的监控大屏时刻展示着全国一张网的实时动态监控数据，任何网内节点的异常都能第一时间在大屏上展示出来，全国一张网有非常大的数量级的基站以及虚拟网格，如图6所示，使用本申请所涉及的方法和装置就可以高效地呈现此海量数据。

需要说明的是，本领域技术人员应当理解，上述地理位置数据处理设备的实施方式中所示的各模块的实现功能可参照前述《方法独权主题》的相关描述而理解。上述地理位置数据处理设备的实施方式中所示的各模块的功能可通过运行于处理器上的程序(可执行指令)而实现，也可通过具体的逻辑电路而实现。本发明实施例上述地理位置数据处理设备如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本发明各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read Only Memory)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本发明实施例不限制于任何特定的硬件和软件结合。

相应地，本发明实施例还提供一种计算机存储介质，其中存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现本发明的各方法实施方式。

此外，本发明实施例还提供一种地理位置数据处理设备，其中包括用于存储计算机可执行指令的存储器，以及，处理器；该处理器用于在执行该存储器中的计算机可执行指令时实现上述各方法实施方式中的步骤。

需要说明的是，在本专利的申请文件中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。本专利的申请文件中，如果提到根据某要素执行某行为，则是指至少根据该要素执行该行为的意思，其中包括了两种情况：仅根据该要素执行该行为、和根据该要素和其它要素执行该行为。多个、多次、多种等表达包括2个、2次、2种以及2个以上、2次以上、2种以上。

在本申请提及的所有文献都被认为是整体性地包括在本申请的公开内容中，以便在必要时可以作为修改的依据。此外应理解，在阅读了本申请的上述公开内容之后，本领域技术人员可以对本申请作各种改动或修改，这些等价形式同样落于本申请所要求保护的范围。

Claims (10)

1.一种地理位置数据的渲染方法，其特征在于，包括以下步骤：

将地图可视区域划分成若干预设尺寸的网格，并对各个网格创建展示层的画布；

将每个地理位置数据根据其经纬度坐标分配至所述各个网格的数据存储对象；

启动至少一个前端工作线程，将所述画布对应的离屏对象传入所述前端工作线程，将所述各个网格的数据存储对象传入所述前端工作线程；

所述前端工作线程通过预定义的数据处理与图形渲染逻辑，将数据渲染到所述离屏对象上，在所述离屏对象上渲染的图像将自动同步到所述展示层的画布后呈现到图形界面上。

2.根据权利要求1所述的方法，其特征在于，各所述前端工作线程构成一个线程池；所述线程池中的前端工作线程的个数≤处理器的逻辑处理器个数-1。

3.根据权利要求2所述的方法，其特征在于，在所述线程池中，当需求更多前端工作线程时，所述前端工作线程先进入先进先出存储器队列进行等待，一旦有前端工作线程运行完成，则从所述队列中弹出一个前端工作线程进行运行。

4.根据权利要求1所述的方法，其特征在于，将所述画布对象进行转换控制权处理，得到该画布对应的离屏对象。

5.根据权利要求1所述的方法，其特征在于，所述将每个地理位置数据根据其经纬度坐标分配至所述各个网格的数据存储对象进一步包括：

根据地理位置数据中的经纬度计算得到该地理位置数据对应的网格坐标；

根据各网格坐标将对应的地理位置数据分配至对应的网格的数据存储对象；其中，地图上的网格是通过网格坐标来识别的。

6.根据权利要求1所述的方法，其特征在于，所述创建展示层的画布进一步包括：

针对每一个网格创建一个画布对象；

通过级联样式表将所述每一个画布对象定位至所对应的网格位置。

7.根据权利要求1所述的方法，其特征在于，所述网格的预设尺寸长宽均为256像素。

8.一种海量地理位置数据的渲染装置，其特征在于，包括：

数据分组模块，所述数据分组模块用于将地图可视区域划分成若干预设尺寸的网格，并对各个网格创建展示层的画布，将每个地理位置数据根据其经纬度坐标分配至所述各个网格的数据存储对象；

数据转换和通信控制模块，所述数据转换和通信控制模块用于启动至少一个前端工作线程，将所述画布对应的离屏对象传入所述前端工作线程，将所述各个网格的数据存储对象传入所述前端工作线程；以及，

图形绘制模块，所述图形绘制模块用于将所述前端工作线程通过预定义的数据处理与图形渲染逻辑，将数据渲染到所述离屏对象上，在所述离屏对象上渲染的图像将自动同步到所述展示层的画布后呈现到图形界面上。

9.一种地理位置数据处理设备，其特征在于，包括：

存储器，用于存储计算机可执行指令；以及，

处理器，用于在执行所述计算机可执行指令时实现如权利要求1至7中任意一项所述的方法中的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器执行时实现如权利要求1至7中任意一项所述的方法中的步骤。

Images