update：大批量动目标和websocket的初步设计

src/examples/CodeMap.js

@@ -13,6 +13,8 @@ import vueCodeAircraft from '@/examples/movingTarget/aircraft/aircraft.vue?raw'
 import vueCodeRobotArmAnimation from '@/examples/movingTarget/robotArmAnimation/robotArmAnimation.vue?raw'
 import vueCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/realTimeDriver.vue?raw'
 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 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'
@@ -74,6 +76,8 @@ const vueCodeMap = {
     机械臂动画: vueCodeRobotArmAnimation,
     实时驱动: vueCodeRealTimeDriver,
     坐标轴: vueCodeCoordinateAxis,
+    大批量动目标: vueCodeMovingTargets,
+    大批量动目标websocket: vueCodeMovingTargetsWebsocket,
     导弹发射: vueCodeMissileLaunch,
     导弹机动发射: vueCodeMissileMobileLaunch,
     火箭发射: vueCodeRocketLaunch,

src/examples/FunctionMap.js

@@ -13,6 +13,8 @@ import functionCodeAircraft from '@/examples/movingTarget/aircraft/aircraft-func
 import functionCodeRobotArmAnimation from '@/examples/movingTarget/robotArmAnimation/robotArmAnimation-function.js?raw'
 import functionCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/realTimeDriver-function.js?raw'
 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 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'
@@ -73,6 +75,8 @@ const functionCodeMap = {
     机械臂动画: functionCodeRobotArmAnimation,
     实时驱动: functionCodeRealTimeDriver,
     坐标轴: functionCodeCoordinateAxis,
+    大批量动目标: functionCodeMovingTargets,
+    大批量动目标websocket: functionCodeMovingTargetsWebsocket,
     导弹发射: functionCodeMissileLaunch,
     导弹机动发射: functionCodeMissileMobileLaunch,
     火箭发射: functionCodeRocketLaunch,

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

+export function addMovingTargets(viewer) {
+    const ws = new WebSocket('ws://localhost:8080');
+    ws.onopen = function() {
+      console.log('连接开启');
+    };
+
+    let start = Cesium.JulianDate.fromDate(new Date());  // 设置时间轴当前时间为开始时间
+    start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());   // 开始时间加8小时改为北京时间
+    let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate());   // 设置结束时间为开始时间加400秒
+
+    viewer.clock.startTime = start.clone();  // 设置时钟开始时间
+    viewer.clock.currentTime = start.clone();  // 设置时钟当前时间
+    viewer.clock.stopTime = stop.clone();  // 设置时钟结束时间
+    viewer.clock.multiplier = 1;  // 设置时间倍数
+    viewer.timeline.zoomTo(start, stop);  // 时间轴绑定到viewer上去
+    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  // 循环执行，到达终止时间，重新从起点时间开始
+
+    let modelArr = [];
+    let pendingUpdates = {};
+
+    // 创建飞机
+    function createModel(obj) {
+      let property = new Cesium.SampledPositionProperty();
+      property.setInterpolationOptions({
+        interpolationDegree: 5,
+        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
+      });
+      let entity = viewer.entities.add({
+        position: property,
+        orientation: new Cesium.VelocityOrientationProperty(property),
+        model: {
+          uri: "https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb",
+          minimumPixelSize: 60
+        }
+      });
+      entity.attr = {
+        property: property,
+        icao: obj.icao
+      };
+      return entity;
+    }
+
+    // 获取模型
+    function getModelById(id) {
+      if (!id) return null;
+      let obj = {};
+      for (let i = 0; i < modelArr.length; i++) {
+        let item = modelArr[i];
+        if (id === item.attr.icao) {
+          obj.index = i;
+          obj.model = item;
+          break;
+        }
+      }
+      return obj;
+    }
+
+    // 更新模型位置
+    function updateModelPosition(icao, position, time) {
+      let obj = getModelById(icao);
+      if (obj.model) {
+        obj.model.attr.property.addSample(time, position);
+      }
+    }
+
+    ws.onmessage = function(event) {
+      const data = JSON.parse(event.data);
+      console.log('Received data:', data);
+
+      let item = data; // 单个数据点
+      let icao = item.icao;
+      let position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, item.altitude);
+      let julianDate = Cesium.JulianDate.addSeconds(start, item.time, new Cesium.JulianDate());
+
+      // 存储待更新的数据
+      pendingUpdates[icao] = { position, julianDate };
+
+      // 延迟几秒钟再更新位置
+      setTimeout(() => {
+        if (pendingUpdates[icao]) {
+          let obj = getModelById(icao);
+          if (!obj.model) {
+            // 如果模型不存在，创建模型
+            obj.model = createModel(item);
+            modelArr.push(obj.model);
+          }
+          updateModelPosition(icao, pendingUpdates[icao].position, pendingUpdates[icao].julianDate);
+          delete pendingUpdates[icao];
+        }
+      }, 3000); // 延迟3秒钟
+    };
+
+    ws.onclose = function() {
+      console.log('连接关闭');
+    };
+}
\ No newline at end of file

src/examples/movingTarget/movingTargets/movingTargets.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { addMovingTargets } 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 Cesium.Viewer('cesiumContainer', {
+            baseLayerPicker: false,  // 影像切换
+            animation: true,  //是否显示动画控件
+            timeline: false, //是否显示时间线控件
+            infoBox: true, //是否显示点击要素之后显示的信息
+            geocoder: false, //是否显示地名查找控件
+            timeline: true, //是否启用时间线控件
+            fullscreenButton: false,
+            shouldAnimate: true,
+            navigationHelpButton: false, //是否显示帮助信息控件
+            // terrainProvider: Cesium.createWorldTerrain({
+            //     requestWaterMask: true, // required for water effects
+            //     requestVertexNormals: true // required for terrain lighting
+            // })
+        })
+        
+        addMovingTargets(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/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket-function.js

+export function addMovingTargetsWebsocket(viewer) {
+    const ws = new WebSocket('ws://localhost:8080');
+    ws.onopen = function() {
+        console.log('连接开启');
+    };
+
+    let property = new Cesium.SampledPositionProperty();
+    let start = Cesium.JulianDate.fromDate(new Date());  // 设置时间轴当前时间为开始时间
+    start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());   // 开始时间加8小时改为北京时间
+    let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate());   // 设置结束时间为开始时间加400秒
+
+    viewer.clock.startTime = start.clone();  // 设置时钟开始时间
+    viewer.clock.currentTime = start.clone();  // 设置时钟当前时间
+    viewer.clock.stopTime = stop.clone();  // 设置时钟结束时间
+    viewer.clock.multiplier = 1;  // 设置时间倍数
+    viewer.timeline.zoomTo(start, stop);  // 时间轴绑定到viewer上去
+    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  // 循环执行，到达终止时间，重新从起点时间开始
+
+    let entity = viewer.entities.add({
+        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
+            start: start,  
+            stop: stop
+        })]),
+        position: property,
+        orientation: new Cesium.VelocityOrientationProperty(property),  // 根据速度计算方向角
+        model: {
+            uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/ship.glb', //gltf文件的URL
+            scale: 0.05,     // 放大倍数
+            silhouetteColor: Cesium.Color.fromCssColorString('rgba(0, 255, 0, 1)'),   // 船模型边框颜色
+            silhouetteSize: 1,      // 船模型边框宽度
+            minimumPixelSize: 128
+        },
+        path: {    // 船路径
+            resolution: 1,  //  这个不知道是啥
+            material: new Cesium.PolylineGlowMaterialProperty({
+                glowPower: 0.1,    // 颜色透明度
+                color: Cesium.Color.fromCssColorString('rgba(0, 253, 239, 0.5)')   // 路线颜色
+            }),
+            width: 2  // 路线的显示宽度
+        }
+    });
+    viewer.trackedEntity = entity;   // 视角跟随模型
+
+    ws.onmessage = function(event) {
+        const data = JSON.parse(event.data);
+        console.log('Received data:', data);
+
+        // 更新位置属性
+        let time = Cesium.JulianDate.addSeconds(start, data.time, new Cesium.JulianDate());
+        let position = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.height);
+        property.addSample(time, position);
+    };
+
+    ws.onclose = function() {
+        console.log('连接关闭');
+    };
+}
\ No newline at end of file

src/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { addMovingTargetsWebsocket } 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 Cesium.Viewer('cesiumContainer', {
+            baseLayerPicker: false,  // 影像切换
+            animation: true,  //是否显示动画控件
+            timeline: false, //是否显示时间线控件
+            infoBox: false, //是否显示点击要素之后显示的信息
+            geocoder: false, //是否显示地名查找控件
+            timeline: true, //是否启用时间线控件
+            fullscreenButton: false,
+            shouldAnimate: true,
+            navigationHelpButton: false, //是否显示帮助信息控件
+            terrainProvider: Cesium.createWorldTerrain({
+                requestWaterMask: true, // required for water effects
+                requestVertexNormals: true // required for terrain lighting
+            })
+        })
+        
+        addMovingTargetsWebsocket(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

@@ -48,6 +48,14 @@ export const elementMovingMap = {
         title: '坐标轴',
         pngUrl: '/src/assets/CoordinateAxis.png'
     },
+    大批量动目标: {
+        title: '大批量动目标',
+        pngUrl: '/src/assets/CoordinateAxis.png'
+    },
+    大批量动目标websocket: {
+        title: '大批量动目标websocket',
+        pngUrl: '/src/assets/CoordinateAxis.png'
+    },
     导弹发射: {
         title: '导弹发射',
         pngUrl: '/src/assets/MissileLaunch.png'