一种基于VUE实现三维地图的方法、系统及相关设备技术方案

技术编号:32664903 阅读:28 留言:0更新日期:2022-03-17 11:16
本发明专利技术适用于图像分析领域,提供了一种园区管理方法、系统及相关设备,所述方法包括获取需要访问的三维地图模型,所述三维地图模型包含多种面向用户的显示模式;生成用于配置所述三维地图模型的页面文件、用于接收外部操作信息的基于VUE的实例组件、用于在所述页面文件与所述实例组件之间传递信息的iframe框架;通过所述iframe框架监听来自所述实例组件的标识信息,并将所述标识信息发送给所述页面文件;使用所述iframe框架监听来自所述页面文件回调的事件信息,并将所述事件信息发送给所述实例组件,以得到三维地图。本发明专利技术通过iframe以及数据标识实现了外部操作与地图系统功能的对接,避免了地图系统资源被过度消耗。避免了地图系统资源被过度消耗。避免了地图系统资源被过度消耗。

【技术实现步骤摘要】
一种基于VUE实现三维地图的方法、系统及相关设备


[0001]本专利技术属于数据交互处理领域,尤其涉及一种基于VUE实现三维地图的方法、系统及相关设备。

技术介绍

[0002]目前的城市社区的智慧安防建设逐渐完善,并且在安防建设的过程中,为了实现更好的安防监控以及信息采集,往往在同一个区域内会安装多个方向的监控设备,并通过一个统一的安防系统对这些监控设备进行管理,而在安防系统的开发中,为了方便用户操作、提高用户体验感,常用的方式是使用地图工具来展示监控设备的位置。传统的二维地图受限于其形态和使用场景,只能通过经纬度等平面上的信息来确认监控设备的位置。
[0003]在一些方案中,安防系统会接入外部的第三方地图,这虽然减少了安防系统的开发难度,但第三方地图的API具有局限性,会影响到整个安防系统事件与地图工具的联动,例如,一些使用可视用户环境(Visual User Environment,VUE)框架开发的安防系统是以切换路由的形式加载用于显示给用户的页面,当有多个页面需要展示地图时,会导致一个页面所在的主进程中产生多个地图模型的运程,继本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于VUE实现三维地图的方法,其特征在于,所述方法包括如下步骤:获取需要访问的三维地图模型,所述三维地图模型包含多种显示模式;生成用于配置所述三维地图模型的页面文件、用于接收外部操作信息的基于VUE的实例组件、用于在所述页面文件与所述实例组件之间传递信息的iframe框架;通过所述iframe框架监听来自所述实例组件的标识信息,并将所述标识信息发送给所述页面文件;使用所述iframe框架监听来自所述页面文件回调的事件信息,并将所述事件信息发送给所述实例组件,通过所述iframe框架统合所述页面文件和所述实例组件得到所述三维地图。2.如权利要求1所述的基于VUE实现三维地图的方法,其特征在于,所述生成用于配置所述三维地图模型的页面文件、用于接收外部操作信息的基于VUE的实例组件、用于在所述页面文件与所述实例组件之间传递信息的iframe框架的步骤,具体为:将所述页面文件配置为所述三维地图模型的容器,并通过所述页面文件为所述三维地图模型回调的所述显示模式定义对应的所述事件信息;为所述实例组件采用iframe标签,将所述iframe标签的路径属性设置为所述页面文件的路径,并将所述实例组件初始化;定义所述iframe框架的监听事件和回调事件,使所述监听事件能够监听来自所述实例组件传来的所述标识信息,使所述回调事件能够接收来自所述页面文件传来的所述事件信息。3.如权利要求2所述的基于VUE实现三维地图的方法,其特征在于,所述实例组件接收到外部操作信息后,根据所述外部操作信息生成对应的所述标识信息,并将所述标识信息传给所述iframe框架,其中,所述标识信息带有对应所述外部操作信息的操作标识值。4.如权利要求3所述的基于VUE实现三维地图的方法,其特征在于,所述页面文件配置为所述三维地图模型的容器后,当所述三维地图模型改变所述显示模式并向外发送模式切换数据时,所述页面文件将所述模式切换数据转换为所述事件信息并传给所述iframe框架,其中,所述事件信息带有对应所述显示模式的模式标识值。5.如权利要求4所述的基于VUE实现三维地图的方法,其特征在于,通过所述iframe框架监听来自所述实例组件的标识信息,并将所述标识信息发送给所述页面文件的步骤,具体为:所述iframe框架通过所述监听事件接收来自所述实例组件的所述标识信息,并根据所述标识信息的所述操作标识值,通过预设的发送函数向所述页面文件发送切换模式命令。6...

【专利技术属性】
技术研发人员:谭咏琪缪迪闫潇宁
申请(专利权)人:深圳市安软慧视科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1