vue使用cesium实现飞行，根据官网示例改写

代码加注释全部展示出来

<template>
  <div class="cesiumContainer">
    <div id="cesiumContainer">
        <div id="tracked"></div>
    </div>
  </div>
</template>

<script>
import "../../public/Cesium-1.71/Apps/Sandcastle/Sandcastle-header";
import {addToolbarButton} from "../../public/Cesium-1.71/Apps/Sandcastle/Sandcastle-header";
export default {
    name: 'cesiumContainer',
    data() {
        return{};
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            var viewer = new Cesium.Viewer("cesiumContainer", {
                infoBox: false, //禁用InfoBox小部件
                selectionIndicator: false, //禁用选择指示器
                shouldAnimate: true, // 启用动画
                navigationHelpButton: false, //是否显示右上角的帮助按钮
                fullscreenButton: false, //是否显示全屏按钮
                geocoder: false, //是否显示geocoder小器件，右上角查询按钮
                sceneModePicker: false, //是否显示3D/2D选择器
                homeButton: false,//是否展示home键
                timeline: true, //是否显示时间轴，必须展示，动画和时间轴是挂钩的,默认开启
                terrainProvider: Cesium.createWorldTerrain(),
            });

            //默认飞到指定地路线地点
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(
                    116.609119,
                    40.080861,
                    106493.719
                )
            });

            //根据日光位置照明
            viewer.scene.globe.enableLighting = true;

            //启用深度测试，使地形后面东西消失
            viewer.scene.globe.depthTestAgainstTerrain = true;

            //设置随机种子使随机数一致
            Cesium.Math.setRandomNumberSeed(3);

            //设置模拟时间界限开始-结束
            var start = Cesium.JulianDate.fromDate(new Date(2020, 7, 27, 9));
            var stop = Cesium.JulianDate.addSeconds(
            start,
            360,
            new Cesium.JulianDate()
            );

            //确保viewer在期望的时间
            viewer.clock.startTime = start.clone();
            viewer.clock.stopTime = stop.clone();
            viewer.clock.currentTime = start.clone();
            viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
            viewer.clock.multiplier = 10;

            //将时间线设置为模拟边界
            viewer.timeline.zoomTo(start, stop);

            //生成具有不同高度的随机圆形图案（经纬度加半径）
            function computeCirclularFlight(lon, lat, radius) {
                var property = new Cesium.SampledPositionProperty();
                for (var i = 0; i <= 360; i += 45) {
                    var radians = Cesium.Math.toRadians(i);
                    var time = Cesium.JulianDate.addSeconds(
                        start,
                        i,
                        new Cesium.JulianDate()
                    );
                    var position = Cesium.Cartesian3.fromDegrees(
                        lon + radius * 1.5 * Math.cos(radians),
                        lat + radius * Math.sin(radians),
                        Cesium.Math.nextRandomNumber() * 500 + 1750
                    );
                    property.addSample(time, position);

                    //为我们设置的每个样本生成一个点
                    viewer.entities.add({
                        position: position,
                        point: {
                            pixelSize: 8,
                            color: Cesium.Color.TRANSPARENT,
                            outlineColor: Cesium.Color.YELLOW,
                            outlineWidth: 3,
                        },
                    });
                }
                return property;
            }

            //计算实体位置属性
            var position = computeCirclularFlight(116.609119, 40.080861, 0.3);

            //创建实体
            var entity = viewer.entities.add({
                //将实体可用性设置为与模拟时间相同的间隔
                //availability用于设置时间轴信息，模型飞行和时间轴是相关联的，没有时间轴信息是不能展示飞行的
                availability: new Cesium.TimeIntervalCollection([
                    new Cesium.TimeInterval({
                    start: start,
                    stop: stop,
                    }),
                ]),
                
                //启用我们计算的位置
                //position定义飞行模型的位置信息和时间轴关系
                position: position,

                //根据位置移动自动计算方向
                orientation: new Cesium.VelocityOrientationProperty(position),

                //加载cesium平面模型作为实体
                model: {
                    uri: "../../images/Cesium_Air.glb",
                    minimumPixelSize: 64,
                },

                //将路径显示为以1秒增量采样的黄色线。
                path: {
                    resolution: 1,
                    material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.YELLOW,
                    }),
                    width: 10,
                },
            });

            //“添加”按钮在实体移动时跟踪它
            Sandcastle.addToolbarButton("追踪飞行轨迹", function () { 
                viewer.trackedEntity = entity;
            },'tracked');

            //添加按钮恢复上帝视角观察
            Sandcastle.addToolbarButton("恢复上帝视角",function(){
                viewer.trackedEntity = undefined;
                viewer.zoomTo(
                    viewer.entities,
                    new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90))
                );
            },'tracked');

            var clockViewModel=viewer.clockViewModel;
            clockViewModel.shouldAnimate=true;
            //添加暂停
            Sandcastle.addToolbarButton("暂停",function(){
                if(clockViewModel.shouldAnimate){
                    clockViewModel.shouldAnimate=false;
                }else{
                    clockViewModel.shouldAnimate=true;
                }
            },'tracked');

        }
    }

}
</script>

<style>
.cesiumContainer{
     height: 100%;
}
 
#cesiumContainer{
  height: 100%;
} 

.cesium-viewer-bottom{
    display: none !important;
}

</style>

飞机模型文件链接：https://pan.baidu.com/s/1WAkf3bKnToxCQkxvUJi3VA 提取码：48hd

运行效果