效果图如下：

效果实现：

1、添加完整轨迹线，蓝色的

this.echoLine = L.polyline(points, { weight: 8 }).addTo(this.map)

2、添加实时轨迹线，初始状态置空

this.realEchoLine = L.polyline([], { weight: 12, color: "#FF9900" }).addTo(this.map)

3、给完整轨迹线添加箭头（注意前三步的顺序不能颠倒，要保证箭头图层在最上面）

this.decoratorLayer = L.polylineDecorator(this.echoLine, {patterns: [{repeat: 50,symbol: L.Symbol.arrowHead({pixelSize: 5,headAngle: 75,polygon: false,pathOptions: {stroke: true,weight: 2,color: "#FFFFFF",},}),},],}).addTo(this.map);

4、添加小车动态点位图层

var speedList = [1, 2, 3, 4, 5, 4, 3, 2, 1];
this.carIcon = L.icon({iconSize: [37, 26],iconAnchor: [19, 13],iconUrl: require("@/assets/images/gg-pic.png"),});// 动态markerthis.animatedMarker = L.animatedMarker(this.echoLine.getLatLngs(), {speedList: speedList,interval: 200, // 默认为100mmicon: this.carIcon,playCall: this.updateRealLine,}).addTo(this.map);this.newLatlngs = [this.echoLine.getLatLngs()[0]];this.animatedMarker.start();// 绘制已行走轨迹线（橙色那条）updateRealLine(latlng) {this.newLatlngs.push(latlng);this.realEchoLine.setLatLngs(this.newLatlngs);}

以上代码添加了一个动画点位animatedMarker，移动点位坐标取自完整轨迹线。给实时轨迹线（橙色的）指定了点位数组newLatlngs。

并在点位动画执行的过程中，通过回调函数updateRealLine，更新实时轨迹线。

5、播放结束，将图层移除

removeLine() {this.map.removeLayer(this.echoLine)this.map.removeLayer(this.realEchoLine)this.newLatlngs = []},removeMarkers() {this.animatedMarker.stop();this.map.removeLayer(this.animatedMarker)},