非专业前端，抛砖引玉。发扬分享精神。
参考文章：
参考高德文档-轨迹：
https://lbs.amap.com/api/amap-ui/reference-amap-ui/mass-data/pathsimplifier
先集成高德地图控件 AMap ，AMapUI。参考：
https://blog.csdn.net/qq_30669833/article/details/82227263
效果图如下：
image
代码如下：
<template>
<div class="map-outbox" style="width: 1024px;height: 600px;">
<!--地图容器-->
<div id="my-container" class="map"></div>
<!--控制条-->
<el-row style="top: 5px;" :gutter="20">
<el-col :span="2">
<el-button v-if="!isPlaying" type="primary" @click="start()" icon="el-icon-video-play"></el-button>
<el-button v-if="isPlaying" type="primary" icon="el-icon-video-pause" @click="pause()"></el-button>
</el-col>
<el-col :span="19">
<el-slider v-model="sliderVal" @input="changeValue()"></el-slider>
</el-col>
<el-col :span="3">
<el-select v-model="value" placeholder="请选择" @change="setSpeed()">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
</div>
</template>
<script>
import AMap from 'AMap'
import AMapUI from 'AMapUI'
export default {
data() {
return {
isPlaying: false,
pathSimplifierIns: {},
sliderVal: 0,
navg: {},
value: 1, //倍速
speed: 100, //速度
options: [{
value: 1,
label: "倍速1"
},
{
value: 2,
label: "倍速2"
},
{
value: 3,
label: "倍速3"
},
{
value: 4,
label: "倍速4"
},
],
};
},
//渲染前
created: function() {
},
beforeDestroy: function() {
document.onkeydown = function(e) {};
},
props: ["dialogVisible", "form", "dialogTitle"],
methods: {
dialogClose: function() {
this.$emit("dialogClose", false);
},
initMap: function() {
var $this = this;
var map = new AMap.Map('my-container', {
center: [116.397428, 39.90923], // [纬度，经度]
resizeEnable: true,
zoom: 15,
});
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
//创建一个巡航轨迹路线
$this.pathSimplifierIns = new PathSimplifier({
zIndex: 100, //地图层级，
map: map, //所属的地图实例
//巡航路线轨迹列表
getPath: function(pathData, pathIndex) {
return pathData.path;
},
//hover每一个轨迹点，展示内容
getHoverTitle: function(pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
}
return pathData.name + '，点数量' + pathData.path.length;
},
//自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档
renderOptions: {},
//绘制路线节点
renderOptions: {
renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
}
});
//设置数据
$this.pathSimplifierIns.setData([{
name: '路线0',
path: [
[116.478935, 39.997761],
[116.478939, 39.997825],
[116.478912, 39.998549],
[116.478912, 39.998549],
[116.478998, 39.998555],
[116.478998, 39.998555],
[116.479282, 39.99856],
[116.479658, 39.998528],
[116.480151, 39.998453],
[116.480784, 39.998302],
[116.480784, 39.998302],
[116.481149, 39.998184],
[116.481573, 39.997997],
[116.481863, 39.997846],
[116.482072, 39.997718],
[116.482362, 39.997718],
[116.483633, 39.998935],
[116.48367, 39.998968],
[116.484648, 39.999861]
]
}]);
//对第一条线路（即索引 0）创建一个巡航器
$this.navg = $this.pathSimplifierIns.createPathNavigator(0, {
loop: false, //循环播放
speed: $this.speed, //巡航速度，单位千米/小时
pathNavigatorStyle: {
width: 20,
height: 30,
//使用图片
content: PathSimplifier.Render.Canvas.getImageContent(
"https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", onload, onerror),
// strokeStyle: null,
// fillStyle: null,
// //经过路径的样式
// pathLinePassedStyle: {
// lineWidth: 5,
// strokeStyle: '#FFDC04',
// }
}
});
$this.navg.on("move", function() {
let idx = this.getCursor().idx; //走到了第几个点
let tail = this.getCursor().tail; //至下一个节点的比例位置
let totalIdx = idx + tail
// 进度条实时展示tail
$this.sliderVal = (totalIdx / $this.navg.getPathEndIdx()).toFixed(2) * 100;
});
});
},
start: function() {
// stop：停止状态，start之前或者stop之后处于该状态
// moving：巡航状态，start或者resume之后处于该状态
// pause：暂停状态，pause之后处于该状态
this.isPlaying = true;
if (this.navg.isCursorAtPathEnd()) {
this.navg.start();
return
}
if (this.navg.getNaviStatus() == "pause") {
this.navg.resume();
} else if (this.navg.getNaviStatus() == "stop") {
this.navg.start();
}
},
pause: function() {
if (this.navg.getNaviStatus() == "moving") {
this.navg.pause();
this.isPlaying = false;
}
},
setSpeed: function() {
this.navg.setSpeed(this.speed * this.value);
},
getCheckDate: function(t) {
//console.log(t);
if (t.length >= 2) {
this.checkDate.begintime = t[0];
this.checkDate.endtime = t[1];
}
},
changeValue: function() {
// let newVal = typeof(newVal) === 'number' ? val : this.sliderVal
let num = parseInt((this.sliderVal / 100) * this.navg.getPathEndIdx());
let decimal = String((this.sliderVal / 100) * this.navg.getPathEndIdx()).split('.')[1] || 0
this.navg.moveToPoint(num, Number('0.' + decimal));
this.pathSimplifierIns.renderLater();
if (num == this.navg.getPathEndIdx()) {
this.isPlaying = false;
}
},
},
//渲染后
mounted() {
this.initMap();
}
};
</script>
<style scoped>
.map {
height: 400px;
width: 1024px;
}
,
.map-control {}
</style>
