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

news/2024/9/23 23:18:11/

前言

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

相关文章

微服务及安全

一、微服务的原理 1.什么是微服务架构 微服务架构区别于传统的单体软件架构,是一种为了适应当前互联网后台服务的「三高需求:高并发、高性能、高可用」而产生的的软件架构。 单体式应用程序 与微服务相对的另一个概念是传统的单体式应用程序( Monolithic application ),…

spring boot kotlin 支付宝支付

前边哪些注册的支付宝账号的略过。 这个首先是在什么账号证书都申请完了之后。那就开始吧&#xff01; 第一步 添加支付宝依赖 <dependency><groupId>com.alipay.sdk</groupId><artifactId>alipay-sdk-java</artifactId><version>4.34…

基础概念与简单数据结构的学习笔记

基础概念与简单数据结构 目标: 掌握数据结构的基本概念和简单的数据结构。 学习内容: 什么是数据结构&#xff1a;定义和分类&#xff08;线性、非线性&#xff09;。算法复杂度分析&#xff1a;时间复杂度和空间复杂度的基础知识&#xff08;O(n)、O(1)、O(log n)等&#xff…

《第二十七章 性能优化 - 内存优化》

一、引言 在 Android 应用开发中&#xff0c;性能优化是至关重要的一环。良好的性能不仅能提升用户体验&#xff0c;还能减少应用崩溃的概率。其中&#xff0c;内存优化是性能优化的关键部分。在本章中&#xff0c;我们将重点探讨如何避免内存泄漏以及进行图片内存优化。 二、避…

原生JS实现鼠标下滑模块自定位

源码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Smooth Scroll to Next Section&l…

区块链基础通识(1)——分布式系统的共识问题

分布式系统 我们最初了解区块链的时候&#xff0c;很多人会形容这个区块链是一个“分布式的不可篡改账本”&#xff0c;这是一个很形象的说法&#xff0c;但是我认为更为准确的形容是“所有节点共同维护的状态机”。为什么分布式和区块链不能划等号呢&#xff1f; 两种常见的…

2000-2023年上市公司财务困境RLPM模型数据(含原始数据+计算结果)

2000-2023年上市公司财务困境RLPM模型数据&#xff08;含原始数据计算结果&#xff09; 1、时间&#xff1a;2000-2023年 2、来源&#xff1a;上市公司年报 3、指标&#xff1a;证券代码、证券简称、统计截止日期、是否剔除ST或*ST或PT股、是否剔除上市不满一年、已经退市或…

Python酷库之旅-第三方库Pandas(097)

目录 一、用法精讲 416、pandas.DataFrame.memory_usage方法 416-1、语法 416-2、参数 416-3、功能 416-4、返回值 416-5、说明 416-6、用法 416-6-1、数据准备 416-6-2、代码示例 416-6-3、结果输出 417、pandas.DataFrame.empty属性 417-1、语法 417-2、参数 …