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

前言

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

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

相关文章

Linux基础知识学习(五)

1. 用户组管理 每个用户都有一个用户组&#xff0c;系统可以对一个用户组中的所有用户进行集中管理&#xff08;开发、测试、运维、root&#xff09;。不同Linux 系统对用户组的规定有所不同&#xff0c;如Linux下的用户属于与它同名的用户组&#xff0c;这个用户组在创建用户…

QT聊天室基于Tcp

server.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget),server(new QTcpServer(this)) // 给服务器指针对象实例化空间{ui->setupUi(this); }Widget::~Widget() {delete ui; }…

音频采集spring_ws_webrtc (html采集麦克风转gb711并发送广播播放)完整案例

下载地址&#xff1a;http://www.gxcode.top/code 项目说明 springbootwebscoektwebrtc 项目通过前端webrtc采集麦克风声音&#xff0c;通过websocket发送后台&#xff0c;然后处理成g711-alaw字节数据发生给广播UDP并播放。 后台处理项目使用线程池(5个线程)接受webrtc数据并…

mac如何恢复被同名替换掉的文件夹 mac文件被替换如何恢复

Mac系统一直以高性能遥遥领先其他的Windows系统&#xff0c;因此&#xff0c;Mac虽然价格远远高出其他的笔记本电脑&#xff0c;但是还是受到了一众用户的青睐。使用mac时&#xff0c;我们也经常会将一个文件命名为已经有了相同文件的文件名&#xff0c;且保存到同一个目标地址…

MATLAB-PSO-BiTCN-BiLSTM-Attention多变量分类

一、数据集 数据特征&#xff1a;12个多分类&#xff1a;4分类 ​ 二、PSO-BiTCN-BiLSTM-Attention网络 PSO-BiTCN-BiLSTM-Attention 网络是一种结合了多种深度学习技术和优化算法的复杂模型&#xff0c;用于处理时序数据任务&#xff0c;如时间序列预测、分类或其他相关问题…

【Linux】——进程概念(万字解读)

一 冯诺依曼体系结构 在此之前&#xff0c;我们先要理解我们计算机的冯诺依曼体系结构&#xff0c;因为是进程的基础 我们所有的操作其实都是基于这样一个模型&#xff0c;比如你在qq上&#xff0c;和别人发送消息&#xff0c;这个消息肯定是先通过输入设备进行输入&#xf…

一个注解轻松搞定审计日志服务!

【审计日志】&#xff0c;简单的说就是系统需要记录谁&#xff0c;在什么时间&#xff0c;对什么数据&#xff0c;做了什么样的更改&#xff01;任何一个 IT 系统&#xff0c;如果要过审&#xff0c;这项任务基本上也是必审项&#xff01; 实现【审计日志】这个需求&#xff0…

整体思想以及取模

前言&#xff1a;一开始由于失误&#xff0c;误以为分数相加取模不能&#xff0c;但是其实是可以取模的 这个题目如果按照一般方法&#xff0c;到达每个节点再进行概率统计&#xff0c;但是不知道为什么只过了百分之十五的测试集 题目地址 附上没过关的代码 #include<bits…

联想闪电鲨移动硬盘文件没删除却消失了怎么办

在日常的数据存储与管理中&#xff0c;移动硬盘作为便携且容量可观的存储设备&#xff0c;深受用户青睐。然而&#xff0c;当您发现联想闪电鲨移动硬盘中的文件突然消失&#xff0c;而您确信并未进行删除操作时&#xff0c;这无疑会令人感到困惑与焦虑。本文旨在为您揭开这一谜…

vue-element-admin——<keep-alive>不符合预期缓存的原因

vue-element-admin——<keep-alive>不符合预期缓存的原因 本文章&#xff0c;以现在中后台开发用的非常多的开源项目vue-element-admin为案例。首先&#xff0c;列出官方文档与缓存<keep-alive>相关的链接&#xff08;请认真阅读&#xff0c;出现缓存<keep-ali…

在IEDA里打包Maven项目记录

之前在网上查找到的方式发现比较繁琐&#xff0c;所以把自己的解决办法记录一下分享给兄弟们 <plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-shade-plugin</artifactId><version>3.2.4</vers…

集合及数据结构第一节————初识集合框架和数据结构

系列文章目录 集合及数据结构第一节————初识集合框架和数据结构 初始集合框架和数据结构 什么是集合框架&#xff1f;集合框架的重要性背后所涉及的数据结构以及算法数据结构的基本概念和术语逻辑结构和物理结构数据类型 文章目录 系列文章目录集合及数据结构第一节——…

文件的读写(标准库函数与系统调用函数),文件描述符的复制

文件描述符 为了解决内核对象在可访问性与安全”性之间的矛盾&#xff0c;Unix系统通过所谓的文件描述符&#xff0c;将位于内核空间中的文件表项间接地提供给运行于用户空间中的程序代码。为了便于管理在系统中运行的各个进程&#xff0c;内核会维护一张存有各进程信息的列表&…

C++智能指针配合STL模板类

代码 #include <unordered_map> #include <set> #include <memory> class ResID { public:using SP std::shared_ptr<ResID>;ResID() default;ResID(const std::string& id, const std::string& type): m_id(id), m_type(type){}public:~Re…

HoloLens 坐标系统 Coordinate systems

Hololens 和 Unity 空间坐标系统-CSDN博客文章浏览阅读79次。这意味着&#xff0c;在 X、Y 或 Z 轴上相距 2 个单位的物体&#xff0c;在混合现实中的渲染效果是相距 2 米。虽然左手坐标和右手坐标是最常见的系统&#xff0c;但 3D 软件中也会使用其他坐标系。例如&#xff0c;…

Veritas NBU8.3.0.2 安装部署环境备份实施介绍(篇一)

1、本次有两台NBU服务器&#xff0c;都是Windows Server 2016 Standard 2、一台作为Master Server角色&#xff0c;另外一台则作为Media Server角色 3、两台服务器均已加入域并关闭防火墙 4、后期备份客户端会有Linux和Windows系统&#xff0c;也会对接VCenter无代理备份虚拟…

xss靶场详解

目录 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 6.第六题 7.第七题 8.第八题 1.第一题 在源码script标签里边&#xff0c;innerhtml是用于访问或修改 HTML 元素内的 HTML 内容的&#xff0c;这里是访问spaghet这个元素的&#xff0c;并通过括号里面的东西搜索当前…

图搜v1.1.3 - 图库几千张图片再也不怕了

图搜是一款使用先进的自然语言处理技术的相册搜索助手&#xff0c;支持通过简单的描述来搜索相册中的图片&#xff0c;如“草丛中的猫”或“公园里的狗”。这款应用完全免费、无需内购&#xff0c;且完全离线使用&#xff0c;保证了用户数据的安全与私密性。它的高效索引系统确…

法律知识有奖竞答

关于开展线上法律知识竞赛活动的通知 根据字【2024】008号 《关于进一步推动普法贯穿于各行业各领域的倡议》的相关要求&#xff0c;特举办本次线上答题活动。 一、活动时间 2024年08月19日08:00至08月25日24:00 二、活动对象 公司全体成员 三、竞赛规则 1、每人每天拥有1次…

Jenkins UI与接口自动化测试持续集成实战

篇幅较长&#xff0c;要耐心阅读哦~ 基础知识简要回顾 持续集成、持续交付的好处与产生的必然性Jenkins服务的搭建方法Jenkins节点管理与用户权限Jenkins插件Jenkins父子多任务关联运行Jenkins报警机制 目录 SeleniumUI自动化测试持续集成演练接口自动化测试持续集成演练 …