Vue项目中使用高德地图规制车辆轨迹和轨迹回放实现方法

效果图

相关代码

<template>
 
</template>

<script>
<div class="main">
        <div class="title">历史轨迹</div>
        <div id="container">
          <div class="card">
            <a-button class="btn" value="轨迹回放" @click="startAnimation">
              轨迹回放
            </a-button>
            <a-button class="btn" @click="closeAnimation">关闭</a-button>
          </div>
        </div>
      </div>

export default {
  name: "vehiclePath",
  data() {
    return {
      map: null,
      lineArr: [], // 轨迹数据
      marker: null, // 标记
      };
  },

  mounted() {
   // 1.获取轨迹数据
    util.apiPost(globalUrl.getVehiclePath, params).then((res) => {
      if (res.code !== 99) return;
   const { coordinateList} = res.data;
   this.lineArr = coordinateList; 
      this.initMap();
  },

  methods: {
    // 2.初始化地图
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true, //设置尺寸是否可调节
        mapStyle: "amap://styles/whitesmoke", // 设置地图的地图样式，可以使用官方地图样式和自定义地图样式
        center:
          this.lineArr[
            this.lineArr.length % 2 === 0
              ? this.lineArr.length / 2
              : (this.lineArr.length + 1) / 2
          ], // 设置地图的中心点
        zoom: 11, //设置地图的缩放级别
      });


       // 3.创建一个 Icon
       // 3.1设置icon 的image
      let iconImageUrl = require("@/assets/images/move_car.png");
      //  3.2 将iconImageUrl传入到icon 中
      let carIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(80, 80),
        // 图标的取图地址
        image: iconImageUrl,
        // 图标所用图片大小
        imageSize: new AMap.Size(80, 60),
      });

      // 4.添加点标记maker
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.lineArr[0], //基点位置
        icon: carIcon, // 传入刚才创建的icon, 也可以写icon url地址
        offset: new AMap.Pixel(-26, -13), // 相对于基点的偏移位置
        autoRotation: true, // 设置是否自动旋转
        angle: -180, // 设置旋转角度
      });

      this.initPath(); // 在初始化地图中调用初始化轨迹函数
    },

    // 4.初始化轨迹
    initPath() {
      // 4.1以 icon URL 的形式创建一个途经点标记 --经过位置图标
      var viaMarker = new AMap.Marker({
        position: this.lineArr[10],
        // 4.2将一张图片的地址设置为 icon
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
        // 4.3 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30),
      });

      // 4.4创建一个起始位置Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3),
      });

      // 4.5创建一个起始位置点标记并传入起始位置Icon
      var startMarker = new AMap.Marker({
        position: this.lineArr[0],
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30),
      });

      // 4.6创建一个结束位置icon
      var endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3),
      });

      // 4.7创建一个结束位置点标记并传入结束位置Icon
      var endMarker = new AMap.Marker({
        position: this.lineArr[this.lineArr.length - 1],
        icon: endIcon,
        offset: new AMap.Pixel(-13, -30),
      });

      // 4.8将 三个点标记 添加到地图
      this.map.add([viaMarker, startMarker, endMarker]);

      // 4.9绘制还未经过的路线
      let polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true, // 是否延路径显示白色方向箭头,默认false
        strokeColor: "#5F98FF", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //轮廓线样式，实线:solid，虚线:dashed
      });

      // 4.91 绘制路过了的轨迹
      let passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色
        strokeWeight: 6, //线宽
      });

    // 4.92 点标记移动事件
      this.marker.on("moving", function (e) {
        passedPolyline.setPath(e.passedPath);
      });

      this.map.setFitView(); // 合适的视口
    },
    // 5. 点击轨迹回放
    startAnimation() {
      this.marker.moveAlong(this.lineArr, 5000);
      // console.log(this.toStatus);
    },
    
    // 6. 关闭轨迹回放
    closeAnimation() {
      this.$router.go(-1);
      // window.history.back()
      // window.history.go(-1)
    },
  },
};
</script>