Merge branch 'develop' of ssh://47.96.160.63:10022/jlc/cesium-frame into develop

src/examples/CodeMap.js

@@ -13,6 +13,7 @@ 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 vueCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch.vue?raw'
 import vueCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch.vue?raw'
 import vueCodeRocketLaunchIntoOrbit from '@/examples/movingTarget/rocketLaunchIntoOrbit/rocketLaunchIntoOrbit.vue?raw'
 
@@ -65,6 +66,7 @@ const vueCodeMap = {
     机械臂动画: vueCodeRobotArmAnimation,
     坐标轴: vueCodeCoordinateAxis,
     导弹发射: vueCodeMissileLaunch,
+    导弹机动发射: vueCodeMissileMobileLaunch,
     火箭发射: vueCodeRocketLaunch,
     火箭发射卫星入轨: vueCodeRocketLaunchIntoOrbit,
 

src/examples/FunctionMap.js

@@ -13,6 +13,7 @@ import functionCodeAircraft from '@/examples/movingTarget/aircraft/aircraft-func
 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 functionCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch-function.js?raw'
 import functionCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch-function.js?raw'
 import functionCodeRocketLaunchIntoOrbit from '@/examples/movingTarget/rocketLaunchIntoOrbit/rocketLaunchIntoOrbit-function.js?raw'
 
@@ -64,6 +65,7 @@ const functionCodeMap = {
     机械臂动画: functionCodeRobotArmAnimation,
     坐标轴: functionCodeCoordinateAxis,
     导弹发射: functionCodeMissileLaunch,
+    导弹机动发射: functionCodeMissileMobileLaunch,
     火箭发射: functionCodeRocketLaunch,
     火箭发射卫星入轨: functionCodeRocketLaunchIntoOrbit,
 

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

+export function addMissileMobileLaunch(startLon, startLat, startHeight, endLon, endLat, endHeight, missileId) {
+    const script = document.createElement('script');
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
+    script.onload = () => {
+        if (!window.CesiumInitialized) {
+            window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
+            window.viewer = new Cesium.Viewer('cesiumContainer', {
+                shouldAnimate: true  // 一开始就播放动画
+            });
+            window.CesiumInitialized = true;
+        }
+
+        const numPoints = 600; // 生成路径的点数
+
+        const cartesianData = generateArcPath(startLon, startLat, startHeight, endLon, endLat, endHeight, numPoints);
+
+        var czml =
+            [
+                {
+                    id: "document",
+                    name: "Missile",
+                    version: "1.0",
+                    clock: {
+                        interval: "2019-08-28T04:00:00Z/2019-08-28T04:04:00Z",
+                        currentTime: "2019-08-28T04:00:00.00Z",
+                        multiplier: 1,
+                        range: "LOOP_STOP",
+                        step: "SYSTEM_CLOCK_MULTIPLIER"
+                    }
+                },
+                {
+                    id: `MissileLaunch${missileId}`,
+                    availability: "2019-08-28T04:00:00Z/2019-08-28T04:04:00Z",
+                    name: "MissileLaunch",
+                    path: {
+                        show: [
+                            {
+                                interval: "2019-08-28T04:00:00Z/2019-08-28T04:04:00Z",
+                                boolean: true
+                            }
+                        ],
+                        width: 1,
+                        resolution: 86400,
+                        leadTime: 0,
+                        trailTime: 500,
+                        material: {
+                            solidColor: {
+                                color: {
+                                    rgba: [0, 255, 0, 255] // 设置轨迹颜色为绿色
+                                }
+                            }
+                        }
+                    },
+                    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/MissileTwo.glb"
+                            }
+                        ],
+                        minimumPixelSize: 128,
+                        scale: 1,
+                        runAnimations: false,
+                        articulations: {
+                            "SRBFlames Size": {
+                                epoch: "2019-08-28T04:00:00Z",
+                                number: [
+                                    0, 1,
+                                    60, 1,
+                                    61, 0,
+                                    1000, 0
+                                ]
+                            },
+                        }
+                    },
+                    position: {
+                        interpolationAlgorithm: "LAGRANGE",
+                        interpolationDegree: 5,
+                        referenceFrame: "FIXED",
+                        epoch: "2019-08-28T04:00:00Z",
+                        cartographicDegrees: cartesianData
+                    },
+                    orientation: {
+                        "interpolationAlgorithm": "LINEAR",
+                        "interpolationDegree": 1,
+                        "epoch": "2019-08-28T04:00:00Z",
+                        "velocityReference": "#position"  // 方向的参考属性，指向实体的位置属性
+                    }
+                }
+            ]
+
+        var dataSourcePromise = window.viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
+
+        dataSourcePromise.then(function (dataSource) {
+            window.viewer.trackedEntity = dataSource.entities.getById(`MissileLaunch${missileId}`);
+        }).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);
+}
+
+// 路径生成函数，通过传入起点和终点的经纬和高度信息，生成路径数组
+function generateArcPath(startLon, startLat, startHeight, endLon, endLat, endHeight, numPoints) {
+    const startCartographic = new Cesium.Cartographic(Cesium.Math.toRadians(startLon), Cesium.Math.toRadians(startLat), startHeight);
+    const endCartographic = new Cesium.Cartographic(Cesium.Math.toRadians(endLon), Cesium.Math.toRadians(endLat), endHeight);
+
+    const geodesic = new Cesium.EllipsoidGeodesic(startCartographic, endCartographic);
+
+    const cartesianArray = [];
+    for (let i = 0; i <= numPoints; i++) {
+        const fraction = i / numPoints;
+        const intermediateCartographic = geodesic.interpolateUsingFraction(fraction);
+        const intermediateHeight = Cesium.Math.lerp(startHeight, endHeight, fraction);
+        const intermediatePosition = Cesium.Cartographic.toCartesian(intermediateCartographic);
+        const cartographic = Cesium.Cartographic.fromCartesian(intermediatePosition);
+        const lon = Cesium.Math.toDegrees(cartographic.longitude);
+        const lat = Cesium.Math.toDegrees(cartographic.latitude);
+        cartesianArray.push(i * (240 / numPoints), lon, lat, intermediateHeight);
+    }
+    return cartesianArray;
+}
\ No newline at end of file

src/examples/movingTarget/missileMobileLaunch/missileMobileLaunch.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+    <div class="itemClass">
+        <div>
+            <input type="string" class="inputClass" v-model="startLon" placeholder="起点的经度：" />
+            <input type="string" class="inputClass" v-model="startLat" placeholder="起点的纬度：" />
+            <input type="string" class="inputClass" v-model="startHeight" placeholder="起点的高度：" />
+        </div>
+        <div>
+            <input type="string" class="inputClass" v-model="endLon" placeholder="终点的经度：" />
+            <input type="string" class="inputClass" v-model="endLat" placeholder="终点的纬度：" />
+            <input type="string" class="inputClass" v-model="endHeight" placeholder="终点的高度：" />
+        </div>
+        <div>
+            <button @click="launchMissile" style="margin: 1px;">发射导弹</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { addMissileMobileLaunch } from './function';
+
+const startLon = ref(120);
+const startLat = ref(30);
+const startHeight = ref(0);
+const endLon = ref(180);
+const endLat = ref(60);
+const endHeight = ref(1000000);
+
+let missileId = 0;
+
+onMounted(() => {
+    addMissileMobileLaunch(startLon.value, startLat.value, startHeight.value, endLon.value, endLat.value, endHeight.value, missileId++);
+});
+
+const launchMissile = () => {
+    addMissileMobileLaunch(startLon.value, startLat.value, startHeight.value, endLon.value, endLat.value, endHeight.value, missileId++);
+};
+</script>
+
+<style>
+.cesium-container {
+    width: 100%;
+    height: 100vh;
+}
+.itemClass {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+.inputClass {
+    width: 80px;
+    height: 15px;
+    margin: 1px;
+}
+</style>
\ No newline at end of file

src/views/ElementMap.js

@@ -48,6 +48,10 @@ export const elementMovingMap = {
         title: '导弹发射',
         pngUrl: '/src/assets/MissileLaunch.png'
     },
+    导弹机动发射: {
+        title: '导弹机动发射',
+        pngUrl: '/src/assets/MissileLaunch.png'
+    },
     火箭发射: {
         title: '火箭发射',
         pngUrl: '/src/assets/RocketLaunch.png'