使用插件：leaflet.motion
https://github.com/Igor-Vladyka/leaflet.motion
// 执行轨迹回放
doShowTraces(latLngs) {
latLngs = [
[39.123595, 110.561176],
[39.123041, 110.566147],
[39.116309, 110.566799],
[39.115508, 110.557799],
[39.123595, 110.561176]
]
this.traceLayers.clearLayers() // 清理图层
if (latLngs && latLngs.length > 1) {
this.aMarker = L.animatedMarker({ //创建动画marker
latLngs,
duration: latLngs.length * 1000
}).setIcon(
L.glyphicon({
icon: 'fas fa-walking',
color: 'white',
background: '#dc3545',
size: 38,
borderWidth: 0
})
).addTo(this.traceLayers)
// 移动回调
this.aMarker.on('chunkmove', ({ index, duration }) => {
//调整视野
this.map.panTo(latLngs[index], {
duration: duration > 500 ? duration / 1000 : 0
})
})
// 停止回调
this.aMarker.on('stopmove', () => {
this.aMarker.off('chunkmove')
this.aMarker.bindPopup(L.vuePopup({
vueInstance: popupTrace,
props: { vm: this, latLngs },
closeButton: false,
offset: [0, -5],
className: 'nice-popup bg-darkgrey'
}))
this.aMarker.openPopup()
this.highLightTraceLayers(false)
})
// 开始移动
this.map.setView(latLngs[0], 9)
_.delay(() => {
this.highLightTraceLayers(true)
this.aMarker.startMove()
//绘制动态轨迹
L.motion.polyline(latLngs,{
color: 'red'
},{
auto: true,
duration:latLngs.length * 1000,
}).addTo(this.traceLayers)
}, 500)
}
}