如何在vue高德地图中实现如下效果，自动对多个坐标生成轨迹线，箭头自动在线上移动的动画效果：
文章图片
引入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();
});
},
}【vue-amap高德地图轨迹回放动画实现】调用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]]推荐阅读
- uniapp 腾讯地图sdk接入
- uniapp-使用高德地图组件
- html5中高德腾讯百度 地图api调起手机app
- 地图软件推荐合集（8个免费的最佳Google地球替代品）
- 在slam_gmapping中使用Log数据创建地图