使用vue + 高德 实现轨迹的播放 加速 减速 停止 功能

@TOC使用vue + 高德 实现轨迹实时运动绘制 加速 减速 停止 功能

1.在public 下的html 文件中引入高德

<script type="text/javascript"  src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的秘钥&plugin=AMap.MouseTool,AMap.PolyEditor"></script>
//&plugin=插件名称 不用的可以不写上去!

2.在vue.config中引入AMap

configureWebpack: {
    externals: {
      AMap: "AMap" // 高德地图配置
    }

3.在vue页面 html 部分

<template>
  <div class=" w-100 h-100">
    <div class="f-r">
      <el-button @click="startAnimation">开始动画</el-button><el-button @click="pauseAnimation">暂停动画</el-button
      ><el-button @click="resumeAnimation">继续动画</el-button><el-button @click="stopAnimation">停止动画</el-button>
      <el-button @click="startAdd">加速动画</el-button><el-button @click="startRed">减速动画</el-button>
    </div>
    <div id="container" class=" w-100"></div>
  </div>
</template>

4.js部分

<script>
import AMap from "AMap";

export default {
  data() {
    return {
      lineArr: [ //接口假数据
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528],
        [116.480151, 39.998453],
        [116.480784, 39.998302],
        [116.481149, 39.998184],
        [116.481573, 39.997997],
        [116.481863, 39.997846],
        [116.482362, 39.997718],
        [116.483633, 39.998935],
        [116.48367, 39.998968],
        [116.484648, 39.999861],
        [116.484648, 39.999861],
        [116.48367, 39.998968],
        [116.483633, 39.998935],
        [116.482362, 39.997718]
      ],
      lineArr1: [
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528],
        [116.480151, 39.998453],
        [116.480784, 39.998302],
        [116.481149, 39.998184],
        [116.481573, 39.997997],
        [116.481863, 39.997846],
        [116.482362, 39.997718],
        [116.483633, 39.998935],
        [116.48367, 39.998968],
        [116.484648, 39.999861],
        [116.484648, 39.999861],
        [116.48367, 39.998968],
        [116.483633, 39.998935],
        [116.482362, 39.997718]
      ],
      passline: [], //通过路径的数组
      passline1: [], //未通过路径数组
      markerSpeed: 50, //速度
      polyline1: [], //重绘通过路径轨迹的集合
      len: null //marker移动中路径数组
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.initMap();
    this.initroad();
  },

  methods: {
    initMap() {
      //初始化地图
      this.map = new AMap.Map("container", {
        resizeEnable: true, //窗口大小调整
        center: [116.478935, 39.997761], //中心 firstArr: [116.478935, 39.997761],
        zoom: 20
      });
      this.marker = new AMap.Marker({
        map: this.map,
        position: [116.478935, 39.997761],
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13), //调整图片偏移
        autoRotation: true, //自动旋转
        angle: -90 //图片旋转角度
      });
    },
    initroad() {
      let that = this;
      //绘制还未经过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色--蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色-绿色
        //path: this.lineArr,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      this.marker.on("moving", e => {
        that.len = e.passedPath;
        passedPolyline.setPath(e.passedPath);
      });
      this.map.setFitView(); //合适的视口
    },
    startAdd() {
      let that = this;
      if (this.markerSpeed < 1000) {
        this.markerSpeed = this.markerSpeed + 100;

        this.passline = this.lineArr1.slice(0, this.len.length - 1);
        this.passline1 = this.lineArr1.slice(this.len.length - 2, this.lineArr1.length);
        this.lineArr1 = this.passline1;

        let polyline = new AMap.Polyline({
          map: that.map,
          path: that.passline,
          showDir: true,
          strokeColor: "#AF5", //线颜色--蓝色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 //线宽
          // strokeStyle: "solid"  //线样式
        });
        this.polyline1.push(polyline);
        this.marker.moveAlong(this.passline1, this.markerSpeed);
      } else {
        this.speedCount = 5;
      }
    },
    //减速
    startRed() {
      let that = this;
      if (this.markerSpeed > 50) {
        this.markerSpeed = this.markerSpeed - 100;
        console.log(this.speedCount, this.markerSpeed, "减速");

        this.passline = this.lineArr1.slice(0, this.len.length);
        this.passline1 = this.lineArr1.slice(this.len.length - 1, this.lineArr1.length);
        this.lineArr1 = this.passline1;

        let polyline = new AMap.Polyline({
          map: that.map,
          path: that.passline,
          showDir: true,
          strokeColor: "#AF5", //线颜色--蓝色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 //线宽
          // strokeStyle: "solid"  //线样式
        });
        this.polyline1.push(polyline);
        this.marker.moveAlong(this.passline1, this.markerSpeed);
      }
    },
    //开始运动      每次点击运动的时候让他回复到初始速度

    startAnimation() {
      if (this.polyline1.length != 0) {
        this.map.remove(this.polyline1);
        this.polyline1 = [];
      }
      this.marker.moveAlong(this.lineArr, this.markerSpeed);
    },
    pauseAnimation() {
      this.marker.pauseMove();
    },
    resumeAnimation() {
      this.marker.resumeMove();
    },
    stopAnimation() {
      this.marker.stopMove();
    }
  }
};
</script>