基于浏览器的渲染方法、装置、设备和存储介质与流程

    技术2026-07-02  7


    本技术涉及数据渲染技术,具体涉及一种基于浏览器的渲染方法、装置、设备和存储介质。


    背景技术:

    1、相关技术中,浏览器渲染可以通过地理信息系统(geographic informationsystem,gis)框架,如使用跨平台、跨浏览器的展示三维地球和地图的脚本库(cesium)先将数据封装成有形状有样式的矢量数据对象,然后利用框架提供的接口将数据对象集合添加到地图画布上,然而,在使用cesium处理大数据量的gis点时性能开销大,导致渲染时间过长,显示速度慢,最终造成页面卡顿失帧。而针对该问题,目前尚无有效解决方案。


    技术实现思路

    1、有鉴于此,本技术实施例提供了一种基于浏览器的渲染方法、装置、设备和存储介质,旨在有效提升gis信息渲染速度,改善了cesium原生接口渲染时间过长的问题。

    2、本技术实施例的技术方案是这样实现的:

    3、本技术实施例提供一种基于浏览器的渲染方法,包括:

    4、基于gis信息的信息数量,确定所述gis信息对应实例的矩阵数据的初始存储区;所述信息数量与所述实例的数量相对应;

    5、按照子线程的线程数量和所述信息数量对所述gis信息进行处理,得到每个所述子线程对应的gis子信息,以及按照子线程的线程数量对所述初始存储区进行处理,得到所述gis子信息对应的子存储区;所述子线程的线程数量与所述子存储区的数量相对应;各所述gis子信息对应的信息数量基于所述gis信息的信息数量和所述线程数量确定;

    6、利用每个所述子线程处理对应的所述gis子信息,得到每个所述gis子信息对应的子坐标数据;

    7、将所述gis子信息对应的子坐标数据分别存储至所述初始存储区中对应的子存储区,得到至少一个所述实例的矩阵数据的目标存储区;

    8、利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染。

    9、在上述方案中,所述基于gis信息的信息数量,确定所述gis信息对应实例矩阵数据的初始存储区之前,包括:

    10、基于预设框架生成地图容器;

    11、根据第一尺寸的所述地图容器,创建第二尺寸的待渲染画布;所述第一尺寸和所述第二尺寸相同;

    12、基于预设图形库对所述待渲染画布进行渲染,得到初始画布;

    13、获取所述初始画布的gis信息。

    14、在上述方案中,所述利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染,包括:

    15、基于渲染需求信息创建所述实例的顶点数据;

    16、利用所述主线程对所述实例的矩阵数据和所述顶点数据进行渲染。

    17、在上述方案中,所述基于渲染需求信息创建所述实例的顶点数据,包括:

    18、根据所述渲染需求信息确定所述实例中第一距离;所述第一距离表征所述实例的地理顶点与地理中点之间的实际距离;

    19、确定所述实例的地理中点坐标对应的渲染中点坐标,以及所述实例的地理顶点坐标的渲染顶点坐标;

    20、基于所述渲染中点坐标和所述渲染顶点坐标,确定所述实例的第二距离;所述第二距离表征所述实例的渲染顶点与渲染中点之间的渲染距离;

    21、基于所述第二距离和预设公式确定所述实例的顶点数据。

    22、在上述方案中,所述利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染,包括:

    23、基于渲染需求信息创建所述实例的颜色数据;

    24、利用所述主线程对所述实例的矩阵数据和所述颜色数据进行渲染。

    25、在上述方案中,所述利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染,包括:

    26、在每个所述子坐标数据分别存储至对应的每个子存储区的情况下,利用所述主线程接收每个所述子线程发送的通知消息;

    27、基于所述通知消息对所述目标存储区中每个所述实例的矩阵数据进行渲染。

    28、在上述方案中,所述方法还包括:创建主线程和至少一个子线程;所述主线程和每个所述子线程能够共享所述初始存储区。

    29、本技术实施例提供一种基于浏览器的渲染装置,包括:

    30、第一确定模块,用于基于gis信息的信息数量,确定所述gis信息对应实例的矩阵数据的初始存储区;所述信息数量与所述实例的数量相对应;

    31、第一处理模块,用于按照子线程的线程数量和所述信息数量对所述gis信息进行处理,得到每个所述子线程对应的gis子信息,以及按照子线程的线程数量对所述初始存储区进行处理,得到所述gis子信息对应的子存储区;所述子线程的线程数量与所述子存储区的数量相对应;各所述gis子信息对应的信息数量基于所述gis信息的信息数量和所述线程数量确定;

    32、第二处理模块,用于利用每个所述子线程处理对应的所述gis子信息,得到每个所述gis子信息对应的子坐标数据;

    33、存储模块,用于将所述gis子信息对应的子坐标数据分别存储至所述初始存储区中对应的子存储区,得到至少一个所述实例的矩阵数据的目标存储区;

    34、渲染模块,用于利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染。

    35、本技术实施例提供一种基于浏览器的渲染设备,包括:处理器和用于存储能够在处理器上运行的计算机程序的存储器,其中,

    36、所述处理器,用于运行计算机程序时,执行上述基于浏览器的渲染方法的步骤。

    37、本技术实施例提供一种存储介质,所述存储介质上存储有计算机程序,所述计算机程序被处理器执行时,实现上述基于浏览器的渲染方法的步骤。

    38、本技术实施例提供了一种基于浏览器的渲染方法、装置、设备和存储介质,包括:基于gis信息的信息数量,确定所述gis信息对应实例的矩阵数据的初始存储区;按照子线程的线程数量和所述信息数量对所述gis信息进行处理,得到每个所述子线程对应的gis子信息,以及按照子线程的线程数量对所述初始存储区进行处理,得到所述gis子信息对应的子存储区;所述子线程的线程数量与所述子存储区的数量相对应;各所述gis子信息对应的信息数量基于所述gis信息的信息数量和所述线程数量确定;利用每个所述子线程处理对应的所述gis子信息,得到每个所述gis子信息对应的子坐标数据;将所述gis子信息对应的子坐标数据分别存储至所述初始存储区中对应的子存储区,得到至少一个所述实例的矩阵数据的目标存储区;利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染。采用本技术实施例的技术方案,至少一个子线程能够共享gis信息,使用至少一个子线程分别处理对应的gis子信息,提升gis信息对应的坐标数据的计算效率,至少一个子线程能够直接将子坐标数据存储至子存储区,通过多个子线程对gis信息和初始存储区进行共享内存,多个子线程分别进行实例化绘制,能够避免在线程之间通信时线程之间进行数据拷贝产生的性能开销,从而提升gis信息渲染速度,改善了cesium原生接口渲染时间过长的问题。


    技术特征:

    1.一种基于浏览器的渲染方法,其特征在于,包括:

    2.根据权利要求1所述的方法,其特征在于,所述基于gis信息的信息数量,确定所述gis信息对应实例矩阵数据的初始存储区之前,所述方法还包括:

    3.根据权利要求1所述的方法,其特征在于,所述利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染,包括:

    4.根据权利要求3所述的方法,其特征在于,所述基于渲染需求信息创建所述实例的顶点数据,包括:

    5.根据权利要求1所述的方法,其特征在于,所述利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染,包括:

    6.根据权利要求1所述的方法,其特征在于,所述利用主线程对所述目标存储区中每个所述实例的矩阵数据进行渲染,包括:

    7.根据权利要求1所述的方法,其特征在于,所述方法还包括:创建主线程和至少一个子线程;所述主线程和每个所述子线程能够共享所述初始存储区。

    8.一种基于浏览器的渲染装置,其特征在于,包括:

    9.一种基于浏览器的渲染设备,其特征在于,包括:处理器和用于存储能够在处理器上运行的计算机程序的存储器,其中,

    10.一种存储介质,所述存储介质上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时,实现权利要求1至7任一项所述方法的步骤。


    技术总结
    本申请实施例提供了一种基于浏览器的渲染方法、装置、设备和存储介质,包括:基于GIS信息的信息数量,确定GIS信息对应实例的矩阵数据的初始存储区;按照子线程的线程数量,得到每个子线程对应的GIS子信息,以及GIS子信息对应的子存储区;利用每个子线程处理对应的GIS子信息,得到每个GIS子信息对应的子坐标数据;将GIS子信息对应的子坐标数据分别存储至初始存储区中对应的子存储区,得到至少一个实例的矩阵数据的目标存储区;利用主线程对目标存储区中每个实例的矩阵数据进行渲染。采用本申请实施例的技术方案,避免了通信时数据拷贝产生的性能开销,从而提升GIS信息渲染速度,改善了Cesium原生接口渲染时间过长的问题。

    技术研发人员:王晓春,陈俊
    受保护的技术使用者:中移(上海)信息通信科技有限公司
    技术研发日:
    技术公布日:2024/10/24
    转载请注明原文地址:https://symbian.8miu.com/read-44534.html

    最新回复(0)