高德地图轨迹回放替换瓦片图轨迹回放

原瓦片图轨迹回放实现代码

    <div ref="mapBox" :style="{ position: 'fixed', top: (isTrack ? '100px' : '99999px'), width: '1920px', zIndex: 20 }">
      <div id="centerMap" style="height: 800px; position: relative;">
        <div class="close" @click="close">关闭</div>
      </div>
    </div>

    //引入js
    import L from 'leaflet'
    import 'leaflet-canvas-marker'
    import 'leaflet/dist/leaflet.css'

    //瓦片地图获取数据
    seeTrack(row) {
      const self = this
      let param = {
        userId: row.userId,
      };
      this.$axios
        .get(BASE_URL + "/statisticsMy/getUserTrack", {
          params: param,
        })
        .then((res) => {
          this.center = res.data.result.centerList;
          this.coordinates = res.data.result.resultList;
          this.pointList = res.data.result.resultList;
          if (this.pointList.length) {
            this.$nextTick(() => {
              this.map = L.map('centerMap', {
                center: [self.center[1], self.center[0]],
                zoom: 13
              })
              L.tileLayer('https://线上部署图片路径/mapImg/{z}/{x}/{y}.png', {
                minZoom: 5,
                maxZoom: 15
              }).addTo(this.map)

              layerGroup = L.canvasIconLayer({}).addTo(this.map)
              layerGroup.addOnClickListener(function (e, data) {
                // self.handleClick(data[0].data.options.data[3] || 0)
              })

              let newIcon = '';
              let newPonitList = []
              if (row.biz) {
                if (row.biz == "巡警") {
                  newIcon = policeman;
                }
                if (row.biz == "环卫") {
                  newIcon = environmental;
                }
                if (row.biz == "市政") {
                  newIcon = government;
                }
                if (row.biz == "外卖员" && row.name != "陈东磊") {
                  newIcon = take_out;
                } else if (row.biz == "外卖员" && row.name == "陈东磊") {
                  newIcon = take_out_down;
                }
                if (row.biz == "其他" || row.biz == "全部") {
                  newIcon = rest;
                }
              } else {
                newIcon = rest
              }


              Object.values(self.pointList).forEach(item => {
                newPonitList.push([
                  item[1], item[0]
                ])
                // console.log('22222222', item)
                let storeIcon = item[2] == 0
                  ? store01
                  : item[2] == 1
                    ? store02
                    : item[2] == 2
                      ? store03
                      : item[2] == 3
                        ? store04
                        : store05

                marker = L.marker([item[1], item[0]], {
                  icon: L.icon({
                    iconUrl: storeIcon,
                    iconSize: [24, 34],
                    iconAnchor: [8, 12.5]
                  }),
                  data: item
                })
                layerGroup.addLayer(marker)
              })

              let marker5 = L.Marker.movingMarker(
                newPonitList,
                10000, {
                autostart: true,
                loop: true,
                icon: L.icon({
                  iconUrl: newIcon,
                  iconSize: [44, 54],
                  iconAnchor: [22, 27]
                }),
              }).addTo(this.map)

              marker5.addStation(1, 2000)
              marker5.addStation(2, 2000)
              marker5.addStation(3, 2000)
              marker5.addStation(4, 2000)

              L.polyline(newPonitList, {
                color: '#999999'
              }).addTo(this.map)
            })
          } else {
            this.map = L.map('centerMap', {
              center: [24.328789, 109.434002],
              zoom: 13
            })
            L.tileLayer('https://线上部署图片路径/mapImg/{z}/{x}/{y}.png', {
              minZoom: 5,
              maxZoom: 15
            }).addTo(this.map)
          }
          this.isTrack = true;
        });
    },


    close() {
      this.isTrack = false;
      // 瓦片地图清除地图实例
      if (marker) { layerGroup.removeLayer(marker) }
      this.map.off()
      this.map.remove()
    },

//接口/statisticsMy/getUserTrack返回的res
{
    "data": {
        "success": true,
        "message": "",
        "code": 200,
        "result": {
            "resultList": [
                [
                    109.39425,
                    24.278527,
                    12,
                    "1815702125918621700"
                ],
                [
                    109.39425,
                    24.278527,
                    12,
                    "1815702125918621700"
                ],
                [
                    109.39425,
                    24.278527,
                    12,
                    "1815702125918621700"
                ],
                [
                    109.413627,
                    24.292133,
                    12,
                    "1815702125838929922"
                ],
                [
                    109.413627,
                    24.292133,
                    12,
                    "1815702125838929922"
                ],
                [
                    109.413627,
                    24.292133,
                    12,
                    "1815702125838929922"
                ],
                [
                    109.413627,
                    24.292133,
                    12,
                    "1815702125838929922"
                ],
                [
                    109.413627,
                    24.292133,
                    12,
                    "1815702125838929922"
                ],
                [
                    109.39425,
                    24.278527,
                    12,
                    "1815702125918621700"
                ],
                [
                    109.39425,
                    24.278527,
                    12,
                    "1815702125918621700"
                ],
                [
                    109.39425,
                    24.278527,
                    12,
                    "1815702125918621700"
                ],
                [
                    109.39425,
                    24.278527,
                    12,
                    "1815702125918621700"
                ]
            ],
            "centerList": [
                109.40232324535405,
                24.284196465201465
            ]
        },
        "timestamp": 1722496852662
    },
}

高德地图实现轨迹回放；大体逻辑一致，具体api更换

   <!-- 高德地图轨迹 -->
    <div ref="mapBox" :style="{ position: 'fixed', top: (isTrack ? '100px' : '99999px'), width: '1920px', zIndex: 20 }">
      <div id="centerMap" style="height: 800px; position: relative;"></div>
      <div class="close" @click="close">关闭</div>
    </div>

 // 高德地图轨迹形式
    seeTrack(row) {
      const self = this;
      let param = {
        userId: row.userId,
      };
      this.$axios
        .get(BASE_URL + "/statisticsMy/getUserTrack", {
          params: param,
        })
        .then((res) => {
          this.center = res.data.result.centerList;
          this.coordinates = res.data.result.resultList;
          this.pointList = res.data.result.resultList;
          if (this.pointList.length) {
            this.$nextTick(() => {
              //首先要在地图实例化之前添加AMap.MoveAnimation加载动画插件
              AMap.plugin('AMap.MoveAnimation', function () {
                // Initialize map only if not already done
                if (!self.map) {
                  //实例化地图
                  self.map = new AMap.Map("centerMap", {
                    resizeEnable: true,//缩放
                    center: [self.center[0], self.center[1]],
                    zoom: 13,
                  });
                }
                //定义移动icon
                let newIcon = '';
                let newPonitList = [];
                if (row.biz) {
                  if (row.biz == "巡警") {
                    newIcon = policeman;
                  } else if (row.biz == "环卫") {
                    newIcon = environmental;
                  } else if (row.biz == "市政") {
                    newIcon = government;
                  } else if (row.biz == "外卖员" && row.name != "陈东磊") {
                    newIcon = take_out;
                  } else if (row.biz == "外卖员" && row.name == "陈东磊") {
                    newIcon = take_out_down;
                  } else if (row.biz == "其他" || row.biz == "全部") {
                    newIcon = rest;
                  }
                } else {
                  newIcon = rest;
                }
                //遍历数据在地图中添加marker标记点
                Object.values(self.pointList).forEach(item => {
                  newPonitList.push([item[0], item[1]]);
                  let icons = [store01, store02, store03, store04, store05];
                  let storeIcon = icons[item[2]] || store05;

                  // Check if map is initialized before adding markers
                  if (self.map) {
                    new AMap.Marker({
                      map: self.map,
                      position: [item[0], item[1]],
                      icon: storeIcon,//icon图标
                      offset: [-12, -30],//偏移量
                    });
                  }
                });
                //根据经纬度绘制路径线
                if (self.map) {
                  new AMap.Polyline({
                    map: self.map,
                    path: newPonitList,
                    showDir: true,
                    strokeColor: "#28F",
                    strokeWeight: 6,
                  });
                  //在地图中添加移动icon
                  let peopleMarker = new AMap.Marker({
                    map: self.map,
                    position: newPonitList[0],
                    icon: new AMap.Icon({
                      size: new AMap.Size(44, 54),
                      image: newIcon,
                      imageSize: new AMap.Size(44, 54)
                    }),
                    offset: [-22, -27],
                  });
                  //执行IIFE让移动图标自动执行
                  (function startAnimation() {
                    peopleMarker.moveAlong(newPonitList, {
                      duration: 4000,//标记沿路径移动的总时长
                      autoRotation: false,//设置是否根据路径自动调整标记的旋转角度
                      circlable: true,//
                    });
                  })();
                }
              });
            });
          }
          this.isTrack = true;
        });
    },
    close() {
      this.isTrack = false;
      // 高德地图清除地图实例
      if (this.map) {
        this.map.clearMap(); // 清除地图上的所有图层和标记
        this.map = null;
      }
    },

高德轨迹回放参考

轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

补充一下查询到的移动图标的属性api

moveAlong 方法的属性

1. duration

   • 作用: 设置标记沿路径移动的总时长，单位为毫秒。
   • 默认值: 路径点之间的距离乘以 10 的时间（如果未指定）。
   • 示例: duration: 500 表示移动将花费 500 毫秒。

2. autoRotation

   • 作用: 设置是否根据路径自动调整标记的旋转角度，使其沿着路径的方向移动。
   • 默认值: false。
   • 示例: autoRotation: true 表示标记会自动旋转以跟随路径方向。

3. circlable

   • 作用: 是否循环移动。设置为 true 时，标记在到达路径终点后会重新回到起点，继续移动。
   • 默认值: false。
   • 示例: circlable: true 表示标记会沿着路径不断循环移动。

4. delay

   • 作用: 设置延迟时间，单位为毫秒。标记将在指定时间后开始移动。
   • 默认值: 0。
   • 示例: delay: 1000 表示标记会在 1 秒后开始移动。

5. pathIndex

   • 作用: 设置从路径数组的哪个索引位置开始移动。
   • 默认值: 0。
   • 示例: pathIndex: 2 表示标记将从路径的第 3 个点开始移动。

6. durationFactor

   • 作用: 设置一个影响时长的系数，如果设为 0.5，则移动的时长将缩短为原来的一半。
   • 示例: durationFactor: 0.5 将缩短移动时间。