前言

本篇文章主要介紹高德地圖的軌跡回放或播放的實(shí)現(xiàn)過程，是基于vue2實(shí)現(xiàn)的功能，同時(shí)做一些改動(dòng)也是能夠適配vue3的。其中播放條是用的是element UI中的el-slider組件，包括使用到的圖標(biāo)也是element UI自帶的?？梢詫?shí)現(xiàn)軌跡的播放、暫停、停止、播放倍數(shù)，以及播放拖拽，涉及到的高德地圖的相關(guān)權(quán)限申請(qǐng)，這里就不再贅述，好了，廢話不多說，效果圖附上。

效果圖?

---

一、地圖初始化

首先，需要在組件dom加載完畢后初始化地圖，這里小譚直接用的new AMap.Map方法進(jìn)行初始化，需要在index.html引入高德的服務(wù)。

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

其次，在引入高德服務(wù)之后，需要在單獨(dú)引入高德AMapUI 組件庫，因?yàn)檐壽E播放是基于該組件庫實(shí)現(xiàn)的，引入示例：

<!--引入U(xiǎn)I組件庫（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

最后，就可以進(jìn)行初始化地圖了，注意需要在組件dom加載完畢才能進(jìn)行初始化！其中this.map是地圖實(shí)例，附上代碼：

 this.map = new AMap.Map('myMap', {zoom: 10, //級(jí)別center:[120.209758, 30.246809], //中心點(diǎn)坐標(biāo) 默認(rèn)在杭州});

---

二、軌跡插件初始化

在地圖初始化完成之后，可以引入一些需要的插件，這里就不再過多贅述，我們直接引入AMapUI，我們這里用到的是PathSimplifier模塊，故只需要引入該模塊即可，附上代碼：

//加載PathSimplifier，loadUI的路徑參數(shù)為模塊名中 'ui/' 之后的部分
new AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {if (!PathSimplifier.supportCanvas) {alert('當(dāng)前環(huán)境不支持 Canvas！');return;}if (this.pathList?.length) {//啟動(dòng)頁面this.initPage(PathSimplifier);}
});

其中，涉及到的this.pathList是我這邊后端返回坐標(biāo)點(diǎn)信息，this.pathList結(jié)構(gòu)如下：

this.pathList = [[120.79580028, // 經(jīng)度30.03570354 // 緯度],...];

this.initPage方法如下，需要注意的是，方法內(nèi)聲明的content是軌跡播放時(shí)展示的車輛圖標(biāo)，如果不需要可以刪掉，PathSimplifier中的配置請(qǐng)參照高德地圖軌跡展示的開發(fā)文檔，還有方法最后調(diào)用的this.cruiseInit方法已經(jīng)放到下一部分了。

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();//如果已經(jīng)存在巡航器，則停止播放
}

其中this.pointSum是為了記錄巡航器的最終點(diǎn)數(shù)，方便對(duì)應(yīng)到播放條的最大值。

---

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

巡航器的播放、暫停以及倍數(shù)的方法如下：

// 創(chuàng)建一個(gè)巡航器
createdCruise(index) {// 判斷是否傳入indexlet cruiseIndex;if (index != undefined) {cruiseIndex = index;this.cruiseIndex = index;} else {cruiseIndex = this.cruiseIndex;}let cruise = this.pathSimplifierIns.createPathNavigator(cruiseIndex, //關(guān)聯(lián)第index條軌跡{loop: false, //循環(huán)播放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) {// 路段未開始并且沒有結(jié)束的時(shí)候 暫?；謴?fù)動(dòng)畫 并且動(dòng)畫沒有完成的時(shí)候this.cruise.resume();return;}this.isComplete = false;if (this.cruiseIndex == 0) {this.cruiseStop();return;}this.cruise = this.createdCruise();// 判斷是否傳入初始坐標(biāo)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;});// 巡航完成事觸發(fā)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;// 為重新播放準(zhǔn)備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);
},

到這里巡航器的基礎(chǔ)功能已經(jīng)實(shí)現(xiàn)，還有一部分關(guān)于播放器調(diào)整對(duì)應(yīng)軌跡改變，這里我們要用的監(jiān)聽器，即vue的watch屬性：

---

五、變量聲明以及HTML結(jié)構(gòu)

其中使用到的變量有這些：

data() {return {    // 地圖實(shí)例map: null,cruise: null, //巡航器實(shí)例cruiseIndex: -1, // 當(dāng)前播放軌跡下標(biāo)pathSimplifierIns: null, //軌跡實(shí)例isPlay: false, //是否播放isComplete: true, //是否完成pointSum: 0, //播放器總數(shù)sliderValue: 0, //播放器當(dāng)前數(shù)startPoint: 0, //下次播放軌跡從當(dāng)前值開始marksIndex: {}, //每段路的起止坐標(biāo)pathList: [],// 軌跡坐標(biāo)speedValue: 3,// 當(dāng)前播放速度下標(biāo)// 速度列表，可自定義配置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結(jié)構(gòu)：

<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 {// 地圖實(shí)例map: null,cruise: null, //巡航器實(shí)例cruiseIndex: -1, // 當(dāng)前播放軌跡下標(biāo)pathSimplifierIns: null, //軌跡實(shí)例isPlay: false, //是否播放isComplete: true, //是否完成pointSum: 0, //播放器總數(shù)sliderValue: 0, //播放器當(dāng)前數(shù)startPoint: 0, //下次播放軌跡從當(dāng)前值開始marksIndex: {}, //每段路的起止坐標(biāo)// 軌跡坐標(biāo)pathList: [// [經(jīng)度，緯度] 可再次放置測(cè)試數(shù)據(jù)[120.79573938, 30.03576463],],speedValue: 3, // 當(dāng)前播放速度下標(biāo)// 速度列表，可自定義配置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, //級(jí)別center: [120.209758, 30.246809], //中心點(diǎn)坐標(biāo) 默認(rèn)在杭州});this.$nextTick(() => {this.loadMap();});},methods: {// 加載地圖loadMap() {return new Promise((reslove, reject) => {//加載PathSimplifier，loadUI的路徑參數(shù)為模塊名中 'ui/' 之后的部分new AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {if (!PathSimplifier.supportCanvas) {alert('當(dāng)前環(huán)境不支持 Canvas！');return;}if (this.pathList?.length) {//啟動(dòng)頁面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();},// 創(chuàng)建一個(gè)巡航器createdCruise(index) {this.cruiseIndex++;// 判斷是否傳入indexlet cruiseIndex;if (index != undefined) {cruiseIndex = index;this.cruiseIndex = index;} else {cruiseIndex = this.cruiseIndex;}let cruise = this.pathSimplifierIns.createPathNavigator(cruiseIndex, //關(guān)聯(lián)第index條軌跡{loop: false, //循環(huán)播放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) {// 路段未開始并且沒有結(jié)束的時(shí)候 暫?；謴?fù)動(dòng)畫 并且動(dòng)畫沒有完成的時(shí)候this.cruise.resume();return;}this.isComplete = false;if (this.cruiseIndex == 0) {this.cruiseStop();return;}this.cruise = this.createdCruise();// 判斷是否傳入初始坐標(biāo)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;});// 巡航完成事觸發(fā)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;// 為重新播放準(zhǔn)備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>