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

前言

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

使用技术栈

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

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

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

使用教程：

下载百度地图路书和信息标志js文件、使用图片图标等静态资源包（在代码仓有），下载后解压复制到前端的public目录下。
在前端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(全屏)

使用包管理工具引入