riku
2025-09-11 307b17ef15c73a071912a262834f2a5f68e1fa87
src/utils/map/animation.js
@@ -2,13 +2,16 @@
import calculate from '@/utils/map/calculate';
import Layer from '@/utils/map/3dLayer';
import sector from '@/utils/map/sector';
import map from '@/utils/map/index_old';
import { map } from '@/utils/map/index_old';
import util from '@/utils/map/util';
import car_driving from '@/assets/mipmap/car_driving.png';
import boat_driving from '@/assets/mipmap/boat_driving.png';
function MapAnimation() {
  // 非连续坐标点最大距离(米)
  this.maxD = 500;
  // 当前绘制的监测因子类型
  this.factorType = 0;
  this.factorType;
  this.factorDatas;
  // 载具类型
  this.vehicleType = 0; // 0: 车辆;1:无人机:2:无人船
@@ -18,6 +21,7 @@
  this._fps = this.frameAnimation.fps;
  // 绘制图形缓存
  this.moveViews = {};
  this.clear = true;
}
MapAnimation.prototype = {
@@ -79,7 +83,7 @@
      if (i == endIndex || i == factorDatas.length() - 1) {
        break;
      }
      // 动画轨迹
      // 动画轨迹(已绘制部分)
      var animationData = factorDatas.getByIndex(0, i + 1);
      // 路径点
@@ -101,19 +105,19 @@
      var d = distance / count;
      // 每个fps对应的实际时长(默认1秒)
      var t = 1;
      // 两点间不连续时
      // 两点间不连续时,使用默认时长,避免
      if (distance > this.maxD) {
        count = 4 * this._fps;
        count = this.frameAnimation.taskPeriod * this._fps;
        d = distance / count;
        t = duration / (count / this._fps);
      }
      // 监测数据
      // 监测数据(待绘制数据点,在已绘制部分和该数据点之间,插入动画帧数据点)
      // var fData1 = factorDatas.getByIndex(i, i + 1)
      var fData2 = factorDatas.getByIndex(i + 1, i + 2);
      // 计算动画轨迹
      for (let i = 0; i < count - 1; i++) {
      for (let i = 0; i < count; i++) {
        // path
        var length = d * (i + 1);
        if (isNaN(angle)) {
@@ -131,7 +135,7 @@
        }
        animationData.times.push(time);
      }
      // factor
      // 给每个监测因子进行插帧
      for (const key in animationData.factor) {
        var factor = animationData.factor[key];
        factor.insertFrame(fData2.factor[key], count, distance <= this.maxD);
@@ -146,26 +150,25 @@
        animationData,
        function (data, index, count) {
          var length = data.length();
          var start = length - count + 1;
          var start = length - count;
          // 1.获取数据
          var d = data.getByIndex(0, start + index + 1);
          var f = d.factor[that.factorType + 1 + ''];
          var f = d.factor[that.factorType];
          // 2.绘制图形
          if (length > count || index > 0) {
            // 3d图形
            // var lnglat = d.lnglats_GD[d.lnglats_GD.length - 1];
            Layer.drawMesh(d, f);
            // MapUtil.drawLine(lnglat)
            // 风向风速
            sector.drawSector(d, start + index);
            // if (d.factor['17'] != undefined && d.factor['16'] != undefined) {
            //   var windDir = d.factor['17'].datas;
            //   windDir = windDir[windDir.length - 1].factorData;
            //   var windSpeed = d.factor['16'].datas;
            //   windSpeed = windSpeed[windSpeed.length - 1].factorData;
            //   MapUtil.drawSector4(lnglat, windDir, windSpeed);
            // }
            sector.drawSectorAna(d, start + index);
            // 执行监听函数
            if (typeof that.OnEachFrameCallback === 'function') {
              that.OnEachFrameCallback(d, start + index);
            }
            // 绘制3D图形时,最少需要2个点才可绘制图形
            // 因此此处索引只到倒数第二个点就结束,此时执行这段任务结束的监听回调
            if (typeof that.OnEachTaskEndCallback === 'function') {
              that.OnEachTaskEndCallback(d);
            }
          }
          var pos = d.lnglats_GD[d.lnglats_GD.length - 1];
@@ -207,9 +210,27 @@
    this.start();
  },
  /**
   * 设置每一帧的监听函数
   * @param {Function} callback
   */
  setOnEachFrameCallback(callback) {
    this.OnEachFrameCallback = callback;
  },
  /**
   * 设置每一段任务结束的监听函数
   * @param {Function} callback
   */
  setOnEachTaskEndCallback(callback) {
    this.OnEachTaskEndCallback = callback;
  },
  /*******************************动画任务逻辑 -start ******************************/
  start: function () {
    sector.clearSector();
    if (this.frameAnimation.isStop) {
      sector.clearSector();
    }
    this.frameAnimation.start();
  },
  changeSpeed: function (speed) {
@@ -221,12 +242,14 @@
  stop: function () {
    this.factorDatas = undefined;
    this.frameAnimation.addOnNextTasks(undefined);
    // this.OnEachFrameCallback = undefined;
    // this.OnEachTaskEndCallback = undefined;
    this.frameAnimation.stop();
    this._clearMap();
  },
  setOnStopCallback: function (callback) {
    this.frameAnimation.setOnStopCallback(
      function () {
        this._clearMap();
        callback();
      }.bind(this)
    );
@@ -249,6 +272,8 @@
  /*******************************动画任务逻辑 -end ******************************/
  _clearMap: function () {
    if (!this.clear) return;
    var list = [];
    for (const key in this.moveViews) {
      list.push(this.moveViews[key]);
@@ -264,16 +289,16 @@
      var url;
      switch (this.vehicleType) {
        case 0:
          url = './asset/mipmap/car_driving.png';
          url = car_driving;
          break;
        case 1:
          url = './asset/mipmap/car_driving.png';
          url = car_driving;
          break;
        case 2:
          url = './asset/mipmap/boat_driving.png';
          url = boat_driving;
          break;
        default:
          url = './asset/mipmap/car_driving.png';
          url = car_driving;
          break;
      }
      // var url = "./asset/mipmap/car_offline.png";
@@ -292,26 +317,33 @@
      //     break;
      // }
      // eslint-disable-next-line no-undef
      var icon = new AMap.Icon({
        // eslint-disable-next-line no-undef
        size: new AMap.Size(60, 30),
        // eslint-disable-next-line no-undef
        imageSize: new AMap.Size(54, 21),
        image: url
        // imageOffset: new AMap.Pixel(-16, -16) // 相对于基点的偏移位置
      });
      // eslint-disable-next-line no-undef
      var car = new AMap.Marker({
        icon: icon,
        position: lnglat, // 基点位置
        // eslint-disable-next-line no-undef
        offset: new AMap.Pixel(-20, -15) // 相对于基点的偏移位置
      });
      MapUtil._map.add(car);
      map.add(car);
      this.moveViews['car'] = car;
      // 时间
      // eslint-disable-next-line no-undef
      var text = new AMap.Text({
        text: time,
        position: lnglat,
        // eslint-disable-next-line no-undef
        offset: new AMap.Pixel(5, 20),
        style: {
          'font-size': '13px',
@@ -324,10 +356,10 @@
          padding: '0 4px'
        }
      });
      MapUtil._map.add(text);
      map.add(text);
      this.moveViews['text'] = text;
    } else {
      MapUtil.setCenter(lnglat);
      util.setCenter(lnglat);
      this.moveViews['car'].setPosition(lnglat);
      this.moveViews['text'].setPosition(lnglat);
      this.moveViews['text'].setText(time);
@@ -386,4 +418,9 @@
  }
};
export { MapAnimation };
const realTimeMapAnimation = new MapAnimation();
// 开启动态绘制速度
realTimeMapAnimation.setDynamicSpeed(true, 4);
// realTimeMapAnimation.clear = false;
export { realTimeMapAnimation, MapAnimation };