基于Leaflet的海量动态数据加载方法和装置

本申请涉及海量动态数据加载，特别是涉及一种基于leaflet的海量动态数据加载方法和装置。

背景技术：

1、随着态势数据量的增加，对环境数据和场景数据的呈现与分析提出了更迫切的需求，引出了数据可视化的快速构建工具。目前渲染策略通常包括使用适当的可视化图表，如瀑布图、热力图、平行坐标图等，将多维数据以直观的方式呈现。根据数据属性进行颜色渲染，如热力图、颜色填充。也可以将数据进行处理发布成地图服务或专题图。通过专题可以方便快速地将数据转换成视觉敏感的图表在屏幕渲染，也可以进一步构建可视化大屏为用户提供决策分析。

2、现有的渲染方式没法实时获取数据并在地图进行实时渲染，同时数据量大小也会影响渲染效率。在大数据时代，基于浏览器端的可视化大屏需要负载的数据总量可能达到几十万条，这对于系统各方面的性能实现提出了极大的挑战。

技术实现思路

1、基于此，有必要针对上述技术问题，提供一种基于leaflet的海量动态数据加载方法和装置。

2、一种基于leaflet的海量动态数据加载方法，方法包括：

3、获取海量动态数据；海量动态数据为多源态势数据。

4、将多源态势数据解析为leaflet组件可识别的数据格式。

5、根据解析后的多源态势数据，采用二维数组+mapv的方式创建多个canvas图层。

6、根据canvas图层，采用leaflet地图引擎进行渲染，实现多图层目标显示。

7、在其中一个实施例中，将多源态势数据解析为leaflet组件可识别的数据格式，包括：

8、将多源态势数据采用javascript方法解析为leaflet组件可识别的数据格式。

9、在其中一个实施例中，根据解析后的多源态势数据，采用二维数组+mapv的方式创建多个canvas图层，包括：

10、启动client客户端，初始化socket，建立与服务端的通信。

11、初始化streamlayer组件,组件通过mapv api创建多个canvas图层。

12、接收socket传输的数据，通过事件总线传输给streamlayer组件。

13、组件执行initlayer方法，遍历数据，创建一个二维数组存放每一条数据；数组的行数与canvas图层的数量相同，数组的每列表示一条数据。

14、遍历二维数组，将每一行的数据放入canvas图层中。

15、在其中一个实施例中，方法还包括：

16、接收socket传输更新数据，通过eventbus传输给streamlayer组件。

17、组件执行updatelayerdata方法对更新数据进行遍历，对每条数据在二维数组里进行二次遍历，更新对应的信息，并记录下有数据属性更新的canvas图层。

18、遍历二维数组，筛选出有数据更新的canvas图层，执行updatedata方法，通过解析数据中的经度、纬度、图标信息，重新渲染地理信息点，刷新整个图层。

19、在其中一个实施例中，根据canvas图层，采用leaflet地图引擎进行渲染，实现多图层目标显示，包括：

20、更新canvas图层，执行updatedata方法，根据数据中的经度、纬度、图标，并设置层级缩放、透明度、图标宽度以及图标高度，将数据以地理信息点渲染到地图中。

21、一种基于leaflet的海量动态数据加载装置，装置包括：

22、数据获取模块，用于获取海量动态数据；海量动态数据为多源态势数据。

23、数据解析模块，用于将多源态势数据解析为leaflet组件可识别的数据格式。

24、canvas图层创建模块，用于根据解析后的多源态势数据，采用二维数组+mapv的方式创建多个canvas图层。

25、渲染模块，用于根据canvas图层，采用leaflet地图引擎进行渲染，实现多图层目标显示。

26、在其中一个实施例中，数据解析模块，还用于将多源态势数据采用javascript方法解析为leaflet组件可识别的数据格式。

27、在其中一个实施例中，canvas图层创建模块，还用于启动client客户端，初始化socket，建立与服务端的通信；初始化streamlayer组件,组件通过mapv api创建多个canvas图层；接收socket传输的数据，通过事件总线传输给streamlayer组件；组件执行initlayer方法，遍历数据，创建一个二维数组存放每一条数据；数组的行数与canvas图层的数量相同，数组的每列表示一条数据；遍历二维数组，将每一行的数据放入canvas图层中。

28、在其中一个实施例中，装置还包括：更新模块，用于接收socket传输更新数据，通过eventbus传输给streamlayer组件；组件执行updatelayerdata方法对更新数据进行遍历，对每条数据在二维数组里进行二次遍历，更新对应的信息，并记录下有数据属性更新的canvas图层；遍历二维数组，筛选出有数据更新的canvas图层，执行updatedata方法，通过解析数据中的经度、纬度、图标信息，重新渲染地理信息点，刷新整个图层。

29、在其中提个实施例中，渲染模块，还用于更新canvas图层，执行updatedata方法，根据数据中的经度、纬度、图标，并设置层级缩放、透明度、图标宽度以及图标高度，将数据以地理信息点渲染到地图中。

30、上述基于leaflet的海量动态数据加载方法和装置，所述方法包括：获取海量动态数据；海量动态数据为多源态势数据；将多源态势数据解析为leaflet组件可识别的数据格式；根据解析后的多源态势数据，采用二维数组+mapv的方式创建多个canvas图层；根据canvas图层，采用leaflet地图引擎进行渲染，实现多图层目标显示。本方法通过创建多个canvas图层而不是生成svg图标，避开了对dom操作，由于canvas可以被硬件加速，直接进行像素级渲染，减轻了客户端的渲染压力，降低了图层响应时间。

技术特征：

1.一种基于leaflet的海量动态数据加载方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，将所述多源态势数据解析为leaflet组件可识别的数据格式，包括：

3.根据权利要求1所述的方法，其特征在于，根据解析后的多源态势数据，采用二维数组+mapv的方式创建多个canvas图层，包括：

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

5.根据权利要求1所述的方法，其特征在于，根据所述canvas图层，采用leaflet地图引擎进行渲染，实现多图层目标显示，包括：

6.一种基于leaflet的海量动态数据加载装置，其特征在于，所述装置包括：

7.根据权利要求6所述的装置，其特征在于，所述数据解析模块，还用于将所述多源态势数据采用javascript方法解析为leaflet组件可识别的数据格式。

8.根据权利要求6所述的装置，其特征在于，所述canvas图层创建模块，还用于启动client客户端，初始化socket，建立与服务端的通信；初始化streamlayer组件,组件通过mapv api创建多个canvas图层；接收socket传输的数据，通过事件总线传输给streamlayer组件；组件执行initlayer方法，遍历数据，创建一个二维数组存放每一条数据；所述数组的行数与所述canvas图层的数量相同，所述数组的每列表示一条数据；遍历所述二维数组，将每一行的数据放入canvas图层中。

9.根据权利要8所述的装置，其特征在于，所述装置还包括：更新模块，用于接收socket传输更新数据，通过eventbus传输给streamlayer组件；组件执行updatelayerdata方法对所述更新数据进行遍历，对每条数据在所述二维数组里进行二次遍历，更新对应的信息，并记录下有数据属性更新的canvas图层；遍历所述二维数组，筛选出有数据更新的canvas图层，执行updatedata方法，通过解析数据中的经度、纬度、图标信息，重新渲染地理信息点，刷新整个图层。

10.根据权利要求6所述的装置，其特征在于，所述渲染模块，还用于更新所述canvas图层，执行updatedata方法，根据数据中的经度、纬度、图标，并设置层级缩放、透明度、图标宽度以及图标高度，将数据以地理信息点渲染到地图中。

技术总结本申请涉及一种基于Leaflet的海量动态数据加载方法和装置。所述方法包括：获取海量动态数据；海量动态数据为多源态势数据；将多源态势数据解析为Leaflet组件可识别的数据格式；根据解析后的多源态势数据，采用二维数组+MapV的方式创建多个canvas图层；根据canvas图层，采用Leaflet地图引擎进行渲染，实现多图层目标显示。本方法通过创建多个canvas图层而不是生成svg图标，避开了对DOM操作，由于canvas可以被硬件加速，直接进行像素级渲染，减轻了客户端的渲染压力，降低了图层响应时间。技术研发人员：蒋杰,谢旭,鞠儒生,尹全军,杨硕,尹帮虎,刘晓阳,黄鹤松,邱思航,易贤哲受保护的技术使用者：中国人民解放军国防科技大学技术研发日：技术公布日：2024/7/29