一种打点渲染方法、装置、设备及存储介质与流程

1.本发明涉及可视化技术领域，特别涉及一种打点渲染方法、装置、设备及存储介质。


背景技术：

2.目前处于智慧城市，智慧楼宇，智慧工厂等数字孪生及大数据的时代，越来越多的信息需要进行可视化的展示，场景的展示也越来越复杂，有城市的建筑，有高低起伏的山脉，有室内的信息，也有室外的信息，清晰的表达一个位置的信息已达到人类的快速理解、分析趋势并做出决策的目的，利用各种的图表来清晰的表达与理解这些数据，对应一些空间相关的数据通过地图以及基于地图的各种可视化图表进行展示。目前常用的打点方式是基于互联网地图例如百度地图，高德地图，腾讯地图等提供的api（application program interface，应用程序接口），通过设计的打点图标进行打点展示，基本是以二维的模式显示各种打点的图标，形式相对单一，都是通过图片形式marker（标记）的方式展示，业务中需要根据不同的业务要求设计师设计不同的marker图标，灵活性差。另外一种是基于一些可视化方向的gis（geographic information system，地理信息系统）类库进行，例如mapbox、antv l7（空间数据可视分析工具）等，可视化打点展示，这些地图都是基于三维模式展示的，开源并为用户提供相关的api接口，用户可以根据接口方式进行打点，同时也实现了自定义打点，通过dom（document object model，文档对象模型）元素，但是这种方式不利于实现海量打点，dom元素过多时移动地图或缩放地图会卡顿。
3.因此可以明白现有的打点方案存在以下缺点：渲染的形式相对单一化，不利于应对复杂多变的应用场景，尤其是使用一些可编辑的可视化工具来完成这样的打点，往往会限制用户的需求，只能按照单一的模式来展示打点，例如只能上传一个图标，图标的尺寸比例是有要求的，再加上一个文字描述。由于通过图标加文字的方式展示，甚至有些只展示图标，鼠标移动上去才显示文字这种方式，提升了海量渲染的数量，但展示的效果相对较差，用户很难识别具体的打点的信息。部分的海量打点，不支持拾取，由于采用了顶点合并技术就没有实现拾取的功能，这样用户只能看到一些打点的分布情况，而没有具体的交互。海量数据渲染渲染性能差，存在卡顿的问题。


技术实现要素：

4.有鉴于此，本发明的目的在于提供一种打点渲染方法、装置、设备和存储介质，能够减少渲染对象的数量，降低卡顿的概率，提升渲染性能和计算机利用率。其具体方案如下：第一方面，本技术公开了一种打点渲染方法，应用于浏览器主线程，包括：读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件；将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所
述任务管理器中进行数据处理操作，得到处理后数据；接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。
5.可选的，所述读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件，包括：通过预设引擎读取用户提供的打点配置信息以及打点数据并将所述打点配置信息存储；利用所述预设引擎初始化全部管理器，以得到数据传输规则；所述全部管理器包含任务管理器、渲染管理器、拾取管理器；基于所述数据传输规则以及所述打点配置信息确定目标组件并生成渲染图层。
6.可选的，所述将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据，包括：初始化所述渲染图层并判断是否需要所述目标组件；若需要所述目标组件则初始化所述目标组件，并判断所述打点数据的数量是否高于预设数量；当所述打点数据的数量高于预设数量时，将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行与所述目标组件对应的数据处理操作，得到处理后数据。
7.可选的，所述将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据，包括：将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中基于接收到的所述打点数据进行预设数据处理合并生成操作，以得到目标网格数据。
8.可选的，所述将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据，包括：当所述目标组件为文字组件时，将与所述文字组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作得到文字网格数据，然后基于文字网格数据获取目标空间数据值并基于所述目标空间数据值计算所述目标显示页面内的可见文字，并按照所述可见文字的顺序逐个进行文字位置碰撞检查，得到检查通过的目标文字网格数据；当所述目标组件为拉线组件时，将与所述拉线组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行实例化渲染数据生成操作，得到拉线网格数据。
9.可选的，所述对所述可渲染对象进行渲染操作之后，还包括：当所述目标组件为图标组件时，判断是否进行拾取操作，若是则利用图形处理器拾取所述图标组件对应的图标；当所述目标组件为所述文字组件时，判断是否进行拾取操作，若是则利用中央处
理器拾取所述文字组件对应的文字。
10.可选的，所述基于所述目标组件以及所述处理后数据生成可渲染对象之后，还包括：将所述可渲染对象添加至渲染队列；相应的，所述对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面，包括：判断所述渲染队列中是否存在所述可渲染对象；若存在所述可渲染对象则将所述可渲染对象发送至所述图形处理器，以便在所述图形处理器中对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。
11.第二方面，本技术公开了一种打点渲染装置，应用于浏览器主线程，包括：信息读取模块，用于读取用户提供的打点配置信息以及打点数据；组件确定模块，用于基于所述打点配置信息确定目标组件；数据传输模块，用于将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据；渲染对象生成模块，用于接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；渲染模块，用于对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。
12.第三方面，本技术公开了一种电子设备，包括：存储器，用于保存计算机程序；处理器，用于执行所述计算机程序，以实现如前述公开的打点渲染方法的步骤。
13.第四方面，本技术公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如前述公开的打点渲染方法。
14.可见，本技术提供了一种打点渲染方法，包括：读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件；将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据；接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。由此可见，本技术通过在所述任务管理器中进行数据处理操作，减少了主线程的运算过程，降低了卡顿的概率，主线程基于所述处理后数据生成可渲染对象，减少了渲染对象的数量，提升了渲染性能和计算机利用率。
附图说明
15.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
16.图1为本技术公开的一种打点渲染方法流程图；
图2为本技术公开的一种渲染结果示意图；图3为本技术公开的一种具体的打点渲染方法流程图；图4为本技术公开的一种具体的打点渲染方法流程图；图5为本技术公开的一种具体的打点渲染方法流程图；图6为本技术公开的一种顶点计算示意图；图7为本技术公开的一种面构建示意图；图8为本技术公开的一种颜色渲染示意图；图9为本技术提供的打点渲染装置结构示意图；图10为本技术提供的一种电子设备结构图。
具体实施方式
17.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
18.目前，现有的打点方案存在以下缺点：渲染的形式相对单一化，不利于应对复杂多变的应用场景，尤其是使用一些可编辑的可视化工具来完成这样的打点，往往会限制用户的需求，只能按照单一的模式来展示打点，例如只能上传一个图标，图标的尺寸比例是有要求的，再加上一个文字描述。由于通过图标加文字的方式展示，甚至有些只展示图标，鼠标移动上去才显示文字这种方式，提升了海量渲染的数量，但展示的效果相对较差，用户很难识别具体的打点的信息。部分的海量打点，不支持拾取，由于采用了顶点合并技术就没有实现拾取的功能，这样用户只能看到一些打点的分布情况，而没有具体的交互。海量数据渲染渲染性能差，存在卡顿的问题。为此，本技术提供了一种打点渲染方法，能够减少渲染对象的数量，降低卡顿的概率，提升渲染性能和计算机利用率。
19.本发明实施例公开了一种打点渲染方法，参见图1所示，应用于浏览器主线程，该方法包括：步骤s11：读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件。
20.本实施例中，读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件。可以理解的是，通过自研的gis引擎读取用户提供的打点配置信息以及打点数据，打点配置信息可以是组合打点配置信息。在读取到组合打点配置信息之后，基于所述组合打点配置信息确定目标组件，即根据用户提供的组合打点配置信息分析组合打点中需要实例化的三维组件。例如，所述目标组件可以是化冲击波组件、拉线组件、图标组件以及文字组件等。
21.步骤s12：将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据。
22.本实施例中，确定目标组件之后，将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据。可以理解的是，将打点数据传输至任务（worker）管理器（即异步线程），在worker中利用不同
的组件的特性进行不同的数据处理，例如worker管理器调度mesh（网格）数据处理合并生成操作来处理上述打点数据。
23.由于浏览器中的网页是单线程，因此海量的数据通过javascript（一种直译式脚本语言）直接处理就会导致网页的卡顿，所以利用worker技术，让复杂的计算通过worker线程异步进行计算，这样大大提升了计算机的利用率，浏览器的主线程也不会受到影响，worker阶段主要包括三种工作：mesh数据处理合并生成、实例化数据处理合并生成和文字碰撞检查。
24.步骤s13：接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象。
25.本实施例中，当在任务管理器中进行数据处理操作得到处理后数据之后，任务管理器将生成的处理后数据返回至主线程，即接收所述任务管理器返回的所述处理后数据，然后基于所述目标组件以及所述处理后数据生成可渲染对象。可以理解的是，目前常用的打点方式是基于互联网地图（例如百度地图，高德地图，腾讯地图等）提供的api，通过设计的打点图标进行打点展示，基本是以二维的模式显示各种打点的图标，形式相对单一，都是通过图片形式marker的方式展示，业务中需要根据不同的业务要求设计师设计不同的marker图标，灵活性差。本方案中基于所述目标组件以及所述处理后数据生成的可渲染对象为三维对象，上述三维对象为用户传递给gpu（graphics processing unit，图形处理器）渲染的对象。使用互联网地图例如百度地图，高德地图，腾讯地图等可以实现简单的图标、文字的打点，在互联网地图被称为marker或添加标记。
26.步骤s14：对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。
27.本实施例中，基于所述目标组件以及所述处理后数据生成可渲染对象之后，对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面，如图2所示。可以理解的是，在渲染阶段，不同的渲染对象会采用不同的批次进行渲染，通过合并完成的海量数据mesh传递给gpu，gpu接收到数据就会在shader（着色器）中进行渲染操作。
28.具体的，mesh数据处理合并生成是一种大数据渲染的技术，就是把多个独立的mesh合并成一个mesh，以达到渲染对象的减少的目的，对于gpu渲染来说，影响渲染效果的一大因素就是渲染数量太多，导致渲染批次太多，而使得gpu渲染效率下降，gpu一般都包含很多的处理单元，并行处理能力很强，所以对单个批次的大数据量能够很快的完成渲染，mesh数据处理合并生成worker，并不是将多个mesh进行合并，而是在生成mesh的时候，从数据源上就直接将多个打点信息转为一个mesh，一个mesh信息包括顶点、法线、uv（unique visitor，网站独立访客）、索引等，处理好的数据worker传回给浏览器主线程，浏览器主线程创建渲染mesh对象并添加到渲染队列中。实例化渲染数据生成worker，负责拉线的mesh相关数据渲染数据的生成，实例化这项技术能够让我们使用一个渲染调用来绘制多个物体，从而节省每次绘制物体时从cpu（central processing unit/processor，中央处理器）至gpu的通信，即只需要一次，由于打点中拉线的结构是一样的，所以采用该技术实例化渲染数据生产worker会构建拉线的mesh，然后根据传入的用户数据，生成每一个拉线的实例化矩阵，实例化矩阵包含位置，缩放，旋转信息，然后放到一个float32array数组中，作为顶点属性传递给gpu，这样每一个拉线通过16个数值的矩阵就可以表示，减少了传输，worker
将处理完成的数据，传递给浏览器主线程，主线程拿到处理好的数据，采用instanced实例化渲染的方式，创建渲染对象并添加到渲染队列。文字位置碰撞检查worker，根据生成好的文字mesh渲染数据，通过将文字投影到屏幕空间转换，转换后的数据会返回x、y、z三个值，x与y表示的是屏幕坐标，z表示的是文字的深度（也可以理解为与相机的距离），根据文字与相机的远近，以及文字的包围盒，计算在屏幕范围内可见的文字，然后根据距离最近文字的顺序，逐个判断各个包围盒是否存在重叠，将不重叠的及不被遮挡的文字显示，最后将这些文字mesh发送到浏览器主线程，实例化这些文字的mesh，并添加到渲染进程中。具体的，mesh数据处理合并生成是一种大数据渲染的技术，就是把多个独立的mesh合并成一个mesh，以达到渲染对象的减少的目的，对于gpu渲染来说，影响渲染效果的一大因素就是渲染数量太多，导致渲染批次太多，而使得gpu渲染效率下降，gpu一般都包含很多的处理单元，并行处理能力很强，所以对单个批次的大数据量能够很快的完成渲染，mesh数据处理合并生成worker，并不是将多个mesh进行合并，而是在生成mesh的时候，从数据源上就直接将多个打点信息转为一个mesh，一个mesh信息包括顶点、法线、uv（unique visitor，网站独立访客）、索引等，处理好的数据worker传回给浏览器主线程，浏览器主线程创建渲染mesh对象并添加到渲染队列中。实例化渲染数据生成worker，负责拉线的mesh相关数据渲染数据的生成，实例化这项技术能够让我们使用一个渲染调用来绘制多个物体，从而节省每次绘制物体时从cpu（central processing unit/processor，中央处理器）至gpu的通信，即只需要一次，由于打点中拉线的结构是一样的，所以采用该技术实例化渲染数据生产worker会构建拉线的mesh，然后根据传入的用户数据，生成每一个拉线的实例化矩阵，实例化矩阵包含位置，缩放，旋转信息，然后放到一个float32array数组中，作为顶点属性传递给gpu，这样每一个拉线通过16个数值的矩阵就可以表示，减少了传输，worker将处理完成的数据，传递给浏览器主线程，主线程拿到处理好的数据，采用instanced实例化渲染的方式，创建渲染对象并添加到渲染队列。文字位置碰撞检查worker，根据生成好的文字mesh渲染数据，通过将文字投影到屏幕空间转换，转换后的数据会返回x、y、z三个值，x与y表示的是屏幕坐标，z表示的是文字的深度（也可以理解为与相机的距离），根据文字与相机的远近，以及文字的包围盒，计算在屏幕范围内可见的文字，然后根据距离最近文字的顺序，逐个判断各个包围盒是否存在重叠，将不重叠的及不被遮挡的文字显示，最后将这些文字mesh发送到浏览器主线程，实例化这些文字的mesh，并添加到渲染进程中。
29.本方案中的基于地图的可视化方式打点的技术在业务中能够更加快速的应对业务的变化，为不同的业务展示不同形式的打点形态，同时在地图的缩放中，也会以更加友好的方式展示打点的形态，同时支持海量数据的渲染及拾取。在地图的不同层级下，可以根据相机的远近动态调整线条的长度、文字的大小、图标的大小，各个信息点（打点）中三维场景中能够适配场景的变化，在此基础上一个打点数据通过多个三维元素来组合展示，理论上在相同的计算机上，渲染的数量会有成倍的减少，当前市面上的一些技术都会以单个模式的方式进行海量渲染，灵活运用现有技术，一方面可以能够更加友好的展示打点信息，同时也实现了海量的渲染的目的，并在海量渲染基础上也实现了打点的拾取，满足了业务的需求。一个组合打点包括冲击波，拉线，图标，文字等，实现组合打点的海量渲染可以最大化的应对复杂多变的业务场景，复杂多变的场景例如建筑物以及高低起伏的山脉、树木等，此时就需要通过冲击波、拉线等方式来突出打点的位置，若没有建筑物就可以只要图标文字两
种元素，根据业务的不同也可以加入粒子效果等更多的效果在打点元素上，对组合式打点的各个小部件进行不一样的数据处理。整个打点中构建的冲击波mesh一个，拉线mesh一个，图表mesh一个，文字mesh若干个，提高了渲染效率同时也实现了海量数据的渲染，并支持组合式的海量渲染。
30.在业务的展示中需要不同形式的标记来更加清晰的表达，同时进需要在大的区域范围内进行海量信息点的表达，目前普通pc与笔记本在浏览器中渲染的三维对象的数量能力是有限的，本方案总结了业务中常用的信息的标记（简称打点）结构，对一个打点通过多个三维元素的组合渲染完成，解决了传统的打点信息简单，信息点尺寸变形，缩放后标注不清晰等问题，同时针对这种复杂结构的打点，解决了海量数据的渲染及鼠标拾取问题，即在实际的业务中，通过三维可视化海量展示各个点的信息。
31.可见，本技术提供了一种打点渲染方法，包括：读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件；将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据；接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。由此可见，本技术通过在所述任务管理器中进行数据处理操作，减少了主线程的运算过程，降低了卡顿的概率，主线程基于所述处理后数据生成可渲染对象，减少了渲染对象的数量，提升了渲染性能和计算机利用率。
32.参见图3所示，本发明实施例公开了一种打点渲染方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。
33.步骤s21：通过预设引擎读取用户提供的打点配置信息以及打点数据并将所述打点配置信息存储。
34.本实施例中，通过预设引擎读取用户提供的打点配置信息以及打点数据，然后将所述打点配置信息暂时存储。可以理解的是，打点配置信息是json结构，表示一个打点的组成的描述信息。
35.步骤s22：利用所述预设引擎初始化全部管理器，以得到数据传输规则。
36.本实施例中，如图4所示，在主线程开始运行后，利用所述预设引擎初始化worker管理器、渲染管理器以及拾取管理器，得到数据传输规则。可以理解的是，本方案可以划分为四个阶段：初始化阶段、worker海量数据处理阶段、渲染阶段以及拾取阶段。需要指出的是，worker海量数据处理阶段在异步线程进行，而初始化阶段、渲染阶段以及拾取阶段在主线程中进行。具体的，在初始化阶段，利用自研的gis引擎初始化各个功能单元控制器（即管理器），得到对应的数据传输规则。管理器可以更好的调度组件的运行，并且负责组件的新增、销毁以及整体属性控制等，在组合打点这个技术上，主要初始化的管理器有worker（任务）管理器，渲染管理器、拾取管理器，以及一些其他辅助的管理器。需要指出的是，worker即web worker，是运行在后台的javascript，不影响页面的性能。
37.步骤s23：基于所述数据传输规则以及所述打点配置信息确定目标组件并生成渲染图层。
38.本实施例中，基于所述数据传输规则以及所述打点配置信息确定目标组件并生成渲染图层，以便更好的管理所有三维组件的生产及交互。可以理解的是，渲染图层是一组参
与渲染的组件的容器，用于集中的对所有组件的操作，比如数据的更新、配置的初始化、更新以及鼠标事件的获取等。例如，基于海量组件生成第一渲染图层，基于非海量组件生成第二渲染图层等。
39.步骤s24：初始化所述渲染图层并判断是否需要所述目标组件。
40.本实施例中，确定目标组件并生成渲染图层之后，初始化所述渲染图层并判断是否需要所述目标组件。如图4所示，判断是否需要所述目标组件，若不需要所述目标组件则保持现状。
41.步骤s25：若需要所述目标组件则初始化所述目标组件，并判断所述打点数据的数量是否高于预设数量。
42.本实施例中，若需要所述目标组件则初始化所述目标组件，并判断所述打点数据的数量是否高于预设数量。可以理解的是，若需要所述目标组件则先对所述目标组件进行初始化操作，当初始化完成之后，判断所述打点数据的数量是否高于预设数量，若所述打点数据的数量高于预设数量是则判定当前为海量打点数据，此时需要将所述目标组件对应的所述打点数据传输至子线程（即异步线程）中的任务管理器中进行对应的处理操作。若所述打点数据的数量低于预设数量，则判定当前非海量打点数据，并在主线程中对所述目标组件进行实例化操作，以得到渲染对象，然后通过场景管理器调用对应的场景进行渲染，以得到渲染出后的整个目标场景。
43.步骤s26：当所述打点数据的数量高于预设数量时，将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行与所述目标组件对应的数据处理操作，得到处理后数据。
44.本实施例中，当所述打点数据的数量高于预设数量时，将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器中进行对应的数据处理操作，得到处理后数据。例如，若目标组件为冲击波组件，则初始化冲击波组件并将用户数据传递给worker管理器，worker管理器调度mesh数据处理合并worker来处理该数据，同样根据打点配置信息判断marker组件（绘制图标），拉线组件（绘制宽线条）、文字组件（绘制文字）是否存在，并进行初始化，然后将数据传递给worker管理器，在worker中利用不同的组件的特性进行不同的数据处理，得到处理后数据。
45.步骤s27：接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象。
46.步骤s28：对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。
47.关于上述步骤s27、s28的具体内容可以参考前述实施例中公开的相应内容，在此不再进行赘述。
48.可见，本技术实施例通过预设引擎读取用户提供的打点配置信息以及打点数据并将所述打点配置信息存储；利用所述预设引擎初始化全部管理器，以得到数据传输规则；基于所述数据传输规则以及所述打点配置信息确定目标组件并生成渲染图层；初始化所述渲染图层并判断是否需要所述目标组件；若需要所述目标组件则初始化所述目标组件，并判断所述打点数据的数量是否高于预设数量；当所述打点数据的数量高于预设数量时，将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器
中进行与所述目标组件对应的数据处理操作，得到处理后数据；接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面，降低了卡顿的概率，减少了渲染对象的数量，提升了渲染性能和计算机利用率。
49.参见图5所示，本发明实施例公开了一种打点渲染方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。
50.步骤s31：读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件。
51.步骤s32：将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据。
52.本实施例中，将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中基于接收到的所述打点数据进行预设数据处理合并生成操作，以得到目标网格数据。例如，如图6所示，当目标组件为冲击波组件时，每一个冲击波需要一个中心位置点，mesh数据后将位置信息保存多份，以便在gpu顶点着色器中处理，假设有两个个冲击波的位置分别是[{lng:121，lat:39}，[1ng:119，lat:21]]，即经度是121度、纬度是北纬39度以及经度为119度、纬度为北纬21度时，mesh数据处理合并生成会将其转换为墨卡托投影数据，以便在渲染时使用。假设转换的结果是[31819，-10279，0]与[31305，-4888，0]，为了将一个点的位置转换为一个面，将把每个点的信息都生成4份相同的数据，{position:[31819,-10279,0，31819,-10279,0，31819,-10279,0，31819,-10279,0，31305,-4888,0，31305,-4888,0，31305,-4888,0，31305,-4888,0]},同时添加一份4个方向的位置偏移量值，[-0.5,0.5,0.5,0.5,0.5,
ꢀ‑
0.5,-0.5,-0.5]，前两个数值-0.5，0.5表示左上角，第三个数值与第四个数值，表示右上角，第五个数值与第六个数值表示右下角，最后两个数值表示左下角，得到4个方向的增量关系，然后为每一个顶点都构建一组这样的数据，通过上述操作两个顶点会变成八个顶点的数据，然后构建每个顶点的位置偏移量{offset:[-0.5,0.5,0.5,0.5,0.5,-0.5,-0.5,-0.5-0.5,0.5,0.5,0.5, 0.5,-0.5,-0.5,-0.5]}，两个顶点两组偏移量，最后在根据索引规则，为一个顶点都编写一个索引，来构建成三角面，如图7所示，如[0，3，2，0，2，1，4，7，6，4，6，5]以及对应的uv，法线数据等数据。
[0053]
在一种具体的实施方式中，当所述目标组件为文字组件时，将与所述文字组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作得到文字网格数据，然后基于文字网格数据获取目标空间数据值并基于所述目标空间数据值计算所述目标显示页面内的可见文字，并按照所述可见文字的顺序逐个进行文字位置碰撞检查，得到检查通过的目标文字网格数据，具体的，根据生成好的文字mesh渲染数据，通过将文字投影到屏幕空间，转换后的数据会返回x、y、z三个值，x与y表示的是屏幕坐标，z表示的是文字的深度（与相机的距离），根据文字与相机的距离远近以及文字的包围盒，计算在屏幕范围内可见的文字，然后根据距离最近的文字的顺序逐个判断各个包围盒是否存在重叠，显示不重叠的及不被遮挡的文字，得到文字mesh。
[0054]
在另一种具体的实施方式中，当所述目标组件为拉线组件时，将与所述拉线组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行实例化渲染数据生成操作，得到拉线网格数据，具体的，实例化渲染数据生成worker负责拉线的
mesh相关数据渲染数据的生成，实例化能够使用一个渲染调用绘制多个物体，从而节省每次绘制物体时从cpu至gpu的通信，即只需要一次，由于打点中拉线的结构一样，所以采用该技术实例化渲染数据生产worker会构建拉线的mesh，然后根据传入的用户数据生成每一个拉线的实例化矩阵，实例化矩阵包含位置，缩放，旋转信息，然后放到一个float32array数组中，作为顶点属性传递给gpu，这样每一个拉线用16个数值的矩阵表示，减少了传输。
[0055]
步骤s33：接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象。
[0056]
本实施例中，接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象。可以理解的是，子线程将处理好的数据返回至浏览器主线程，浏览器主线程创建渲染mesh对象。在一种具体的实施方式中，将文字mesh发送到浏览器主线程，实例化文字的mesh。在另一种具体的实施方式中，worker将处理完成的数据传递给浏览器主线程，主线程接收到处理好的数据后采用instanced实例化渲染的方式，创建渲染对象。
[0057]
步骤s34：将所述可渲染对象添加至渲染队列。
[0058]
本实施例中，基于所述目标组件以及所述处理后数据生成可渲染对象之后，将所述可渲染对象添加至渲染队列。所述渲染队列中存在所有未被渲染的可渲染对象。
[0059]
步骤s35：判断所述渲染队列中是否存在所述可渲染对象。
[0060]
本实施例中，判断所述渲染队列中是否存在所述可渲染对象。若所述渲染队列中存在所述可渲染对象则进行对应的渲染操作，若渲染队列中不存在所述可渲染对象则不变。
[0061]
步骤s36：若存在所述可渲染对象则将所述可渲染对象发送至所述图形处理器，以便在所述图形处理器中对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。
[0062]
本实施例中，若所述渲染队列中存在所述可渲染对象则将所述可渲染对象发送至所述图形处理器，以便在所述图形处理器中对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。可以理解的是，在渲染阶段，不同的渲染对象会采用不同的批次进行渲染，通过合并完成的海量数据mesh传递给gpu，gpu接收到数据就会在shader中执行如下公式：；其中，mvprojectmatrix是投影视图模型矩阵，是投影矩阵、视图矩阵以及模型矩阵的相乘的结果，position是传递给position数据的一个点，offset是传递的一个偏移方向，u_scale是由点到面的放大量，通过uniform的方式传递给gpu。通过这样的方式将海量的数据点组织在一个mesh中，然后在shader中加入冲击波的动效代码，就实现了海量冲击波的渲染。图标部分的海量也是采用这样的方案实现的，但是每一个图标都需要动态的朝向用户，这里会在shader中，根据图标的位置，及当前相机的位置，动态计算各个图标的旋转方向。
[0063]
进一步的，实例化方式的mesh对象是显卡支持的一种渲染模式，广泛的运用到海量数据渲染的场景中，主要针对mesh的结构相同，位置、旋转、缩放等不一样的场景中，本发明中的拉线，就连接打点的位置与图标的一条宽度线条，需要通过创建每一个线条的mesh
来完成，而每一个打点的拉线只有位置不同，所以采用instance实例化渲染，将一份mesh渲染数据传输至gpu，gpu会根据用户传入的变换矩阵进行复制并进行相应的变换操作，渲染执行的公式如下：gl_position=projectmatrix*viewmatrix*instancematrix*position；其中，projectmatrix是投影矩阵，viewmatrix是视图矩阵，instancematrix是通过顶点属性的方式，传入的实例化变换矩阵，保存模型的位置、选择和缩放信息，从而高效的且节省资源的进行海量拉线的渲染。
[0064]
对于文字，由于worker中进行了碰撞检查，每一次渲染的文字都是有限的个数，所以采用一个文字mesh一个批次的渲染方式，与普通的mesh渲染一致，区别在于在worker中进行了数据的处理与碰撞检查筛选。
[0065]
步骤s37：判断是否进行拾取操作。
[0066]
本实施例中，判断是否进行拾取操作。具体的，当所述目标组件为图标组件时，判断是否进行拾取操作，若是则利用图形处理器拾取所述图标组件对应的图标。当所述目标组件为所述文字组件时，判断是否进行拾取操作，若是则利用中央处理器拾取所述文字组件对应的文字。可以理解的是，在拾取阶段，本发明只对打点上的图标和文字做了拾取，针对不同的情况采用不同的拾取方式，对于文字来说，由于每一个文字都是一个独立的mesh，所以直接采用cpu拾取，cpu拾取的方式是通过鼠标的位置向渲染的三维空间中发射一条射线，射线碰到的物体就是拾取到的物体，然后根据物体的远近返回拾取到的三维对象。这种方式使用简单，也是广泛使用在拾取的技术上。而对于图标，由于图标使用了mesh数据合并的方式，整个渲染场景中只有一个图标的mesh，所以cpu拾取完成不了图标的拾取，因此采用的gpu拾取方式，gpu拾取会对渲染的帧率造成一些影响，它的主要原理是将渲染的海量数据的mesh克隆，并根据每一个打点的顶点数据对应的生成可以用颜色表示编号，如图8所示，颜色rgb三个通道，每个通道有256个值，理论上就可以存放256*256*256个颜色值，如果渲染物体是不透明的，可以加入alpha通道，即在此基础上再乘以256，然后将每一个顶点对应都采用顶点作色的方式，渲染到framebuffer中，根据鼠标所在的位置，通过opengl或webgl的图形api读取framebuffer中，对应鼠标位置的颜色值，再将颜色值转换为r g*256 b*65536-1的值，就是打点出入数据的对应索引，完成合并mesh的数据拾取，从而拾取图标，而文字直接通过cpu拾取。
[0067]
海量打点在gis三维空间得到广泛应用，一部分的处理方式是根据地图的缩放层级，进行数据的聚合来展示海量打点，这种方式对于一些实时数据统计展示较好，本渲染引擎也支持这种方式，但如果不进行统计，大范围的展示只能根据单一图标的方式进行展示，并且大部分都是基于二维地图实现，这种方式在大范围内展示海量的图标，由于屏幕空间有限，图标之间会存在遮挡，不易区分且可视化效果差，而基于三维的海量打点，市面上提供的打点方式也是简单的图标加文字，海量打点由于渲染对象的增多，大部分也是采用数据mesh合并或者实例化渲染实现，但通常只是利用一种方式进行渲染，甚至没有拾取功能，本发明使用组合式打点，通过拉线，图标，文字多元素组合，根据地图的不同视角可以让用户快速的读取到位置的信息，每一个拉线直接连接地面冲击波与图标，空间上很容易获悉位置的信息，相比一个图标展示，对于一些三维地图，在地图中的各种建筑物、高低起伏的山脉、图标等容易被遮挡，同时渲染引擎还存在绘制海量打点耗时长，性能差等问题。可以
理解的是，使用mapbox gl，antv l7第三方开源库，可视实现三维地图的简单海量打点，目前api只提供这种功能，组合式需要开发。
[0068]
关于上述步骤s31、s33的具体内容可以参考前述实施例中公开的相应内容，在此不再进行赘述。
[0069]
可见，本技术实施例通过读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件；将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据；接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；将所述可渲染对象添加至渲染队列；判断所述渲染队列中是否存在所述可渲染对象；若存在所述可渲染对象则将所述可渲染对象发送至所述图形处理器，以便在所述图形处理器中对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面；判断是否进行拾取操作，降低了卡顿的概率，减少了渲染对象的数量，提升了渲染性能和计算机利用率。
[0070]
参见图9所示，本技术实施例还相应公开了一种打点渲染装置，应用于浏览器主线程，包括：信息读取模块11，用于读取用户提供的打点配置信息以及打点数据；组件确定模块12，用于基于所述打点配置信息确定目标组件；数据传输模块13，用于将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据；渲染对象生成模块14，用于接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；渲染模块15，用于对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。
[0071]
可见，本技术包括：读取用户提供的打点配置信息以及打点数据，基于所述打点配置信息确定目标组件；将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作，得到处理后数据；接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面。由此可见，本技术通过在所述任务管理器中进行数据处理操作，减少了主线程的运算过程，降低了卡顿的概率，主线程基于所述处理后数据生成可渲染对象，减少了渲染对象的数量，提升了渲染性能和计算机利用率。
[0072]
在一些具体实施例中，所述信息读取模块11，具体包括：配置信息读取单元，用于通过预设引擎读取用户提供的打点配置信息以及打点数据；配置信息存储单元，用于将所述打点配置信息存储；数据传输规则获取单元，用于利用所述预设引擎初始化全部管理器，以得到数据传输规则；所述全部管理器包含任务管理器、渲染管理器、拾取管理器。
[0073]
在一些具体实施例中，所述组件确定模块12，具体包括：目标组件确定单元，用于基于所述数据传输规则以及所述打点配置信息确定目标
组件；渲染图层生成单元，用于生成渲染图层。
[0074]
在一些具体实施例中，所述数据传输模块13，具体包括：图层初始化单元，用于初始化所述渲染图层并判断是否需要所述目标组件；组件初始化单元，用于若需要所述目标组件则初始化所述目标组件；数量判断单元，用于判断所述打点数据的数量是否高于预设数量；打点数据传输单元，用于当所述打点数据的数量高于预设数量时，将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行与所述目标组件对应的数据处理操作，得到处理后数据；目标网格数据获取单元，用于将与所述目标组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中基于接收到的所述打点数据进行预设数据处理合并生成操作，以得到目标网格数据；文字网格数据获取单元，用于当所述目标组件为文字组件时，将与所述文字组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行数据处理操作得到文字网格数据，然后基于文字网格数据获取目标空间数据值并基于所述目标空间数据值计算所述目标显示页面内的可见文字，并按照所述可见文字的顺序逐个进行文字位置碰撞检查，得到检查通过的目标文字网格数据；拉线网格数据获取单元，用于当所述目标组件为拉线组件时，将与所述拉线组件对应的所述打点数据传输至子线程中的任务管理器，以便在所述任务管理器中进行实例化渲染数据生成操作，得到拉线网格数据。
[0075]
在一些具体实施例中，所述渲染对象生成模块14，具体包括：可渲染对象生成单元，用于接收所述任务管理器返回的所述处理后数据，基于所述目标组件以及所述处理后数据生成可渲染对象；可渲染对象添加单元，用于将所述可渲染对象添加至渲染队列；队列判断单元，用于判断所述渲染队列中是否存在所述可渲染对象。
[0076]
在一些具体实施例中，所述渲染模块15，具体包括：渲染单元，用于若存在所述可渲染对象则将所述可渲染对象发送至所述图形处理器，以便在所述图形处理器中对所述可渲染对象进行渲染操作，并将渲染完成后的对象信息显示至目标显示页面；图标拾取单元，用于当所述目标组件为图标组件时，判断是否进行拾取操作，若是则利用图形处理器拾取所述图标组件对应的图标；文字拾取单元，用于当所述目标组件为所述文字组件时，判断是否进行拾取操作，若是则利用中央处理器拾取所述文字组件对应的文字。
[0077]
进一步的，本技术实施例还提供了一种电子设备。图10是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本技术的使用范围的任何限制。
[0078]
图10为本技术实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的打点渲染方法中的相关步骤。另外，本实施例中的
电子设备20具体可以为电子计算机。
[0079]
本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本技术技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。
[0080]
另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222等，存储方式可以是短暂存储或者永久存储。
[0081]
其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是windows server、netware、unix、linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的打点渲染方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。
[0082]
进一步的，本技术实施例还公开了一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被处理器加载并执行时，实现前述任一实施例公开的打点渲染方法步骤。
[0083]
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
[0084]
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0085]
以上对本发明所提供的一种打点渲染方法、装置、设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。