vue3 cesium Build a Flight Tracker（构建航班跟踪器）

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

<script>
    // import * as Cesium from 'cesium/Cesium'
    let Cesium = require('cesium/Cesium');
    export default {
        name: "AirCesium",
        methods:{
            loadmap() {
                //添加默认access token
                Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZjlhMzkyMS00NDA5LTQ0NjgtOWY1Zi0xMTY1OGU0YWY1M2EiLCJpZCI6MTU5MzYzLCJpYXQiOjE2OTE1NjY1NDh9.EDUo2Z9IaKanf5bx_8MgeDr4nQE-xMm1AavKw_7JiEA';

                // 创建观察器，并附加到id为“cesiumContainer”的div上
                const viewer = new Cesium.Viewer('cesiumContainer', {
                    // 增加Cesium世界地形数据
                        terrainProvider: Cesium.createWorldTerrain(),
                    });

                // 将osm建筑物的3D瓦片数据添加进观察器中
                viewer.scene.primitives.add(Cesium.createOsmBuildings());

                // //通过经纬度,高度 设置初始界面位置
                // viewer.camera.flyTo({
                //     destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
                //     orientation: {
                //         heading: Cesium.Math.toRadians(0.0),
                //         pitch: Cesium.Math.toRadians(-15.0),
                //     }
                // });

                // 隐藏 底部水印
                viewer.cesiumWidget.creditContainer.style.display = "none";

                //从飞机身上收集到的雷达坐标.用经纬度和高度来描述飞机在哪
                const flightData = JSON.parse('官网去复制https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/');

                /* 初始化取景器计时器
    * 设所有雷达坐标的间隔均为30s，以此计算总的航班持续时间
    * 算出航班的开始时间和结束时间，其中开始时间为已知的航班出发时间，结束时间是开始时间和总持续时间的总和
    * 通过将航班的开始和结束时间设置为起点和终点来初始化取景器的计时器
    * 同时将取景器的当前时间设置为计时器开始时间 */

                //时间间隔30s
                const timeStepInSeconds = 30;
                //总的时间=时间间隔*（雷达点数-1）
                const totalSeconds = timeStepInSeconds * (flightData.length - 1);
                //开始时间 使用根据国际标准ISO8601时间转换的儒略历时间
                const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");
                //结束时间=开始时间+总的时间
                const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate());
                // 生成开始时间的副本，并令其为取景器计时器的起点
                viewer.clock.startTime = start.clone();
                viewer.clock.stopTime = stop.clone();
                //令取景器的当前时间为开始时间
                viewer.clock.currentTime = start.clone();
                //用开始时间和结束时间设置取景器的时间线
                viewer.timeline.zoomTo(start, stop);
                // 将播放速度设置为50倍
                viewer.clock.multiplier = 50;
                // Start playing the scene.允许加速播放
                viewer.clock.shouldAnimate = true;

                //取样位置 相当于一个集合
                const positionProperty = new Cesium.SampledPositionProperty();

                //为每个雷达坐标建立对应时间和位置信息的实体点
                for (let i = 0; i < flightData.length; i++) {
                    const dataPoint = flightData[i];

                    //当前点的时间和位置
                    const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate());
                    const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height);

                    //添加位置，和时间对应
                    positionProperty.addSample(time, position);
                    //添加实体点
                    viewer.entities.add({
                        description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
                        position: position,
                        point: { pixelSize: 10, color: Cesium.Color.GREEN }
                    });
            }

                async function loadModel() {
                    // 添加飞机模型路径
                    const airplaneUri='/Cesium_Air.glb'//使用本地的资源
                    //const airplaneUri = await Cesium.IonResource.fromAssetId(2134306);//网不好的话就不容易拿到在线资源
                    //将飞机模型添加到轨迹上
                    const airplaneEntity = viewer.entities.add({
                        //和时间轴关联
                        availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: start, stop: stop }) ]),
                        //设置位置
                        position: positionProperty,
                        //模型数据
                        model: { uri: airplaneUri },
                        //  根据所提供的速度计算模型朝向
                        orientation: new Cesium.VelocityOrientationProperty(positionProperty),
                        // 飞行路径
                        path: new Cesium.PathGraphics({ width: 3 })
                    });
                    // 令取景器视角固定跟随飞机
                    viewer.trackedEntity = airplaneEntity;
                }
                // 上传飞机模型
                loadModel();
            }
        },
        mounted() {
            this.loadmap();
        }
    }
</script>

<style scoped>
    #cesiumContainer{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

注意：雷达点数据Build a Flight Tracker – Cesium