高德地图轨迹回放/轨迹播放

2024-06-20 09:20

本文主要是介绍高德地图轨迹回放/轨迹播放,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

本篇文章主要介绍高德地图的轨迹回放或播放的实现过程,是基于vue2实现的功能,同时做一些改动也是能够适配vue3的。其中播放条是用的是element UI中的el-slider组件,包括使用到的图标也是element UI自带的。可以实现轨迹的播放、暂停、停止、播放倍数,以及播放拖拽,涉及到的高德地图的相关权限申请,这里就不再赘述,好了,废话不多说,效果图附上。

效果图 


一、地图初始化

首先,需要在组件dom加载完毕后初始化地图,这里小谭直接用的new AMap.Map方法进行初始化,需要在index.html引入高德的服务。

<script src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>

其次,在引入高德服务之后,需要在单独引入高德AMapUI 组件库,因为轨迹播放是基于该组件库实现的,引入示例:

<!--引入UI组件库(1.1版本) -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

最后,就可以进行初始化地图了,注意需要在组件dom加载完毕才能进行初始化!其中this.map是地图实例,附上代码:

 this.map = new AMap.Map('myMap', {zoom: 10, //级别center:[120.209758, 30.246809], //中心点坐标 默认在杭州});

二、轨迹插件初始化

在地图初始化完成之后,可以引入一些需要的插件,这里就不再过多赘述,我们直接引入AMapUI,我们这里用到的是PathSimplifier模块,故只需要引入该模块即可,附上代码:

//加载PathSimplifier,loadUI的路径参数为模块名中 'ui/' 之后的部分
new AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {if (!PathSimplifier.supportCanvas) {alert('当前环境不支持 Canvas!');return;}if (this.pathList?.length) {//启动页面this.initPage(PathSimplifier);}
});

其中,涉及到的this.pathList是我这边后端返回坐标点信息,this.pathList结构如下:

this.pathList = [[120.79580028, // 经度30.03570354 // 纬度],...];

this.initPage方法如下,需要注意的是,方法内声明的content是轨迹播放时展示的车辆图标,如果不需要可以删掉,PathSimplifier中的配置请参照高德地图轨迹展示的开发文档,还有方法最后调用的this.cruiseInit方法已经放到下一部分了。

initPage(PathSimplifier) {let content = PathSimplifier.Render.Canvas.getImageContent('/img/car1.png',() => {//图片加载成功,重新绘制一次this.pathSimplifierIns.renderLater();},function onerror(e) {this.$message({ type: 'error', message: '图片加载失败!' });});this.pathSimplifierIns = new PathSimplifier({zIndex: 100,map: this.map,getPath: function (pathData, pathIndex) {return pathData.path;},renderOptions: {//轨迹线的样式getPathStyle: (pathItem, zoom) => {return {pathLineStyle: {strokeStyle: "red",lineWidth: 6,dirArrowStyle: true,},};},pathNavigatorStyle: {initRotateDegree: 180,width: 20,height: 35,autoRotate: true,content,},},});this.cruiseInit(); //巡航器初始化
}

三、巡航器初始化

巡航器初始化方法this.cruiseInit代码如下:

cruiseInit() {let pathSimplifierIns = [{ path: this.pathList, color: '#28F' }];this.pathSimplifierIns.setData(pathSimplifierIns);this.pointSum = 0;pathSimplifierIns.forEach((item, index) => {this.pointSum += item.path.length;});this.marksIndex = marksIndex;this.cruiseStop();//如果已经存在巡航器,则停止播放
}

其中this.pointSum是为了记录巡航器的最终点数,方便对应到播放条的最大值。


四、巡航器的播放暂停等功能

巡航器的播放、暂停以及倍数的方法如下:

// 创建一个巡航器
createdCruise(index) {// 判断是否传入indexlet cruiseIndex;if (index != undefined) {cruiseIndex = index;this.cruiseIndex = index;} else {cruiseIndex = this.cruiseIndex;}let cruise = this.pathSimplifierIns.createPathNavigator(cruiseIndex, //关联第index条轨迹{loop: false, //循环播放speed: this.speedList[this.speedValue].speed, //速度});if (this.cruise) {// 清空走过的路线this.cruise.destroy();this.cruise = null;}return cruise;
},
// 开始播放
cruiseStart() {this.isPlay = true;if (this.cruise && !this.cruise.isCursorAtPathEnd() && !this.cruise.isCursorAtPathStart() && !this.isComplete) {// 路段未开始并且没有结束的时候 暂停恢复动画 并且动画没有完成的时候this.cruise.resume();return;}this.isComplete = false;if (this.cruiseIndex == 0) {this.cruiseStop();return;}this.cruise = this.createdCruise();// 判断是否传入初始坐标if (this.startPoint) {this.cruise.start(this.startPoint);this.startPoint = 0;} else {this.cruise.start();}this.cruise.on('move', e => {let idx = this.cruise.cursor.idx;let { address, gpsTime, speed } = this.pathList[idx];let trackAddress = {address,gpsTime,speed,};this.$emit('changeData', 'trackAddress', trackAddress);let [min, max] = this.marksIndex[this.cruiseIndex];this.sliderValue = idx + min;});// 巡航完成事触发this.cruise.on('pause', () => {if (this.cruise && this.cruise.isCursorAtPathEnd()) {this.cruiseStart();}});
},// 暂停播放
cruisePause() {this.cruise.pause();this.isPlay = false;
},
// 停止播放
cruiseStop() {if (this.cruise) {// 清空走过的路线this.cruise.destroy();}// 停止播放this.isPlay = false;this.isComplete = true;this.cruiseIndex = -1;// 为重新播放准备this.cruise = this.createdCruise();this.cruiseIndex = -1;this.sliderValue = 0;
},
// 速度改变
speedChange() {if (this.speedValue == this.speedList.length - 1) {this.speedValue = 0;} else {this.speedValue++;}this.cruise.setSpeed(this.speedList[this.speedValue].speed);
},

到这里巡航器的基础功能已经实现,还有一部分关于播放器调整对应轨迹改变,这里我们要用的监听器,即vue的watch属性:


五、变量声明以及HTML结构

其中使用到的变量有这些:

data() {return {    // 地图实例map: null,cruise: null, //巡航器实例cruiseIndex: -1, // 当前播放轨迹下标pathSimplifierIns: null, //轨迹实例isPlay: false, //是否播放isComplete: true, //是否完成pointSum: 0, //播放器总数sliderValue: 0, //播放器当前数startPoint: 0, //下次播放轨迹从当前值开始marksIndex: {}, //每段路的起止坐标pathList: [],// 轨迹坐标speedValue: 3,// 当前播放速度下标// 速度列表,可自定义配置speedList: [{ value: 0.5, speed: 100 },{ value: 1, speed: 200 },{ value: 2, speed: 400 },{ value: 4, speed: 1600 },{ value: 8, speed: 12800 },{ value: 16, speed: 25600 },],};
},

HTML结构:

<template><div class="workTrack"><div id="myMap"></div><div class="sliderBar" v-show="pathList.length"><span @click="cruiseStart()" v-if="!isPlay"><i class="el-icon-video-play"></i></span><span @click="cruisePause" v-else><i class="el-icon-video-pause"></i></span><span @click="cruiseStop"><i class="el-icon-error"></i></span><el-slider :disabled="isPlay" v-model="sliderValue" :max="pointSum" :show-tooltip="false"></el-slider><b @click="speedChange"><i class="el-icon-d-arrow-right"></i><span>×{{ speedList[speedValue].value }}</span></b></div></div>
</template>

css:

.workTrack {width: 100%;position: relative;height: 100%;#myMap {width: 100%;height: 100%;}.sliderBar {position: absolute;bottom: 30px;user-select: none;width: 100%;padding: 10px 2%;background-color: #00000064;border-radius: 400px;backdrop-filter: blur(5px);z-index: 99;width: 80%;right: 0;left: 0;margin: auto;display: flex;justify-content: center;align-items: center;.el-slider {flex: 1;transform: translateY(1px);margin: 0 15px;}::v-deep .el-slider__runway {pointer-events: none;background-color: #00000021;margin: 0;.el-slider__bar {background-color: #1682e6;}.el-slider__stop {background-color: #1682e6;border-radius: 0;width: 2px;}.el-slider__button-wrapper {pointer-events: auto;}.el-slider__marks-text {white-space: nowrap;color: #fff;font-size: 0;}}> span {flex-shrink: 0;transform: translateY(1px);color: #eee;cursor: pointer;margin: 0 5px;transition: 0.3s;font-size: 20px;&:hover {opacity: 0.5;}}> b {flex-shrink: 0;color: #eee;font-weight: normal;margin: 0 5px;cursor: pointer;border-radius: 3px;border: 1px solid #eee;padding: 0px 10px;transition: 0.3s;user-select: none;> span {vertical-align: middle;font-size: 14px;display: inline-block;transform: translateY(-2px);}i {vertical-align: middle;font-size: 16px;display: inline-block;transform: translateY(-1px);}&:hover {opacity: 0.5;}}}}

六:完整代码

完整代码如下:

<!-- * @description 轨迹回放* @fileName: track.vue * @author: tan * @date: 2024-06-17 10:02:28
!-->
<template><div class="workTrack"><div id="myMap"></div><div class="sliderBar" v-show="pathList.length"><span @click="cruiseStart()" v-if="!isPlay"><i class="el-icon-video-play"></i></span><span @click="cruisePause" v-else><i class="el-icon-video-pause"></i></span><span @click="cruiseStop"><i class="el-icon-error"></i></span><el-slider :disabled="isPlay" v-model="sliderValue" :max="pointSum" :show-tooltip="false"></el-slider><b @click="speedChange"><i class="el-icon-d-arrow-right"></i><span>×{{ speedList[speedValue].value }}</span></b></div></div>
</template><script>
export default {data() {return {// 地图实例map: null,cruise: null, //巡航器实例cruiseIndex: -1, // 当前播放轨迹下标pathSimplifierIns: null, //轨迹实例isPlay: false, //是否播放isComplete: true, //是否完成pointSum: 0, //播放器总数sliderValue: 0, //播放器当前数startPoint: 0, //下次播放轨迹从当前值开始marksIndex: {}, //每段路的起止坐标// 轨迹坐标pathList: [// [经度,纬度] 可再次放置测试数据[120.79573938, 30.03576463],],speedValue: 3, // 当前播放速度下标// 速度列表,可自定义配置speedList: [{ value: 0.5, speed: 100 },{ value: 1, speed: 200 },{ value: 2, speed: 400 },{ value: 4, speed: 1600 },{ value: 8, speed: 12800 },{ value: 16, speed: 25600 },],};},mounted() {this.map = new AMap.Map('myMap', {zoom: 10, //级别center: [120.209758, 30.246809], //中心点坐标 默认在杭州});this.$nextTick(() => {this.loadMap();});},methods: {// 加载地图loadMap() {return new Promise((reslove, reject) => {//加载PathSimplifier,loadUI的路径参数为模块名中 'ui/' 之后的部分new AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {if (!PathSimplifier.supportCanvas) {alert('当前环境不支持 Canvas!');return;}if (this.pathList?.length) {//启动页面this.initPage(PathSimplifier);}});reslove();});},initPage(PathSimplifier) {let content = PathSimplifier.Render.Canvas.getImageContent('/img/car1.png',() => {//图片加载成功,重新绘制一次this.pathSimplifierIns.renderLater();},function onerror(e) {this.$message({ type: 'error', message: '图片加载失败!' });});this.pathSimplifierIns = new PathSimplifier({zIndex: 100,map: this.map,getPath: function (pathData, pathIndex) {return pathData.path;},renderOptions: {//轨迹线的样式getPathStyle: (pathItem, zoom) => {return {pathLineStyle: {strokeStyle: 'red',lineWidth: 6,dirArrowStyle: true,},};},pathNavigatorStyle: {initRotateDegree: 180,width: 20,height: 35,autoRotate: true,content,},},});this.cruiseInit();},// 巡航器初始化cruiseInit() {let pathSimplifierIns = [{ path: this.pathList, color: '#28F' }];this.pathSimplifierIns.setData(pathSimplifierIns);this.pointSum = 0;let marksIndex = {};pathSimplifierIns.forEach((item, index) => {this.pointSum += item.path.length;marksIndex[index] = [0, this.pointSum];});this.marksIndex = marksIndex;this.cruiseStop();},// 创建一个巡航器createdCruise(index) {this.cruiseIndex++;// 判断是否传入indexlet cruiseIndex;if (index != undefined) {cruiseIndex = index;this.cruiseIndex = index;} else {cruiseIndex = this.cruiseIndex;}let cruise = this.pathSimplifierIns.createPathNavigator(cruiseIndex, //关联第index条轨迹{loop: false, //循环播放speed: this.speedList[this.speedValue].speed, //速度});if (this.cruise) {// 清空走过的路线this.cruise.destroy();this.cruise = null;}return cruise;},// 开始播放cruiseStart() {this.isPlay = true;if (this.cruise && !this.cruise.isCursorAtPathEnd() && !this.cruise.isCursorAtPathStart() && !this.isComplete) {// 路段未开始并且没有结束的时候 暂停恢复动画 并且动画没有完成的时候this.cruise.resume();return;}this.isComplete = false;if (this.cruiseIndex == 0) {this.cruiseStop();return;}this.cruise = this.createdCruise();// 判断是否传入初始坐标if (this.startPoint) {this.cruise.start(this.startPoint);this.startPoint = 0;} else {this.cruise.start();}this.cruise.on('move', e => {let idx = this.cruise.cursor.idx;let { address, gpsTime, speed } = this.pathList[idx];let trackAddress = {address,gpsTime,speed,};this.$emit('changeData', 'trackAddress', trackAddress);let [min, max] = this.marksIndex[this.cruiseIndex];this.sliderValue = idx + min;});// 巡航完成事触发this.cruise.on('pause', () => {if (this.cruise && this.cruise.isCursorAtPathEnd()) {this.cruiseStart();}});},// 暂停播放cruisePause() {this.cruise.pause();this.isPlay = false;},// 停止cruiseStop() {if (this.cruise) {// 清空走过的路线this.cruise.destroy();}// 停止播放this.isPlay = false;this.isComplete = true;this.cruiseIndex = -1;// 为重新播放准备this.cruise = this.createdCruise();this.cruiseIndex = -1;this.sliderValue = 0;},speedChange() {if (this.speedValue == this.speedList.length - 1) {this.speedValue = 0;} else {this.speedValue++;}this.cruise.setSpeed(this.speedList[this.speedValue].speed);},},watch: {sliderValue(val) {// 正在播放禁止拖拽播放器if (!this.cruise || this.isPlay) return;this.cruise.moveToPoint(val);this.startPoint = val;this.pathSimplifierIns.render();},},beforeDestroy() {if (this.pathSimplifierIns) this.pathSimplifierIns.clearPathNavigators();if (this.pathSimplifierIns) this.pathSimplifierIns.setData([]);if (this.cruise) this.cruise.destroy();if (this.map) this.map.destroy();},
};
</script><style lang="scss" scoped>
.workTrack {width: 100%;position: relative;height: 100%;#myMap {width: 100%;height: 100%;}.sliderBar {position: absolute;bottom: 30px;user-select: none;width: 100%;padding: 10px 2%;background-color: #00000064;border-radius: 400px;backdrop-filter: blur(5px);z-index: 99;width: 80%;right: 0;left: 0;margin: auto;display: flex;justify-content: center;align-items: center;.el-slider {flex: 1;transform: translateY(1px);margin: 0 15px;}::v-deep .el-slider__runway {pointer-events: none;background-color: #00000021;margin: 0;.el-slider__bar {background-color: #1682e6;}.el-slider__stop {background-color: #1682e6;border-radius: 0;width: 2px;}.el-slider__button-wrapper {pointer-events: auto;}.el-slider__marks-text {white-space: nowrap;color: #fff;font-size: 0;}}> span {flex-shrink: 0;transform: translateY(1px);color: #eee;cursor: pointer;margin: 0 5px;transition: 0.3s;font-size: 20px;&:hover {opacity: 0.5;}}> b {flex-shrink: 0;color: #eee;font-weight: normal;margin: 0 5px;cursor: pointer;border-radius: 3px;border: 1px solid #eee;padding: 0px 10px;transition: 0.3s;user-select: none;> span {vertical-align: middle;font-size: 14px;display: inline-block;transform: translateY(-2px);}i {vertical-align: middle;font-size: 16px;display: inline-block;transform: translateY(-1px);}&:hover {opacity: 0.5;}}}
}
</style>

这篇关于高德地图轨迹回放/轨迹播放的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1077731

相关文章

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

轨迹规划-B样条

B样条究竟是干啥的?白话就是给出一堆点,用样条的方式,给这些点连接起来,并保证丝滑的。 同时B样条分为准均匀和非均匀,以下为准均匀为例。 参考链接1:https://zhuanlan.zhihu.com/p/50626506https://zhuanlan.zhihu.com/p/50626506 参考链接2: https://zhuanlan.zhihu.com/p/536470972h

ROS - C++实现RosBag包回放/提取

文章目录 1. 回放原理2. 回放/提取 多个话题3. 回放/提取数据包,并实时发布 1. 回放原理 #include <ros/ros.h>#include <rosbag/bag.h>#include <std_msgs/String.h>int main(int argc, char** argv){// 初始化ROS节点ros::init(argc, argv,

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具,支持在一块屏幕上同时播放多个视频。其主要功能包括: 多视频播放:用户可以在一个窗口中同时播放任意数量的视频,数量仅受硬件性能限制。支持多种格式和流媒体:GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL(如 m3u8 链接)。自定义网格布局:用户可以配置播放器的网格布局,以适应不同的观看需求。硬

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化,对我们搞软件开发的人员来说,影响也是越发明显,比如之前对美对欧的软件居多,现在慢慢的变成了对大鹅和中东以及非洲的居多,这两年明显问有没有俄语或者阿拉伯语的输入法的增多,这要是放在2019年以前,一年也遇不到一个人问这种需求场景的。 地图应用这块也是,之前的应用主要在国内,现在慢慢的多了一些外国的应用场景,这就遇到一个大问题,我们平时主要开发用的都是国内的地

Imageview在百度地图中实现点击事件

1.首先第一步,需要声明的全局有关类的引用 private BMapManager mBMapMan; private MapView mMapView; private MapController mMapController; private RadioGroup radiogroup; private RadioButton normalview; private RadioBu

MMO地图传送

本篇由以下四个点讲解: 创建传送点 传送点配置 编辑器扩展:传送点数据生成 传送协议与实现 创建传送点 建碰撞器触发 //位置归零 建一个传送门cube放到要传送的位置(这个teleporter1是传出的区域 这是从另一张地图传入时的传送门 创建一个脚本TeleporterObject给每个传送cube都绑上脚本 通过脚本,让传送门在编辑器下面还能绘制出来

UniApp实现漂亮的音乐歌词滚动播放效果

在现代的音乐播放应用中,歌词的展示和滚动播放已经成为了一个非常常见的功能。今天,我们将通过UniApp来实现一个漂亮的歌词滚动播放功能。我们将使用UniApp提供的组件和API来完成这个任务。 页面结构 在页面的模板部分,我们需要创建一个音频播放器和歌词展示区域。使用<scroll-view>组件来实现歌词的滚动效果。 <template><view class="audio-co