vue-amap高德地图轨迹回放动画实现

发布时间:2024-02-12 13:30

如何在vue高德地图中实现如下效果,自动对多个坐标生成轨迹线,箭头自动在线上移动的动画效果:

\"vue-amap高德地图轨迹回放动画实现_第1张图片\"

引入el-amap,添加renderPath方法用于渲染一个轨迹、巡航器。轨迹实例创建后被临时存储在window中,如果是期间需要切换轨迹巡航的话需要在创建实例前重新渲染下之前的轨迹,window.pathSimplifierIns&&window.pathSimplifierIns.setData([])初始化上一个轨迹:




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]]

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号