load2DMap() {
var tableData = this.tableData;
var lineArr = this.lineArr; // 路径数组(二维数组,格式如[ [117.139161, 36.667547], [117.139170, 36.667689]])
var marker = this.marker; // 轨迹回放数组
if(tableData && tableData.length !== 0) {
var centerArr = [tableData[0].Longitude,tableData[0].Latitude];
};
var roadNet = new AMap.TileLayer.RoadNet({
opacity: 0.3
});
var map = new AMap.Map("map-container", {
center: centerArr || [117.139161, 36.667547],
layers:[
new AMap.TileLayer.Satellite(), // 卫星图层
roadNet // 路网图层
],
zoom: 17
});
/**
* 绘制路线
*/
var polyline = new AMap.Polyline({
path: lineArr,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 5,
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
});
polyline.setMap(map);
/**
* 绘制移动轨迹路线
*/
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: '#AF5',
strokeWeight: 6,
});
/**
* 添加用于移动的图标
*/
marker = new AMap.Marker({
map: map,
position: centerArr,
icon: new AMap.Icon({
image: this.$store.state.UrlIP + '/static/dronefly-icon.png',
size: new AMap.Size(80,80),
imageSize: new AMap.Size(40,36),
}),
autoRotation: true,
angle: -90,
});
marker.on('moving', function(e){
passedPolyline.setPath(e.passedPath);
});
marker.moveAlong(lineArr,200);
},
效果图:
手机扫一扫
移动阅读更方便
你可能感兴趣的文章