update：点选路径案例的添加

src/examples/CodeMap.js

@@ -15,6 +15,7 @@ import vueCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/realTi
 import vueCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis.vue?raw'
 import vueCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets.vue?raw'
 import vueCodeMovingTargetsWebsocket from '@/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket.vue?raw'
+import vueCodeClickOnPath from '@/examples/movingTarget/clickOnPath/clickOnPath.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'
@@ -79,6 +80,7 @@ const vueCodeMap = {
     坐标轴: vueCodeCoordinateAxis,
     大批量动目标: vueCodeMovingTargets,
     大批量动目标websocket: vueCodeMovingTargetsWebsocket,
+    点选路径: vueCodeClickOnPath,
     导弹发射: vueCodeMissileLaunch,
     导弹机动发射: vueCodeMissileMobileLaunch,
     火箭发射: vueCodeRocketLaunch,

src/examples/FunctionMap.js

@@ -15,6 +15,7 @@ import functionCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/r
 import functionCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis-function.js?raw'
 import functionCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets-function.js?raw'
 import functionCodeMovingTargetsWebsocket from '@/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket-function.js?raw'
+import functionCodeClickOnPath from '@/examples/movingTarget/clickOnPath/clickOnPath-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'
@@ -79,6 +80,7 @@ const functionCodeMap = {
     坐标轴: functionCodeCoordinateAxis,
     大批量动目标: functionCodeMovingTargets,
     大批量动目标websocket: functionCodeMovingTargetsWebsocket,
+    点选路径: functionCodeClickOnPath,
     导弹发射: functionCodeMissileLaunch,
     导弹机动发射: functionCodeMissileMobileLaunch,
     火箭发射: functionCodeRocketLaunch,

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

+export function addClickOnPath(viewer) {
+    // 存储路径点
+    const pathPoints = [];
+
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+    // 处理鼠标左键点击事件
+    handler.setInputAction(function(movement) {
+        const cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
+        if (cartesian) {
+            pathPoints.push(cartesian);
+            viewer.entities.add({
+                point: {
+                    pixelSize: 10,
+                    color: Cesium.Color.RED,
+                    position: cartesian
+                }
+            });
+
+            // 如果路径点数量大于1，绘制路径线
+            if (pathPoints.length > 1) {
+                const linePositions = pathPoints.slice(-2); // 获取最后两个点
+                viewer.entities.add({
+                    polyline: {
+                        positions: linePositions,
+                        width: 2,
+                        material: Cesium.Color.YELLOW
+                    }
+                });
+            }
+        }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    
+    // 处理鼠标右键点击事件，开始动画
+    handler.setInputAction(function() {
+        if (pathPoints.length < 2) {
+            alert('至少绘制两个点');
+            return;
+        }
+        // 创建一个动态模型
+        const modelEntity = viewer.entities.add({
+            model: {
+                uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb',
+                scale: 100,
+                minimumPixelSize: 128,
+            },
+            position: new Cesium.CallbackProperty(function(time, result) {
+                const t = (time.secondsOfDay % 20) / 20; // 20秒完成一个循环
+                const index = Math.floor(t * (pathPoints.length - 1));
+                const start = pathPoints[index];
+                const end = pathPoints[index + 1];
+                const fraction = (t * (pathPoints.length - 1)) % 1;
+                return Cesium.Cartesian3.lerp(start, end, fraction, result);
+            }, false),
+            orientation: new Cesium.VelocityOrientationProperty(new Cesium.CallbackProperty(function(time, result) {
+                const t = (time.secondsOfDay % 20) / 20; // 20秒完成一个循环
+                const index = Math.floor(t * (pathPoints.length - 1));
+                const start = pathPoints[index];
+                const end = pathPoints[index + 1];
+                const fraction = (t * (pathPoints.length - 1)) % 1;
+                return Cesium.Cartesian3.lerp(start, end, fraction, result);
+            }, false))
+        });
+        // 开始动画
+        viewer.clock.shouldAnimate = true;
+    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+}
\ No newline at end of file

src/examples/movingTarget/clickOnPath/clickOnPath.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { addClickOnPath } from './function';
+
+let viewer;
+
+onMounted(() => {
+    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'
+
+        viewer = new window.Cesium.Viewer('cesiumContainer', {
+            infoBox: false,
+            // shouldAnimate: true
+        });
+        
+        addClickOnPath(viewer)
+
+    };
+    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);
+});
+</script>
+
+<style>
+.cesium-container {
+    width: 100%;
+    height: 100vh;
+}
+</style>
\ No newline at end of file

src/views/ElementMap.js

@@ -56,6 +56,11 @@ export const elementMovingMap = {
         title: '大批量动目标websocket',
         pngUrl: '/src/assets/CoordinateAxis.png'
     },
+
+    点选路径: {
+        title: '点选路径',
+        pngUrl: '/src/assets/CoordinateAxis.png'
+    },
     导弹发射: {
         title: '导弹发射',
         pngUrl: '/src/assets/MissileLaunch.png'