Smart_platform_ui/src/components/trackPlayback.vue

<template>
  <el-dialog
      title="车辆轨迹"
      append-to-body
      custom-class="dialog_two"
      :visible.sync="dialogVisible"
      lock-scroll
      width="80%">
    <div id="container" v-if="dialogVisible"></div>
    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">
      <h4>轨迹回放控制</h4>
      <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>
        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>
      </div>
      <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>
        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>
      </div>
    </div>
    <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>
      <span style="color: red">暂无该车辆轨迹信息</span>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "trackPlayback",
  props: {
    dialogVisible: {
      type: Boolean
    },
    lineArr:Object,
  },
  data(){
    return{
      map: null,
      marker: null
    }
  },
  beforeDestroy() {
    this.map && this.map.destroy();
  },
  methods:{
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
        zoom: 17
      });
      let icon = new AMap.Icon({
        size: new AMap.Size(52, 26), // 图标尺寸
        image: 'https://webapi.amap.com/images/car.png',
        imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
      });
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
        // icon: "https://webapi.amap.com/images/car.png",
        icon: icon,
        markerMeta: new AMap.Size(28, 28),
        offset: new AMap.Pixel(-26, -15),
        autoRotation: true,
        angle: -15
      });
      // 绘制轨迹
      let polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      let passedPolyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        strokeColor: "#AF5", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });

      this.marker.on("moving", function (e) {
        passedPolyline.setPath(e.passedPath);
      });

      this.map.setFitView();
    },
    startAnimation() {
      this.marker.moveAlong(this.lineArr, 100000);
    },
    pauseAnimation() {
      this.marker.pauseMove();
    },
    resumeAnimation() {
      this.marker.resumeMove();
    },
    stopAnimation() {
      this.marker.stopMove();
    },
  }
}
</script>

<style scoped src="../styles/demo-center.css"></style>
<style scoped>
#container {
  height: 80vh;
  width: 100%;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>
<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 0px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;
  }
}

.content {
}

::v-deep .el-dialog {
  margin-top: 5vh !important;
  margin-bottom: 0 !important;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
</style>