实时走航模式完成

riku

2024-05-12 fb876cbc3b21035125668f2db6ee84e47efb544f

 src/components/animation/HistoricalTrajectory.vue

@@ -17,7 +17,7 @@
        </div>
        <div class="label-date margin-left-2">
          <span class="label-date-title">倍速</span>
          <el-select v-model="speed" size="small" class="w-80">
          <el-select v-model="speed" size="small" class="w-60">
            <el-option label="1.0X" :value="1" />
            <el-option label="4.0X" :value="4" />
            <el-option label="8.0X" :value="8" />
@@ -29,15 +29,37 @@
  </BaseCard>
</template>
<script>
import { mapActions } from 'pinia';
import { MapAnimation } from '@/utils/map/animation';
import { FactorDatas } from '@/model/FactorDatas';
import { useMapAnimationStore } from '@/stores/map-animation';

const mapAnimation = new MapAnimation();

export default {
  props: {},
  emits: ['change'],
  props: {
    factorDatas: FactorDatas,
    factorType: String
  },
  emits: ['change', 'stop'],
  data() {
    return {
      speed: 1,
      // 动画状态，0：停止；1：播放；2：暂停
      status: 0
    };
  },
  watch: {
    speed(nV, oV) {
      if (nV != oV) {
        this.changeSpeed(nV);
      }
    },
    factorType(nV, oV) {
      if (nV != oV) {
        mapAnimation.setFactorType(nV);
      }
    }
  },
  computed: {
    btnStop() {
@@ -53,26 +75,61 @@
    }
  },
  methods: {
    ...mapActions(useMapAnimationStore, ['start', 'pause', 'stop']),
    handleStop() {
      if (this.status != 0) {
        this.status = 0;
        this.stopAnimation();
        this.handleChange();
      }
    },
    handlePlayOrPause() {
      if (this.status == 1) {
        this.status = 2;
        this.pauseAnimation();
      } else {
        this.status = 1;
        this.startAnimation();
      }
      this.handleChange();
    },
    handleChange() {
      console.log(this.status);
      this.$emit('change', this.status);
    },

    newTimeTask() {
      mapAnimation.setDynamicSpeed(false); //关闭动态绘制速度调整
      mapAnimation.moveAnimation(this.factorDatas, this.factorType);
    },
    startAnimation() {
      this.changeSpeed(this.speed);
      if (!mapAnimation.runStatus()) {
        this.newTimeTask();
      } else {
        mapAnimation.start();
      }
      this.start();
    },
    changeSpeed(speed) {
      mapAnimation.changeSpeed(speed);
    },
    pauseAnimation() {
      mapAnimation.pause();
      this.pause();
    },
    stopAnimation() {
      mapAnimation.stop();
      this.stop();
    }
  },
  mounted() {}
  mounted() {
    mapAnimation.setOnStopCallback(() => {
      this.$emit('stop');
    });
  },
  unmounted() {
    mapAnimation.stop();
  }
};
</script>
<style scoped>