update：添加飞机的动态案例

src/examples/CodeMap.js

@@ -12,6 +12,7 @@ import vueCodeSnow from '@/examples/weather/snow/snow.vue?raw'
 import vueCodeFog from '@/examples/weather/fog/fog.vue?raw'
 import vueCodeWaterSurface from '@/examples/weather/waterSurface/waterSurface.vue?raw'
 
+import vueCodeAircraft from '@/examples/movingTarget/aircraft/aircraft.vue?raw'
 import vueCodeRocket from '@/examples/movingTarget/rocket/rocket.vue?raw'
 
 const vueCodeMap = {
@@ -28,6 +29,7 @@ const vueCodeMap = {
     雾: vueCodeFog,
     水面: vueCodeWaterSurface,
 
+    飞机: vueCodeAircraft,
     火箭发射: vueCodeRocket
 }
 

src/examples/FunctionMap.js

@@ -12,6 +12,7 @@ import functionCodeSnow from '@/examples/weather/snow/snow-function.js?raw'
 import functionCodeFog from '@/examples/weather/fog/fog-function.js?raw'
 import functionCodeWaterSurface from '@/examples/weather/waterSurface/waterSurface-function.js?raw'
 
+import functionCodeAircraft from '@/examples/movingTarget/aircraft/aircraft-function.js?raw'
 import functionCodeRocket from '@/examples/movingTarget/rocket/rocket-function.js?raw'
 
 const functionCodeMap = {
@@ -28,6 +29,7 @@ const functionCodeMap = {
     雾: functionCodeFog,
     水面: functionCodeWaterSurface,
 
+    飞机: functionCodeAircraft,
     火箭发射: functionCodeRocket
 }
 

src/examples/movingTarget/aircraft/aircraft-function.js

+export function addAircraft() {
+    const script = document.createElement('script');
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
+    script.onload = () => {
+        window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
+
+        const viewer = new window.Cesium.Viewer('cesiumContainer', {
+            infoBox: false,
+            shouldAnimate: true
+        });
+
+        const czml = [
+            {
+                id: "document",
+                name: "SpaceX",
+                version: "1.0",
+                clock: {
+                  interval: "2019-08-28T04:00:00Z/2019-08-28T04:17:33Z",
+                  currentTime: "2019-08-28T04:00:00.00Z",
+                  multiplier: 1,
+                  range: "LOOP_STOP",
+                  step: "SYSTEM_CLOCK_MULTIPLIER"
+                 }
+            },
+            {
+                id: "path",
+                name: "path for Spacex",
+                description: "<p>this is a description</p>",
+                availability: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
+                path: {
+                    material: {
+                        polylineOutline: {
+                            color: {
+                                rgba: [255, 0, 255, 255],
+                            },
+                            outlineColor: {
+                                rgba: [0, 255, 255, 255],
+                            },
+                            outlineWidth: 5    
+                        }, 
+                    },
+                    width: 8,   // 折线宽度
+                    leadTime: 5,  
+                    trailTime: 50000,
+                    resolution: 5,
+                 },
+                 orientation: {
+                    //  "unitQuaternion": [
+                    //      0.191, -0.331, 0.462, 0.800
+                    //  ]
+                 },
+                 model: {
+                     gltf: 'https://webgishome-file.oss-cn-chengdu.aliyuncs.com/common/Cesium_Air.glb'
+                 },
+                 position: {
+                     epoch: "2019-08-28T04:00:00.00Z",
+                     cartographicDegrees: [
+                         0, 120, 40, 65000,
+                         1200, 130, 40, 65000
+                     ]
+                 }
+            },
+        ];
+        var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
+        dataSourcePromise.then(function (dataSource) {
+            // 根据模型所在的实体去进行加载
+            viewer.trackedEntity = dataSource.entities.getById('path');
+        }).catch(function (error) {
+          console.error(error);
+        });
+
+
+        // viewer.trackedEntity.orientation = Cesium.Quaternion.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-60), Cesium.Math.toRadians(45), Cesium.Math.toRadians(0)));
+        
+        // let matrix = viewer.trackedEntity?.computeModelMatrix(Cesium.JulianDate.fromIso8601('2019-08-28T04:00:00.00Z'))
+        // // 通过调试的实体来绘制模型坐标轴
+        // viewer.scene.primitives.add(
+        //     new Cesium.DebugModelMatrixPrimitive({  // 加载模型偏移矩阵的图元
+        //         modelMatrix: matrix,  // 设置偏移矩阵
+        //         length: 100000,
+        //         width: 10
+        //     })
+        // );
+
+    };
+    document.head.appendChild(script);
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
+    document.head.appendChild(link);
+}

src/examples/movingTarget/aircraft/aircraft.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import { addAircraft } from './function';
+onMounted(() => {
+    addAircraft()
+});
+</script>
+
+<style>
+.cesium-container {
+width: 100%;
+height: 100vh;
+}
+</style>
\ No newline at end of file

src/views/ElementMap.js

@@ -49,6 +49,10 @@ export const elementWeatherMap = {
 }
 
 export const elementMovingMap = {
+    飞机: {
+        title: '飞机',
+        pngUrl: '/src/assets/Aircraft.png'
+    },
     火箭发射: {
         title: '火箭发射',
         pngUrl: '/src/assets/Plane.png'