一种基于web地图的车辆状态渲染方法、设备及介质与流程

本申请涉及地图渲染领域，具体涉及一种基于web地图的车辆状态渲染方法、设备及介质。

背景技术：

1、随着技术的发展，用户在驾车行驶时，能够通过web地图随时获取当前的地图情况以及车辆情况。然而传统的web地图渲染展示过程中，往往存在以下问题：

2、1、如果存在高延迟，那么地图的价值会大打折扣。难以保证实时、安全的获取数据；

3、2、将获取到的数据处理成前端可以展示、使用的数据，难以保证合理、快速的将处理完的数据渲染到浏览器上。

4、3、在数据处理过程中，难以在数据快速的合并、计算的同时，不影响渲染线程的工作。

技术实现思路

1、为了解决上述问题，本申请提出了一种基于web地图的车辆状态渲染方法，包括：

2、浏览器与服务器之间基于websocket建立连接，并基于所述连接获取web地图对应的全量数据，并将所述全量数据缓存在所述浏览器中，所述全量数据包含车辆数据、路径数据、图形数据、文字数据；

3、在后台对所述全量数据进行处理，以根据所述全量数据封装得到预先定义的若干个类；

4、根据所述若干个类，执行画布渲染任务，并将得到的画布渲染至所述浏览器中；

5、接收所述服务器推送的最新数据，并基于所述最新数据对所述画布进行更新。

6、在一个示例中，浏览器与服务器之间基于websocket建立连接，具体包括：

7、浏览器基于websocket协议，与服务器之间建立实时连接，并基于所述实时连接保持长时间通信，所述长时间通信指的是，每次建立实时连接后，除非发生预设事件，否则不停止所述实时连接；

8、并通过ssl协议和tls协议进行加密。

9、在一个示例中，在后台对所述全量数据进行处理，以根据所述全量数据封装得到预先定义的若干个类，具体包括：

10、确定预先定义的若干个javascript类，所述javascript类包括车辆类、路径类、图形类、文字类；

11、基于worker进程对所述全量数据进行处理，在后台的不同线程中并发执行多个数据封装任务，以将所述全量数据封装得到所述若干个javascript类，所述数据封装任务的运行时长超过预设时长；

12、将所述若干个javascript类提交给主线程。

13、在一个示例中，根据所述若干个类，执行画布渲染任务，并将得到的画布渲染至所述浏览器中，具体包括：

14、根据所述若干个javascript类中的各javascript类，在内存中分别对相应的canvas画布执行离屏渲染计算任务；

15、对所有执行完所述离屏渲染计算任务的画布进行组合，得到完整画布，并将所述完整画布渲染到所述浏览器中。

16、在一个示例中，基于worker进程对所述全量数据进行处理，具体包括：

17、基于worker进程，将所述全量数据对应的代码进行分解，得到多个可重用单元；

18、对所述多个可重用单元进行处理，并将处理结果组合后，作为对所述全量数据的处理结果。

19、在一个示例中，根据所述若干个javascript类中的各javascript类，在内存中分别对相应的canvas画布执行离屏渲染计算任务，具体包括：

20、根据指定javascript类，创建对应的函数方法，并通过所述函数方法绘制生成粒子；

21、对所述粒子进行初始化，并根据所述粒子绘制第一运动动画，以使所述第一运动动画在完整画布中，对车辆状态进行渲染。

22、在一个示例中，所述第一运动动画在完整画布中，对车辆状态进行渲染，具体包括：

23、确定所述车辆类对应的第二运动动画的运动轨迹；

24、将所述第一运动动画的运动轨迹，与所述第二运动动画的运动轨迹进行同步，并在所述第一运动动画内部，基于所述车辆数据中包含的车辆状态，对所述粒子的颜色进行设置。

25、在一个示例中，所述方法还包括：

26、基于所述连接获取web地图对应的增量数据；

27、在所述浏览器缓存的全量数据中，确定是否已存在与所述增量数据属于同类型的指定数据；

28、若存在，则根据所述指定数据已经封装得到的指定类，执行对所述增量数据的画布渲染任务。

29、另一方面，本申请还提出了一种基于web地图的车辆状态渲染设备，包括：

30、至少一个处理器；以及，

31、与所述至少一个处理器通信连接的存储器；其中，

32、所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如：上述任一示例所述的基于web地图的车辆状态渲染方法。

33、另一方面，本申请还提出了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：上述任一示例所述的基于web地图的车辆状态渲染方法。

34、通过本申请提出基于web地图的车辆状态渲染方法能够带来如下有益效果：

35、在后台对全量数据进行处理，能够不阻塞渲染，在数据快速的合并、计算的同时，不影响渲染线程的工作，保证了地图渲染过程的低延迟，能够合理、快速的将处理完的数据渲染到浏览器上，提高地图价值，提升了用户体验。

技术特征：

1.一种基于web地图的车辆状态渲染方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，浏览器与服务器之间基于websocket建立连接，具体包括：

3.根据权利要求1所述的方法，其特征在于，在后台对所述全量数据进行处理，以根据所述全量数据封装得到预先定义的若干个类，具体包括：

4.根据权利要求3所述的方法，其特征在于，根据所述若干个类，执行画布渲染任务，并将得到的画布渲染至所述浏览器中，具体包括：

5.根据权利要求3所述的方法，其特征在于，基于worker进程对所述全量数据进行处理，具体包括：

6.根据权利要求4所述的方法，其特征在于，根据所述若干个javascript类中的各javascript类，在内存中分别对相应的canvas画布执行离屏渲染计算任务，具体包括：

7.根据权利要求6所述的方法，其特征在于，所述第一运动动画在完整画布中，对车辆状态进行渲染，具体包括：

8.根据权利要求1所述的方法，其特征在于，所述方法还包括：

9.一种基于web地图的车辆状态渲染设备，其特征在于，包括：

10.一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：权利要求1～8中任一项权利要求所述的基于web地图的车辆状态渲染方法。

技术总结
本申请公开了一种基于web地图的车辆状态渲染方法、设备及介质，方法包括：浏览器与服务器之间基于websocket建立连接，并基于连接获取web地图对应的全量数据，并将全量数据缓存在浏览器中；在后台对全量数据进行处理，以根据全量数据封装得到预先定义的若干个类；根据若干个类，执行画布渲染任务，并将得到的画布渲染至浏览器中；接收服务器推送的最新数据，并基于最新数据对画布进行更新。在后台对全量数据进行处理，能够不阻塞渲染，在数据快速的合并、计算的同时，不影响渲染线程的工作，保证了地图渲染过程的低延迟，能够合理、快速的将处理完的数据渲染到浏览器上，提高地图价值，提升了用户体验。

技术研发人员：请求不公布姓名
受保护的技术使用者：九曜智能科技（浙江）有限公司
技术研发日：
技术公布日：2024/1/16