update：机械臂动画案例的添加

src/examples/CodeMap.js

@@ -10,6 +10,7 @@ import vueCodeStationCoordinate from '@/examples/measureStation/stationCoordinat
 import vueCodeVehicle from '@/examples/movingTarget/vehicle/vehicle.vue?raw'
 import vueCodeShip from '@/examples/movingTarget/ship/ship.vue?raw'
 import vueCodeAircraft from '@/examples/movingTarget/aircraft/aircraft.vue?raw'
+import vueCodeRobotArmAnimation from '@/examples/movingTarget/robotArmAnimation/robotArmAnimation.vue?raw'
 import vueCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis.vue?raw'
 import vueCodeMissileLaunch from '@/examples/movingTarget/missileLaunch/missileLaunch.vue?raw'
 import vueCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch.vue?raw'
@@ -60,6 +61,7 @@ const vueCodeMap = {
     车: vueCodeVehicle,
     船: vueCodeShip,
     飞机: vueCodeAircraft,
+    机械臂动画: vueCodeRobotArmAnimation,
     坐标轴: vueCodeCoordinateAxis,
     导弹发射: vueCodeMissileLaunch,
     火箭发射: vueCodeRocketLaunch,

src/examples/FunctionMap.js

@@ -10,6 +10,7 @@ import functionCodeStationCoordinate from '@/examples/measureStation/stationCoor
 import functionCodeVehicle from '@/examples/movingTarget/vehicle/vehicle-function.js?raw'
 import functionCodeShip from '@/examples/movingTarget/ship/ship-function.js?raw'
 import functionCodeAircraft from '@/examples/movingTarget/aircraft/aircraft-function.js?raw'
+import functionCodeRobotArmAnimation from '@/examples/movingTarget/robotArmAnimation/robotArmAnimation-function.js?raw'
 import functionCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis-function.js?raw'
 import functionCodeMissileLaunch from '@/examples/movingTarget/missileLaunch/missileLaunch-function.js?raw'
 import functionCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch-function.js?raw'
@@ -59,6 +60,7 @@ const functionCodeMap = {
     车: functionCodeVehicle,
     船: functionCodeShip,
     飞机: functionCodeAircraft,
+    机械臂动画: functionCodeRobotArmAnimation,
     坐标轴: functionCodeCoordinateAxis,
     导弹发射: functionCodeMissileLaunch,
     火箭发射: functionCodeRocketLaunch,

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

+export function addRobotArmAnimation() {
+    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: "robotArm",
+                version: "1.0",
+                clock: {
+                  interval: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
+                  currentTime: "2019-08-28T04:00:00.00Z",
+                  multiplier: 1,
+                  range: "LOOP_STOP",
+                  step: "SYSTEM_CLOCK_MULTIPLIER"
+                 }
+            },
+            {
+                id: "robotArm",
+                name: "robotArmAnimation",
+                description: "<p>this is a ship</p>",
+                availability: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
+                position: {
+                    cartographicDegrees: [120, 30, 0]
+                },
+                model: {
+                    show: true,
+                    gltf: [
+                        {
+                            interval: "2019-08-28T04:00:00Z/9999-12-31T23:59:59.9999999Z",
+                            uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Station.glb'
+                        }
+                    ],
+                    minimumPixelSize: 128,
+                    scale: 1,
+                    runAnimations: true
+                }
+            },
+        ];
+
+        var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
+        dataSourcePromise.then(function (dataSource) {
+            // 根据模型所在的实体去进行加载
+            viewer.trackedEntity = dataSource.entities.getById('robotArm');
+        }).catch(function (error) {
+          console.error(error);
+        });
+
+    };
+    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/robotArmAnimation/robotArmAnimation.vue

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

src/views/ElementMap.js

@@ -36,6 +36,10 @@ export const elementMovingMap = {
         title: '飞机',
         pngUrl: '/src/assets/Aircraft.png'
     },
+    机械臂动画: {
+        title: '机械臂动画',
+        pngUrl: '/src/assets/RobotArmAnimation.png'
+    },
     坐标轴: {
         title: '坐标轴',
         pngUrl: '/src/assets/CoordinateAxis.png'