leaflet实现历史轨迹播放效果

效果图如下：

leaflet实现轨迹播放效果

效果实现：

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"),
            });
            // 动态marker
            this.animatedMarker = L.animatedMarker(this.echoLine.getLatLngs(), {
                speedList: speedList,
                interval: 200, // 默认为100mm
                icon: 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)
        },