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

server/2024/9/24 4:10:05/

前言

分享一个刚做完项目集成技术,一个车辆行驶轨迹监控、行车视频监控、对特种车辆安全监管平台,今年政府单位有很多监管平台项目,例如:渣土车监控、租出车监管、危害气体运输车监管等平台,这些平台都有车辆行驶轨迹坐标记录,监管平台需要对车辆轨迹进行展示(轨迹回放-用到地图路书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/server/105788.html

相关文章

python小游戏——躲避球(可当课设)

游戏简介&#xff1a; 没有美术&#xff0c;画面简洁&#xff08;懒得做&#xff09;。玩家控制小球躲避敌人&#xff08;上下左右&#xff0c;闪避&#xff09;&#xff0c;敌人体积越大速度越慢&#xff0c;随机生成道具球&#xff08;目前只有生命球&#xff09;&#xff0…

【单片机】LCD1602和OLED里,如何实现滚动显示特效?

如何在OLED显示16个字符的同时实现滚动特效 1. 基本思路 滚动特效的核心思路是在一个固定长度的显示区域内,通过不断改变显示内容的起始位置,模拟出内容在屏幕上滚动的效果。我们可以使用一个定时器来周期性地更新显示内容,从而实现动态滚动。 2. 代码分析 以下是实现滚…

GRL CVPR2023图像修复 使用笔记

目录 github地址&#xff1a; 训练自己的数据教程&#xff1a; 网络学习&#xff1a; 损失函数&#xff1a; github地址&#xff1a; GitHub - ofsoundof/GRL-Image-Restoration 预训练模型&#xff0c;在release里面 如何使用代码&#xff1a; conda create -n Lightn…

前端宝典十:webpack性能优化最佳实践

Webpack 内置了很多功能。 通常你可用如下经验去判断如何配置 Webpack&#xff1a; 想让源文件加入到构建流程中去被 Webpack 控制&#xff0c;配置 entry&#xff1b;想自定义输出文件的位置和名称&#xff0c;配置 output&#xff1b;想自定义寻找依赖模块时的策略&#xff…

Milvus 安装、设置权限和使用

中文文档 使用了docker compose 安装 standalone 版本&#xff0c;即单机docker。 pymilvus 一直在升级&#xff0c;一些函数有变化&#xff0c;中文文档有落后&#xff0c;建议看英文文档。 安装 #下载docker-compose.yml 文件 wget https://github.com/milvus-io/milvus/re…

GitHub每日最火火火项目(8.25)

项目名称&#xff1a;goauthentik / authentik 项目介绍&#xff1a;authentik 是一个满足认证需求的工具&#xff0c;它就像是认证过程中的强力粘合剂。在各种复杂的系统环境和对安全性有高要求的应用场景中&#xff0c;它都能发挥重要作用。通过 authentik&#xff0c;可以实…

iLogtail 开源两周年:感恩遇见,畅想未来

早在上世纪 60 年代&#xff0c;早期的计算机&#xff08;例如 ENIAC 和 IBM 的大型机&#xff09;在操作过程中会输出一些基本的状态信息和错误报告&#xff0c;这些记录通常通过打印机输出到纸带或纸卡上&#xff0c;用于跟踪操作流程和调试&#xff0c;最早期的日志系统借此…

DOM的概念及作用

一、什么是 DOM&#xff08;Document Object Model&#xff0c;文档对象模型&#xff09; DOM 可以理解为一种将 HTML、XML 和 XHTML 等文档结构化为一个由节点组成的树形结构的模型。它将网页文档表示为一个对象的集合&#xff0c;每个对象代表文档中的一个元素、属性或文本内…