高德地图轨迹回放的时候可不可以改变颜色啊, 图1是第一次加载,图二是轨迹回放后!
setPolyline(obj) {
console.log("objKeyArr", obj);
let objKeyArr = Object.keys(obj);
console.log("objKeyArr", objKeyArr); //['1_alarm_1', '2_normal_1', '3_alarm_2', '4_normal_2', '5_alarm_3', '6_over_1']
// 首尾相连
for (let i = 0; i < objKeyArr.length; i++) {
if (i < objKeyArr.length - 1) {
obj[objKeyArr[i]].push(obj[objKeyArr[i + 1]][0]);
}
}
// 设置地图的中心点
let centerLnglat = obj[objKeyArr[0]][0];
this.map.setZoomAndCenter(14, centerLnglat, true);
// 绘画轨迹
let lineArr = []; // 存储轨迹的一维数组
for (let i in obj) {
var name = "polylineName"; // 定义动态的轨迹变量名
var passedPolyline = 'passedPolyline'
console.log("objKeyArr", i);
let color = ""; // 定义轨迹的颜色变量
let type = i.split("_"); // 获取轨迹的类型
if (type[1] == "green") {
// 根据轨迹的类型进行颜色的赋值
color = "green";
} else if (type[1] == "yellow") {
color = "yellow";
} else if (type[1] == "red") {
color = "red";
} else if (type[1] == "purple") {
color = "purple";
}
// 拼接轨迹的一维数组(用于运行轨迹动画)
lineArr = lineArr.concat(obj[i]);
// 配置轨迹
name = new AMap.Polyline({
map: this.map,
path: obj[i], // 轨迹的坐标数组
showDir: true,
strokeColor: color,
strokeWeight: 7, //线宽
lineJoin: "round",
});
passedPolyline = new AMap.Polyline({
map: this.map,
// path: obj[i],
strokeColor: color, //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
// 给折线添加点击事件
name.on("click", this.newpolylineClick);
this.nameArr.push(name);
}
// 小车图片
this.markerPolyline = new AMap.Marker({
map: this.map,
position: centerLnglat,
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-50, -13),
autoRotation: true,
angle: -90,
});
this.markerPolyline.on('moving', function (e) {
console.log('eeeee',e);
passedPolyline.setPath(e.passedPath);
// passedPolyline.setOptions({strokeColor:"#ff8033"})
});
},
// 点击暂停 开始
startClick() {
if (this.start === true && this.continueAnimation === false) {
this.start = false;
this.suspend = true;
let lineArr = this.ywData;
this.clearPolyline()
// passedPolyline传入path数据
this.markerPolyline.moveAlong(lineArr, 20000);
} else if (this.start === true && this.continueAnimation === true) {
this.markerPolyline.resumeMove();
this.start = false;
this.suspend = true;
} else {
this.start = true;
this.suspend = false;
}
},