vue+leaflet+element实现轨迹回放并且加可控制的进度条，用代码体现

可以使用Vue-leaflet和Vue2-leaflet-trackplayback库来实现轨迹回放，并使用Vue-slider-component来加入进度条控制。以下是代码示例：

<template>
<div id="map-container">
<l-map :zoom="zoom" :center="center">
<l-tile-layer :url="url"></l-tile-layer>
<l-track-playback :geojson="geojson" :options="options" ref="trackplayback"></l-track-playback>
<vue-slider :value="value" :min="0" :max="max" v-model="value" @change="handleSliderChange"></vue-slider>
</l-map>
</div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-trackplayback';
import 'vue-slider-component/theme/default.css';
import VueSlider from 'vue-slider-component';

export default {
name: 'map',
components: {
'l-map': L.Map,
'l-tile-layer': L.TileLayer,
'l-track-playback': L.TrackPlayback,
'vue-slider': VueSlider,
},
data() {
return {
zoom: 13,
center: [39.9, 116.4],
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
geojson: {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [[116.4, 39.9], [116.41, 39.91], [116.42, 39.92], [116.43, 39.93], [116.44, 39.94], [116.45, 39.95], [116.46, 39.96], [116.47, 39.97], [116.48, 39.98], [116.49, 39.99]]
}
},
options: {
markers: true,
autoplay: false,
playControl: true,
follow: true,
speed: 500,
markerOptions: {
icon: L.icon({iconUrl: 'marker.png', iconSize: [40, 40]})
},
},
value: 0,
max: 9,
};
},
methods: {
handleSliderChange(value) {
this.$refs.trackplayback.goTo(value);
}
},
};
</script>