百度地图路书实现历史轨迹回放、轨迹回放进度、聚合点、自定义弹框和实时监控视频、多路视频轮巡播放

ops/2024/9/24 12:28:41/

前言

分享一个刚做完项目集成技术,一个车辆行驶轨迹监控、行车视频监控、对特种车辆安全监管平台,今年政府单位有很多监管平台项目,例如:渣土车监控、租出车监管、危害气体运输车监管等平台,这些平台都有车辆行驶轨迹坐标记录,监管平台需要对车辆轨迹进行展示(轨迹回放-用到地图路书API-如图2),车辆在地图上的坐标(很多车量,需要用到地图的聚合点-可以根据地图放大展开点,缩小时会合并显示数量-如图1),还有车辆监控视频实时播放(多路视频同时播放-如图3),可以对天的录像回放(一天视频时间轴线-可点击查看某时刻视频-如图4),多路显示多路监控视频(为了同时播放多路视频,需要做个可自定义播放视频窗口如图5)。

 

使用技术栈

前端用vue3+ts,vite3构建,UI用字节跳动出品的Arco Design这个框架比较经量设计比较大方,地图使用百度地图,视频流用flv.js播放。

后端用Go开发,由于监控需要实时向平台上传数据,车量多时需要平台性能还是高的,所以我们需要并发性能优秀开发语言,而且我们存储数据比较大,需要硬件使用率高的语言,而且项目也需开发快速,领导要的急所以选择的语言具备开发效率高,是官方使用安全性要求也高;综合对比还是Go比较适合,而且也是Go我们熟悉的语言;最终Go被确认为后台开发语言。

数据库使用Mysql,这个数据库调优后还是满足项目要求的。

使用教程:

  1. 下载百度地图路书和信息标志js文件、使用图片图标等静态资源包(在代码仓有),下载后解压复制到前端的public目录下。
  2. 在前端index.html的<head>引入百度相关js
<!--百度api-->
<script src="//api.map.baidu.com/api?v=3.0&ak=你的百度秘钥" id="baiduAPI"></script>
<script type="text/javascript" src="/imgjs/TrafficControl_min.js"></script>
<script type="text/javascript" src="/imgjs/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="/imgjs/MarkerClusterer_min.js"></script>
<script src="/imgjs/IndoBox_min.js"></script>
<script src="/imgjs/LuShu_min.js"></script>
<!--百度api end-->

  3.引入flv.js(j监控视频流播放器)和vue-fullscreen(全屏)

 使用包管理工具引入

yarn add flv.js
yarn add vue-fullscreen

代码下地址:

传送代码下载地址


http://www.ppmy.cn/ops/97498.html

相关文章

UPDATE 语句在存储过程中卡死

1、事务未提交导致的锁等待 SELECT l.session_id, l.locked_mode, l.object_id, o.object_nameFROM v$locked_object l JOIN all_objects o ON l.object_id o.object_id; 2、索引问题 SELECT index_name, column_nameFROM user_ind_columnsWHERE table_name table;

<数据集>红绿灯识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;7884张 标注数量(xml文件个数)&#xff1a;7884 标注数量(txt文件个数)&#xff1a;7884 标注类别数&#xff1a;3 标注类别名称&#xff1a;[light_green, light_red, light_yellow] 序号类别名称图片数框数1lig…

Android笔试面试题AI答之Kotlin(20)

文章目录 98. 简述什么是Elvis操作符 &#xff1f;基本概念语法使用场景示例注意事项 99. Kotlin构造函数类型&#xff1f; 如何在类中定义&#xff1f;主构造函数次构造函数 100. 简述Kotlin类的init代码块&#xff1f;特点示例注意事项 101. 函数中Unit-return的目的是什么&a…

Nuxt3【实用教程】2024最新版

中文官网 https://www.nuxt.com.cn/docs/getting-started/installation Nuxt 的优势 上手即可编写.vue文件根据 pages 目录自动生成路由自动代码拆分&#xff0c;减少应用程序的初始加载时间。内置服务器端渲染能力&#xff08;默认启用&#xff09;&#xff0c;无需自己设置…

提问!猫咪浮毛问题怎么解决?宠物空气净化器真的有用吗?

工作后&#xff0c;我就过上了一人带“两娃“的生活。这么多年来都是猫咪在陪伴着我&#xff0c;一起创造了很多温暖的回忆。但是当家长也非常不容易&#xff0c;特别是遇上换毛季&#xff0c;两只猫咪尽情展示它们富有的毛发量&#xff0c;散落在家里的每个角落。每天清理的速…

python之numpy(3 矩阵属性及矩阵运算)

属性 在numpy中可以显示矩阵的很多属性&#xff0c;如矩阵大小、元素个数、数据类型等。 import numpy as np xnp.array([[1,2,3,4],[1,2,3,4] ]) print(f这个矩阵的规格为{x.shape}) print(f这个矩阵有{x.size}个元素) print(f这个矩阵的维度为{x.ndim}) print(f这个矩阵的数…

数据库系统 第20节 云数据库 案例分析

弹性扩展&#xff1a; 假设一个电子商务网站在黑色星期五期间流量激增。使用云数据库&#xff0c;该网站可以自动扩展数据库实例以处理增加的查询负载&#xff0c;而无需事先手动配置额外的硬件资源。 自动化备份&#xff1a; 一个在线教育平台使用云数据库服务&#xff0c;每…

【EasyExcel】导出excel-设置动态表头并导出数据

需求背景&#xff1a; 导出excel的设置某些表头动态导出(可以根据筛选条件或一些属性的数据量)&#xff0c;方便导出后用户查看想看的信息。 一、技术选型&#xff1a; easyExcel的原生数据处理 二、方案设计&#xff1a; 根据EasyExcel支持的表头List<List<String>…