Cesium多轨迹飞行

插件封装

import * as Cesium from 'cesium';
interface IPosition {
    x: number;
    y: number;
    z: number;
}
interface IOptions {
    viewer: Cesium.Viewer;
    data: IPosition[][];
    showPath?: boolean;
}
export class AnimatePath {
    viewer: Cesium.Viewer;
    data: IPosition[][];
    dataSource: Cesium.CustomDataSource;
    showPath: boolean;
    type: 'pause' | 'stop' | 'play';
    clock: Cesium.Clock;
    constructor(options: IOptions) {
        const { viewer, data, showPath = true } = options;
        this.viewer = viewer;
        this.data = data;
        this.showPath = showPath;
        this.dataSource = new Cesium.CustomDataSource('airConnection');
        viewer.dataSources.add(this.dataSource);
        this.type = 'play';
        this.clock = new Cesium.Clock();
        this.init();
    }

    init() {
        const { data, dataSource, clock } = this;

        data.forEach(item => {
            const property = new Cesium.SampledPositionProperty();
            item.forEach((p, i) => {
                const julianDate = Cesium.JulianDate.addSeconds(clock.currentTime, i * 10, new Cesium.JulianDate());
                let position = Cesium.Cartesian3.fromDegrees(p.x, p.y, p.z);
                // 添加位置，和时间对应
                property.addSample(julianDate, position);
            });

            dataSource.entities.add({
                position: property,
                orientation: new Cesium.VelocityOrientationProperty(property),

                model: {
                    scale: 5,
                    uri: '/models/fly.glb',
                    runAnimations: true, //指定是否应启动模型中指定的glTF动画
                },
                path: {
                    resolution: 60, //指定在对该位置进行采样时要移动的最大秒数
                    leadTime: 0, //显示path前面的秒数
                    trailTime: 1000, //显示path尾部的秒数
                    material: new Cesium.PolylineGlowMaterialProperty({
                        //发光线
                        glowPower: 1,
                        color: Cesium.Color.ORANGE,
                    }),
                    width: 3,
                },
            });
        });
    }
    stop() {
        this.type = 'pause';
        this.viewer.clock.shouldAnimate = false;
    }
    start() {
        this.type = 'play';
        this.viewer.clock.shouldAnimate = true;
    }
    destroy() {
        this.type = 'stop';

        this.dataSource.entities.removeAll();
        this.viewer.dataSources.remove(this.dataSource);
    }
}

使用方法

<script setup lang='ts'>

import CesiumBox from '@/components/CesiumBox/index.vue'
import { useViewerStore } from '@/store';
import * as Cesium from 'cesium';
import { onUnmounted, onMounted, watch } from 'vue';
import * as dat from 'dat.gui';
import { AnimatePath } from '.';
import { CesiumMove } from './tark'
const store = useViewerStore();
const config = {
    heading: 0,
    pitch: 0,
    roll: 0
}
let gui: dat.GUI;
let animtePath: AnimatePath;
watch(store, val => {
    const viewer = store.viewer;
    if (!viewer) return;
    const position = Cesium.Cartesian3.fromDegrees(
        120.646096,
        31.325343, 10000)
    viewer.camera.setView({ destination: position })
    const line = [
        { x: 120.646096, y: 31.325343, z: 50, },
        { x: 120.65352, y: 31.327113, z: 60 },
        { x: 120.657719, y: 31.328523, z: 70 },
        { x: 120.651869, y: 31.333439, z: 80 },
        { x: 120.641838, y: 31.333062, z: 90 },
        { x: 120.638395, y: 31.341729, z: 100 },

    ]

    const line1 = [
        { x: 120.627054, y: 31.322377, z: 50 },
        { x: 120.625903, y: 31.32984, z: 60 },
        { x: 120.616029, y: 31.328252, z: 70 },
        { x: 120.616029, y: 31.328252, z: 70 },
        { x: 120.612168, y: 31.348659, z: 70 },

    ]

    animtePath = new AnimatePath({ viewer, data: [line, line1] })
})
onMounted(async () => {


})
onUnmounted(() => {
    console.log(1)
    if (gui) gui.destroy();
})
const start = () => {
    const viewer = store.viewer;
    if (viewer) {
        // viewer.clock.shouldAnimate = true;
        animtePath.start()
    }

}
const pause = () => {
    const viewer = store.viewer;
    if (viewer) {
        // viewer.clock.shouldAnimate = false;
        animtePath.stop()
    }

}
const destory = () => {
    animtePath.destroy();
}

</script>
<template>
    <div class="box">
        <CesiumBox />
        <div class="action-wrap">
            <el-button @click="start">开始</el-button>
            <el-button @click="pause">暂停</el-button>
            <el-button @click="destory">销毁</el-button>
        </div>
    </div>
</template>
<style  lang="less"  scoped> .box {
     width: 100%;
     height: 100%;
     position: relative;

     .action-wrap {
         position: absolute;
         top: 0;
         left: 0;
     }
 }
</style>