关于地图:vueamap高德地图轨迹回放动画实现

如何在 vue 高德地图中实现如下成果，主动对多个坐标生成轨迹线，箭头主动在线上挪动的动画成果：

引入 el-amap，增加renderPath 办法用于渲染一个轨迹、巡航器。轨迹实例创立后被长期存储在 window 中，如果是期间须要切换轨迹巡航的话须要在创立实例前从新渲染下之前的轨迹，window.pathSimplifierIns&&window.pathSimplifierIns.setData([])初始化上一个轨迹：

<el-amap vid="amapDemo" ref="map" :zoom="zoom" :center="center" >
</el-amap>

methods: {renderPath(d){
      var that = this;
       AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {window.pathSimplifierIns&&window.pathSimplifierIns.setData([]); // 切换时先重置轨迹数据从新渲染
        if (!PathSimplifier.supportCanvas) {alert('以后环境不反对 Canvas！');
            return;
        }

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            map: that.$refs.map.$$getInstance(), // 所属的地图实例
            getPath: function(pathData, pathIndex) {return pathData.path;},
            renderOptions: {

              keyPointTolerance:40,
                pathLineStyle: {dirArrowStyle: true},
                getPathStyle: function(pathItem, zoom) {

                    return {
                        pathLineStyle: {strokeStyle: 'rgba(0,0,0,0)',
                            borderWidth:0,
                            lineWidth:0
                        },
                        pathLineSelectedStyle: {lineWidth:6},
                        pathNavigatorStyle: {fillStyle: '#303133'}
                    };
              }
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;
        pathSimplifierIns.setData([{name:'抄表轨迹',path:d}]);
  
            // 创立一个巡航器
            window.navg0 = pathSimplifierIns.createPathNavigator(0, {
                loop: true, // 循环播放
                speed: 6000
            });
            window.navg0.start();});

    },
}

调用 renderPath 传入点坐标数组：

   this.renderPath(this.path)//[[106.133129,38.460149],[106.132999,38.46139],[106.133297,38.469028],[106.119932,38.443799],[106.128519,38.478602]]