高德轨迹回放

高德地图轨迹回放的时候可不可以改变颜色啊, 图1是第一次加载,图二是轨迹回放后
482e7e80e295b3821a035b3036380be.pnga1972664c0dcde0646206569a142711.png!

    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;
      }
    },
阅读 885
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题