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

news2024/11/27 10:31:03

前言

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

QT基础知识5

思维导图 client.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), socket(new QTcpSocket(this))//给客户端实例化分配空间 {ui->setupUi(this);//初始化界面ui->msgEdit-&…

微盟年中报:聚焦主业降本增效,经调整净亏损同比大幅收窄81.4%

8月21日&#xff0c;微盟集团&#xff08;2013.HK&#xff09;发布2024年中期业绩报告。在充满挑战的市场环境中&#xff0c;公司积极进行业务布局优化调整&#xff0c;战略性聚焦核心业务&#xff0c;集团总收入达8.67亿元人民币&#xff0c;整体毛利率保持平稳。报告期内&…

语言基础/单向链表的构建和使用(含Linux中SLIST的解析和使用)

文章目录 概述简单的链表描述链表的术语简单实现一个单链表 Linux之SLIST机理分析结构定义单链表初始化单链表插入元素单链表遍历元素单链表删除元素 Linux之SLIST使用实践纯C中typedef重命名带来的问题预留 概述 本文讲述了数据结构中单链表的基本概念&#xff0c;头指针、头…

监控状态流图中的测试点

此示例展示了如何将数据或状态指定为测试点&#xff0c;你可以在仿真过程中使用浮动范围绘制这些测试点或将其记录到MATLAB基本工作区。 关于状态流图中的测试点 Stateflow测试点是您可以在模拟过程中观察到的信号&#xff0c;例如&#xff0c;通过使用浮动范围块。您可以使用…

进阶SpringBoot之 SpringSecurity(1)环境搭建

Spring Security 中文文档 Spring Security 是一个 Java 框架&#xff0c;用于保护应用程序的安全性 它提供认证&#xff08;authentication&#xff09;、授权&#xff08;authorization&#xff09;和保护&#xff0c;以抵御常见的攻击 Spring Security 基于过滤器链的概念…

Linux虚拟机磁盘管理-创建新磁盘分区

1.查看新加的硬盘情况 b英文为block表示块 查看磁盘信息方法一&#xff1a;ll /dev/sd* 查看磁盘信息方法二&#xff1a;lsblk 2.创建分区 1&#xff09;创建磁盘分区 以sdb这块磁盘进行分区为例 一个磁盘最多分4个分区 输入w进行确认创建一个房间&#xff0c;这个房间就能…

Nginx: 配置项之main段核心参数用法梳理

概述 我们了解下配置文件中的一个全局段&#xff0c;有哪些配置参数&#xff0c;包括后面的 events 字段&#xff0c;有哪些配置参数这里面也有一些核心参数, 对于我们Nginx运行的性能也是有很重要的帮助我们现在首先关注整个 main 段的一个核心参数用法所谓 main 段&#xff…

前后端分离开发:用 Apifox 高效管理 API

目录 1.前后台分离开发介绍 2.API 2.1 APIfox介绍 2.2 接口文档管理 1.前后台分离开发介绍 前端开发有2种方式&#xff1a;「前后台混合开发」和「前后台分离开发」。 前后台混合开发&#xff0c;顾名思义就是前台后台代码混在一起开发&#xff0c;如下图所示&#xff1a…

5. 数据结构—栈的实际案例

1. 10进制转8进制 void conversion(int n){LinkStack S;InitStack(S);while(n){Push(S,n%8);nn/8;}while(!StackEmpty(S)){int x;Pop(S,x);printf("%d",x);} } 2. 括号匹配 bool Matching(){LinkStack S;char ch,x;InitStack(S);while(cin>>ch){if(ch#)bre…

tomcat的session会话保持

1.Memcached简介 Memcached 只支持能序列化的数据类型&#xff0c;不支持持久化&#xff0c;基于 Key-Value 的内存缓存系统。 memcached虽然没有像redis 所具备的数据持久化功能&#xff0c;比如 RDB 和 AOF 都没有&#xff0c;但是可以通过做集群同步的方式&#xff0c; 让各…

netty websocket使用

一.maven依赖 <!-- springboot的依赖&#xff0c;如果系统不使用web相关的功能&#xff0c;也可以不使用 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>…

Matlab基本知识

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” %% Matlab基本的小常识 % (1)在每一行的语句后面加上分号&#xff08;一定要是英文的) a3; a5; % (2)多行注释&#xff1a;选中要注释的若干语句&#xff0c;快捷键CtrlR % a3; %…

【Vue3】集成 Element Plus

【Vue3】集成 Element Plus 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的…

openai whisper使用

whisper使用 介绍 Whisper是一种通用的语音识别模型。它是在大量不同音频数据集上训练的&#xff0c;也是一个多任务模型&#xff0c;可以执行多语言语音识别、语音翻译和语言识别。 GitHub&#xff1a;https://github.com/openai/whisper 论文链接&#xff1a;https://arx…

AI-Talk开发板更新CH32固件

一、说明 CSK6011A有33个GPIO&#xff0c;但把WIFI、LCD、TP、CAMERA这些外设全部加上后&#xff0c;CSK6011A的IO不够用&#xff0c;还差6个&#xff0c;所以增加了一颗IO扩展MCU。CSK6-MIX开发板使用的IO扩展MCU为CH32V003F4P6&#xff0c;并且SDK也包含了此MCU的固件。AI-Ta…

机械学习—零基础学习日志(如何理解概率论3)

随机变量的函数分布 一维随机变量分布&#xff0c;可以看到下图&#xff0c;X为不同情况的概率。而x如果是大于等于X&#xff0c;那么当x在40以内时&#xff0c;没有概率&#xff0c;为0。 当x变大&#xff0c;在40-80之间&#xff0c;那么x大于X的概率为&#xff0c;0.7&…

性能测试 —— 系统架构性能优化思路!

这篇文章重点还是谈已经上线的业务系统后续出现性能问题后的问题诊断和优化重点。 系统性能问题分析流程 我们首先来分析下如果一个业务系统上线前没有性能问题&#xff0c;而在上线后出现了比较严重的性能问题&#xff0c;那么实际上潜在的场景主要来自于以下几个方面。 业务出…

回归预测 | Matlab实现BES-ESN秃鹰搜索算法优化回声状态网络多输入单输出回归预测

回归预测 | Matlab实现BES-ESN秃鹰搜索算法优化回声状态网络多输入单输出回归预测 目录 回归预测 | Matlab实现BES-ESN秃鹰搜索算法优化回声状态网络多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现BES-ESN秃鹰搜索算法优化回声状态网络…

宿舍管理系统_o4dvi

TOC springboot574宿舍管理系统_o4dvi--论文 第一章 概述 1.1 研究背景 近些年&#xff0c;随着中国经济发展&#xff0c;人民的生活质量逐渐提高&#xff0c;对网络的依赖性越来越高&#xff0c;通过网络处理的事务越来越多。随着宿舍管理的常态化&#xff0c;如果依然采用…

JVM 运行时内存结构简介

JVM 运行时内存结构简介 一、前言二、JVM 运行时内存结构2.1 线程隔离数据区&#xff1a;2.2 线程共享数据区&#xff1a; 三、JVM 内存区域划分1. 程序计数器&#xff08;PC&#xff09;2. 虚拟机栈3. 本地方法栈4. Java 堆5. 方法区6. 运行时常量池 附录 一、前言 JVM&#…