请你用vue框架基于leaflet实现一个轨迹回放，附完整代码实例

很高兴为您服务！以下是基于Vue框架和Leaflet实现的轨迹回放的示例代码：

<template>
<div id="map"></div>
</template>

<script>
import L from "leaflet";
import "leaflet-polylinedecorator";

export default {
data() {
return {
map: null,
polyline: null,
marker: null,
positions: [
[39.9078, 116.3975],
[31.2304, 121.4737],
[22.3964, 114.1095],
[35.6895, 139.6917],
[37.5665, 126.9780]
],
currentIndex: 0
};
},

mounted() {
this.initMap();
this.initPolyline();
this.initMarker();
this.play();
},

methods: {
initMap() {
this.map = L.map("map").setView([39.9078, 116.3975], 3);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "Map data &copy; OpenStreetMap contributors"
}).addTo(this.map);
},

initPolyline() {
const polylineOptions = {
color: "blue",
weight: 5,
opacity: 0.7
};

this.polyline = L.polyline(this.positions, polylineOptions).addTo(this.map);

const arrowOptions = {
patterns: [
{
offset: "50%",
repeat: 100,
symbol: L.Symbol.arrowHead({
pixelSize: 15,
polygon: false,
pathOptions: {
color: "blue",
stroke: true,
weight: 3
}
})
}
]
};

L.polylineDecorator(this.polyline, arrowOptions).addTo(this.map);
},

initMarker() {
const markerOptions = {
icon: L.icon({
iconUrl: require("@/assets/marker.png"),
iconSize: [32, 32],
iconAnchor: [16, 16]
}),
zIndexOffset: 1000
};

this.marker = L.marker(this.positions[0], markerOptions).addTo(this.map);
},

play() {
setInterval(() => {
if (this.currentIndex < this.positions.length - 1) {
this.currentIndex++;
this.marker.setLatLng(this.positions[this.currentIndex]);
this.map.panTo(this.positions[this.currentIndex]);
}
}, 1000);
}
}
};
</script>

<style>
#map {
height: 500px;
}
</style>

请注意，该示例代码仅实现了轨迹回放功能，未进行样式和交互优化。如果您有其他需求，可以根据该示例代码进行相应的修改和扩展。