Vue+⾼德地图巡航轨迹，实现轨迹回放加进度条，加减速
应公司业务要求，给轨迹回放加个滚动条，⼀开始我采⽤的是⾼德地图的折线绘制，但是如果要加上进度条并不太不合适，拖动滚动条，点位没有恢复的API，后来决定使⽤巡航轨迹，巡航轨迹⽀持更丰富的轨迹API，使⽤起来也更⽅便。
下⾯是做完的效果图：
使⽤的技术有：vue，⾼德地图1.4（amap），element-UI
下⾯的是部分源码：
html部分
<template>
<div id="demo">
<div id="test-map" />
<!--控制条-->
<div class="map-control" v-show="isActual">
<!--播放暂停按钮-->
<Icon
v-if="!isPlay"
class="play-icon"
type="ios-play"
@click="isPlay=true;navgControl('start')"
/>
<Icon v-else class="play-icon" type="ios-pause" @click="isPlay=false;navgControl('pause')"/>
<!--已播放时间-->
<span class="passed-time">{{passedTime}}</span>
<!--进度条-->
<el-slider v-model="sliderVal" :format-tooltip="hideFormat" :step="0.0001"></el-slider>
<!--倍速-->
<div class="map-times" @mouseenter="isTimesChoose=true" @mouseleave="isTimesChoose=false">
<div class="times-show">倍速 {{times}}</div>
<div class="choose-box">
<ul v-show="isTimesChoose">
<li v-for="item in speedList" :key="item.value" :class="{active:times==item.value}" @click="changeSpeed(item.value)">{{item.label}}</li>
</ul>
</div>
</div>
<!--结束时间-->
<span class="passed-time">{{totalTime}}</span>
</div>
</div>
</template>
JS处理部分：
1.初始化地图：
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map('test-map', {
zooms: [13, 18], // 地图缩放范围
center: new AMap.LngLat(116.397428, 39.90923)
})
this.initPathSimplifier()
})
2.初始化组件实例
// 初始化组件实例
initPathSimplifier() {
let that = this
AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不⽀持 Canvas！')
return
}
//创建⼀个巡航轨迹路线
that.pathSimplifierIns = new PathSimplifier({
zIndex: 100,//地图层级，
map: this.map, //所属的地图实例
//巡航路线轨迹列表
getPath: (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
}
});
//设置数据
that.pathSimplifierIns.setData([{
name: '路线0',
path: that.actualList
}]);
//对第⼀条线路（即索引 0）创建⼀个巡航器
that.navgtr = atePathNavigator(0, {
loop: false, //循环播放
speed: that.navgtrSpeed //巡航速度，单位千⽶/⼩时
});
("start resume", function() {
that.navgtr._startTime = w();
that.navgtr._startDist = MovedDistance();
});
("stop pause", function() {
that.navgtr._movedTime = w() - that.navgtr._startTime;
that.navgtr._movedDist = MovedDistance() - that.navgtr._startDist;
});
("move", function(data,position) {
let idx = position.dataItem.pointIndex //⾛到了第⼏个点
let tail = position.tail //⾄下⼀个节点的⽐例位置
let totalIdx = idx + tail
let len = position.dataItem.pathData.path.length
// 计算下⼀个距离速度
if (idx < len - 1) {
that.navgtr.setSpeed(that.navgtrSpeed * that.times);
}
// 进度条实时展⽰tail
!that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100);
// 如果到头了，回到初始状态
if (that.navgtr.isCursorAtPathEnd()) {
that.playIcon = "start";
that.isPlay = false;
that.sliderVal = 0;
that.passedTime = alTime;
}
});
})
},
3.关键⽅法，控制车辆跟随进度条移动
sliderChange(val){
let newVal = typeof(newVal)==='number' ? val : this.sliderVal
let num = parseInt((newVal / 100) * this.actualList.length);
let decimal = String((newVal / 100) * this.actualList.length).split('.')[1]||0
veToPoint(num, Number('0.'+decimal));
derLater();
},
4.对滑块设置监听
watch:{
sliderVal(newVal) {
if (!this.isOnSlider) {
return false;
}
this.sliderChange(newVal)
}
},
let that = this;
let el = ElementsByClassName("el-slider__button-wrapper")[0];
let el2 = ElementsByClassName("el-slider__runway")[0];
el2.addEventListener("click", that.sliderChange,false);
el.addEventListener("mousedown", that.openSlider,false);
// 此处⽤document是因为，滑动较为随意时，mouseup可能不是作⽤在el上document.addEventListener("mouseup",that.closeSlider,false);
源码地址：
js控制滚动条链接：pan.baidu/s/120Mcfc27aWXaYviigxFnFQ
提取码：god7

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。