CN113190299B - 基于vue在地图上展示自定义图层的方法和设备 - Google Patents

Abstract

本申请公开了一种基于VUE在地图上展示自定义图层的方法和设备，包括：进行地图初始化时，设置需要加载的所有对象的基本信息；需要展示对象卡片时，向web发送获取对象卡片实例的请求；web动态创建VUE实例，并将对象卡片实例返回地图图层；其中，所述对象卡片实例为dom节点；地图图层根据web返回的dom节点进行绘制，展示对应的对象卡片，将dom挂载到地图上。应用本申请公开的技术方案，能够节省内存资源。

Description

基于VUE在地图上展示自定义图层的方法和设备

技术领域

本申请涉及计算机应用技术领域，特别涉及一种基于VUE在地图上展示自定义图层的方法和设备。

背景技术

在地图应用程序(APP)上可以展示各种对象(人、车、摄像头等)，不同的对象在地图上展示不同的样式，并且对象存在如下各种状态：

1、不同的地图缩放级别，对象需要展示不同的对象卡片(样式)；

2、对象在不同的业务下存在不同的状态，并需要展示不同的对象卡片(样式)；

3、不同的用户操作下(鼠标单击、双击、拖动等)，对象需要展示不同的对象卡片(样式)。

目前，大部分的自定义图层实现都是在图层初始化时将所有的对象卡片全部加载到图层上，当需要对对象卡片上的数据进行更新时，需要调用地图接口来实现更新。

根据现有技术，对象以图片的形式在地图上展示，这种方式存在以下问题：

1、难以做到展示样式的丰富性；

2、只能提供一个图片点击事件，不能提供更多用户交互事件，交互性较差；

3、更新对象属性数据时需要通过地图接口进行更新，这将导致地图数据的重新计算，性能低下；

4、基于第三方地图进行开发时，业务开发不能做到界面自定义，研发和维护成本高。

发明内容

本申请提供了一种基于VUE在地图上展示自定义图层的方法，以节省内存资源。

本申请公开了一种基于可视用户环境VUE在地图上展示自定义图层的方法，包括：

进行地图初始化时，设置需要加载的所有对象的基本信息；

需要展示对象卡片时，向web发送获取对象卡片实例的请求；

web动态创建VUE实例，并将对象卡片实例返回地图图层；其中，所述对象卡片实例为dom节点；

地图图层根据web返回的dom节点进行绘制，展示对应的对象卡片，将dom挂载到地图上。

较佳的，该方法还包括：

将不同的对象卡片抽象为不同的VUE组件，不同的VUE组件分别实现各自的业务功能。

较佳的，将对象卡片共有的功能抽象到一个父对象卡片中，所有的对象卡片在动态创建时都继承自所述父对象卡片。

较佳的，该方法还包括：

通过定时器定时清理不在地图上绘制的对象卡片。

较佳的，所述通过定时器定时清理不在地图上绘制的对象卡片具体包括：

在创建对象卡片的VUE实例时，为所有的对象卡片分别分配唯一标识，并将对象卡片的VUE实例保存到内存中；

设置一定时器，在定时器到时时，遍历内存中的所保存的VUE实例，对地图中没有找到的对象卡片的VUE实例进行标记；

在定时器下一次到时，再次遍历内存中的VUE实例时，如果已被标记的对象卡片仍然没有在地图中，则将所述对象卡片的VUE实例从内存中清除。

本申请还提供了一种基于VUE在地图上展示自定义图层的设备，该设备包括：处理器和通信模块，其中：

所述处理器，用于在进行地图初始化时，设置需要加载的所有对象的基本信息，在需要展示对象卡片时，通过所述通信模块，向web发送获取对象卡片实例的请求，并通过所述通信模块接收web动态创建VUE实例后返回的对象卡片实例；其中，所述对象卡片实例为dom节点；

所述处理器还用于根据web返回的dom节点进行绘制，展示对应的对象卡片，将dom挂载到地图上。

较佳的，所述处理器还用于：

将不同的对象卡片抽象为不同的VUE组件，不同的VUE组件分别实现各自的业务功能。

较佳的，所述处理器具体用于：

将对象卡片共有的功能抽象到一个父对象卡片中，所有的对象卡片在动态创建时都继承自所述父对象卡片。

较佳的，所述处理器还用于：通过定时器定时清理不在地图上绘制的对象卡片。

较佳的，所述处理器具体用于：

在创建对象卡片的VUE实例时，为所有的对象卡片分别分配唯一标识，并将对象卡片的VUE实例保存到内存中；

设置一定时器，在定时器到时时，遍历内存中的所保存的VUE实例，对地图中没有找到的对象卡片的VUE实例进行标记；

在定时器下一次到时，再次遍历内存中的VUE实例时，如果已被标记的对象卡片仍然没有在地图中，则将所述对象卡片的VUE实例从内存中清除。

由上述技术方案可见，本申请提供的基于VUE在地图上展示自定义图层的技术方案，通过在进行地图初始化时，设置需要加载的所有对象的基本信息，并通过web动态创建VUE实例，然后将对象卡片的实例(dom节点)返回地图图层，由地图图层进行绘制，将要显示的对象卡片挂载到地图上，从而，地图里只需保存界面上需要展示的节点而不是所有的节点，从而节约了内存资源。

在上述方案的基础上，本申请通过将对象卡片共有的功能抽象到一个父对象卡片中统一处理，使得所有的对象卡片在动态创建时都可以继承自该父对象卡片，便于管理。

此外，本申请通过设置定时器来定时清理不在地图上绘制的对象卡片的VUE实例所占用的内存，使得地图上已释放的对象卡片的VUE实例所占用的内存能够被及时释放，从而解决了地图在释放对象卡片时不通知业务，而导致的业务无法获知应当何时释放内存中的VUE实例的技术问题。

附图说明

图1为本申请基于VUE在地图上展示自定义图层的方法示意图；

图2为存在若干对象卡片的全景地图；

图3为图2所示全景地图中的某一对象卡片被点击后所展示的对象卡片以及汇聚卡片示意图；

图4为图3所示汇聚卡片被点击后所展示的对象卡片示意图；

图5为本申请基于VUE在地图上展示自定义图层的设备的组成结构示意图。

具体实施方式

为使本申请的目的、技术方案及优点更加清楚明白，以下参照附图并举实施例，对本申请作进一步详细说明。

为解决现有技术所存在的问题，本发明从以下几个方面着手进行了改进：

1、当将所有要展示的对象、所有对象的不同状态、所有对象要展示的对象卡片节点都放到地图中时，对象越多要展示的对象卡片就越多，内存消耗就越大，这样很容易导致客户端软件内存不够，需要解决该问题。

2、对所有对象卡片的相同事件(焦点态、鼠标单击、双击、拖动等)的抽象和封装。

3、对象卡片事件和地图事件冲突管理。

4、地图上对象卡片的管理，包括对象卡片实例的动态创建和销毁。

本申请提供了一种基于VUE(Visible User Environment：可视用户环境)在地图上展示自定义图层的方法，该方法如图1所示，包括以下步骤：

步骤1：当从web收到创建地图图层(CreateLayer)的命令时，进行地图初始化，设置需要加载的所有对象的基本信息。

步骤2：需要展示对象卡片时，向web发送获取对象卡片实例的请求。

步骤3：web动态创建VUE实例，并将对象卡片实例(dom节点)返回地图图层。

步骤4：地图图层根据web返回的dom节点进行绘制，展示对应的对象卡片，将dom挂载到地图上。

这样，地图中需要保存的对象卡片(dom节点)仅为界面上展示的节点，而不需要保存所有的节点，从而节约了内存资源。

此外，本申请将不同的对象卡片抽象为不同的VUE组件，不同的VUE组件分别实现各自的业务功能，通过VUE动态生成技术创建VUE组件实例，并获取组件实例的dom节点返回给地图进行绘制。由于所有对象卡片具有一些相同的用户事件，比如对象卡片的焦点态、鼠标单击、鼠标双击等，且存在对象卡片拖动和地图拖动冲突等，因此，将这些共有功能抽象到一个父对象卡片中统一处理，所有的对象卡片在动态创建的时候都可以继承自该父对象卡片。

一个VUE组件示例如下所示：

以上代码首先定义了一个VUE组件，然后创建了一个该VUE组件的实例。

由于地图在释放对象卡片时所做的操作只是：绘制地图显示区域的对象卡片，并释放不显示的对象卡片，而不会通知业务，因此，业务无法获知何时应当释放内存中的VUE实例，为解决该技术问题，本申请提出如下解决方案：通过定时器来定时清理不在地图上绘制的对象卡片。具体而言：

在创建对象卡片的VUE实例时，为所有的对象卡片分别分配唯一标识，并将对象卡片的VUE实例保存到内存中；

设置一定时器，在定时器到时时，遍历内存中的所保存的VUE实例，对地图中没有找到的对象卡片的VUE实例进行标记；

在定时器下一次到时，再次遍历内存中的VUE实例时，如果已被标记的对象卡片仍然没有在地图中，则将此对象卡片的VUE实例从内存中清除。

本申请的应用示例图如图2至图4所示。其中：

图2为存在若干对象卡片的全景地图。

图3为图2所示全景地图中的某一对象卡片被点击后所展示的对象卡片以及汇聚卡片示意图。

图4为图3所示汇聚卡片被点击后所展示的对象卡片示意图。

对应于上述方法，本申请还公开了一种基于VUE在地图上展示自定义图层的设备，其组成结构如图5所示，该设备包括：处理器和通信模块，其中：

所述处理器，用于在进行地图初始化时，设置需要加载的所有对象的基本信息，在需要展示对象卡片时，通过所述通信模块，向web发送获取对象卡片实例的请求，并通过所述通信模块接收web动态创建VUE实例后返回的对象卡片实例；其中，所述对象卡片实例为dom节点；

所述处理器还用于根据web返回的dom节点进行绘制，展示对应的对象卡片，将dom挂载到地图上。

较佳的，所述处理器还用于：

将不同的对象卡片抽象为不同的VUE组件，不同的VUE组件分别实现各自的业务功能。

较佳的，所述处理器具体用于：

将对象卡片共有的功能抽象到一个父对象卡片中，所有的对象卡片在动态创建时都继承自所述父对象卡片。

较佳的，所述处理器还用于：

通过定时器定时清理不在地图上绘制的对象卡片。

较佳的，所述处理器具体用于：

在创建对象卡片的VUE实例时，为所有的对象卡片分别分配唯一标识，并将对象卡片的VUE实例保存到内存中；

设置一定时器，在定时器到时时，遍历内存中的所保存的VUE实例，对地图中没有找到的对象卡片的VUE实例进行标记；

在定时器下一次到时，再次遍历内存中的VUE实例时，如果已被标记的对象卡片仍然没有在地图中，则将所述对象卡片的VUE实例从内存中清除。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (6)

1.一种基于可视用户环境VUE在地图上展示自定义图层的方法，其特征在于，包括：

进行地图初始化时，设置需要加载的所有对象的基本信息；

需要展示对象卡片时，向web发送获取对象卡片实例的请求；

web动态创建VUE实例，并将对象卡片实例返回地图图层；其中，所述对象卡片实例为dom节点；

地图图层根据web返回的dom节点进行绘制，展示对应的对象卡片，将dom挂载到地图上；

通过定时器定时清理不在地图上绘制的对象卡片，具体包括：

在创建对象卡片的VUE实例时，为所有的对象卡片分别分配唯一标识，并将对象卡片的VUE实例保存到内存中；

设置一定时器，在定时器到时时，遍历内存中的所保存的VUE实例，对地图中没有找到的对象卡片的VUE实例进行标记；

在定时器下一次到时，再次遍历内存中的VUE实例时，如果已被标记的对象卡片仍然没有在地图中，则将所述对象卡片的VUE实例从内存中清除。

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

将不同的对象卡片抽象为不同的VUE组件，不同的VUE组件分别实现各自的业务功能。

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

将对象卡片共有的功能抽象到一个父对象卡片中，所有的对象卡片在动态创建时都继承自所述父对象卡片。

4.一种基于VUE在地图上展示自定义图层的设备，其特征在于，该设备包括：处理器和通信模块，其中：

所述处理器，用于在进行地图初始化时，设置需要加载的所有对象的基本信息，在需要展示对象卡片时，通过所述通信模块，向web发送获取对象卡片实例的请求，并通过所述通信模块接收web动态创建VUE实例后返回的对象卡片实例；其中，所述对象卡片实例为dom节点；

所述处理器还用于根据web返回的dom节点进行绘制，展示对应的对象卡片，将dom挂载到地图上；

所述处理器还用于：通过定时器定时清理不在地图上绘制的对象卡片，具体包括：

在创建对象卡片的VUE实例时，为所有的对象卡片分别分配唯一标识，并将对象卡片的VUE实例保存到内存中；

设置一定时器，在定时器到时时，遍历内存中的所保存的VUE实例，对地图中没有找到的对象卡片的VUE实例进行标记；

在定时器下一次到时，再次遍历内存中的VUE实例时，如果已被标记的对象卡片仍然没有在地图中，则将所述对象卡片的VUE实例从内存中清除。

5.根据权利要求4所述的设备，其特征在于，所述处理器还用于：

将不同的对象卡片抽象为不同的VUE组件，不同的VUE组件分别实现各自的业务功能。

6.根据权利要求5所述的设备，其特征在于，所述处理器具体用于：

将对象卡片共有的功能抽象到一个父对象卡片中，所有的对象卡片在动态创建时都继承自所述父对象卡片。

Images