效果圖如下：

效果實現：

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)},