Vue+⾼德地图巡航轨迹,实现轨迹回放加进度条,加减速
应公司业务要求,给轨迹回放加个滚动条,⼀开始我采⽤的是⾼德地图的折线绘制,但是如果要加上进度条并不太不合适,拖动滚动条,点
位没有恢复的API,后来决定使⽤巡航轨迹,巡航轨迹⽀持更丰富的轨迹API,使⽤起来也更⽅便。
下⾯是做完的效果图:
使⽤的技术有:vue,⾼德地图1.4(amap),element-UI
下⾯的是部分源码:
html部分
v-if="!isPlay"
class="play-icon"
type="ios-play"
@click="isPlay=true;navgControl('start')"
/>
{{passedTime}}
{{totalTime}}
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,//地图层级,