update：大批量动目标SocketIO案例的添加

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 vueCodeMovingTargetsSocketIO from '@/examples/movingTarget/movingTargetsSocketIO/movingTargetsSocketIO.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'
@@ -37,12 +38,12 @@ import vueCodeSceneInfo from '@/examples/sceneSet/sceneInfo/sceneInfo.vue?raw'
 import vueCodeSceneScreenshot from '@/examples/sceneSet/sceneScreenshot/sceneScreenshot.vue?raw'
 import vueCodeJingweiNetwork2D from '@/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D.vue?raw'
 import vueCodeDial from '@/examples/sceneSet/dial/dial.vue?raw'
+import vueCodeScale from '@/examples/sceneSet/scale/scale.vue?raw'
 import vueCodeCircularSpaceGrid from '@/examples/sceneSet/circularSpaceGrid/circularSpaceGrid.vue?raw'
 import vueCodeRectangularSpaceGrid from '@/examples/sceneSet/rectangularSpaceGrid/rectangularSpaceGrid.vue?raw'
 import vueCodeEarthCoordinate from '@/examples/sceneSet/earthCoordinate/earthCoordinate.vue?raw'
 import vueCodeSkyBox from '@/examples/sceneSet/skyBox/skyBox.vue?raw'
 import vueCodeMapx from '@/examples/sceneSet/mapx/mapx.vue?raw'
-import vueCodeScale from '@/examples/sceneSet/scale/scale.vue?raw'
 
 // 相机
 import vueCodeViewTrack from '@/examples/camera/viewTrack/viewTrack.vue?raw'
@@ -81,6 +82,7 @@ const vueCodeMap = {
     坐标轴: vueCodeCoordinateAxis,
     大批量动目标: vueCodeMovingTargets,
     大批量动目标websocket: vueCodeMovingTargetsWebsocket,
+    大批量动目标socketIO: vueCodeMovingTargetsSocketIO,
     点选路径: vueCodeClickOnPath,
     导弹发射: vueCodeMissileLaunch,
     导弹机动发射: vueCodeMissileMobileLaunch,

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 functionCodeMovingTargetsSocketIO from '@/examples/movingTarget/movingTargetsSocketIO/movingTargetsSocketIO-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'
@@ -37,12 +38,12 @@ import functionCodeSceneInfo from '@/examples/sceneSet/sceneInfo/sceneInfo-funct
 import functionCodeSceneScreenshot from '@/examples/sceneSet/sceneScreenshot/sceneScreenshot-function.js?raw'
 import functionCodeJingweiNetwork2D from '@/examples/sceneSet/jingweiNetwork2D/jingweiNetwork2D-function.js?raw'
 import functionCodeDial from '@/examples/sceneSet/dial/dial-function.js?raw'
+import functionCodeScale from '@/examples/sceneSet/scale/scale.js?raw'
 import functionCodeCircularSpaceGrid from '@/examples/sceneSet/circularSpaceGrid/circularSpaceGrid-function.js?raw'
 import functionCodeRectangularSpaceGrid from '@/examples/sceneSet/rectangularSpaceGrid/rectangularSpaceGrid-function.js?raw'
 import functionCodeEarthCoordinate from '@/examples/sceneSet/earthCoordinate/earthCoordinate-function.js?raw'
 import functionCodeSkyBox from '@/examples/sceneSet/skyBox/skyBox-function.js?raw'
 import functionCodeMapx from '@/examples/sceneSet/mapx/mapx-function.js?raw'
-import functionCodeScale from '@/examples/sceneSet/scale/scale.js?raw'
 
 // 相机
 import functionCodeViewTrack from '@/examples/camera/viewTrack/viewTrack-function.js?raw'
@@ -81,6 +82,7 @@ const functionCodeMap = {
     坐标轴: functionCodeCoordinateAxis,
     大批量动目标: functionCodeMovingTargets,
     大批量动目标websocket: functionCodeMovingTargetsWebsocket,
+    大批量动目标socketIO: functionCodeMovingTargetsSocketIO,
     点选路径: functionCodeClickOnPath,
     导弹发射: functionCodeMissileLaunch,
     导弹机动发射: functionCodeMissileMobileLaunch,

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

+export function addMovingTargetsSocketIO(viewer) {
+    const socket = io('http://localhost:8080');
+  
+    socket.on('connect', 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
+        },
+        path: {
+          resolution: 1, 
+          leadTime: 0, 
+          trailTime: 200,
+          material: new Cesium.PolylineGlowMaterialProperty({
+            glowPower: 0.1,
+            color: Cesium.Color.ORANGE
+          }),
+          width: 10
+        }
+      });
+      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);
+      }
+    }
+  
+    socket.on('waypoint', function(data) {
+        console.log('Received data:', data);
+      const item = data; // 单个数据点
+      const icao = item.icao;
+      const position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, item.altitude);
+      const 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秒钟
+    });
+  
+    socket.on('disconnect', function() {
+      console.log('连接关闭');
+    });
+  }
+  
\ No newline at end of file

src/examples/movingTarget/movingTargetsSocketIO/movingTargetsSocketIO.vue

+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { addMovingTargetsSocketIO } 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, //是否显示帮助信息控件
+        })
+
+        // 引入socket.io-client库
+        const socketIoScript = document.createElement('script');
+        socketIoScript.src = 'https://cdn.jsdelivr.net/npm/socket.io-client@4/dist/socket.io.js';
+        socketIoScript.onload = () => {
+            addMovingTargetsSocketIO(viewer);
+        };
+        document.head.appendChild(socketIoScript);
+
+    };
+    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,7 +56,10 @@ export const elementMovingMap = {
         title: '大批量动目标websocket',
         pngUrl: '/src/assets/MovingTargetsWebsocket.png'
     },
-
+    大批量动目标socketIO: {
+        title: '大批量动目标socketIO',
+        pngUrl: '/src/assets/MovingTargetsWebsocket.png'
+    },
     点选路径: {
         title: '点选路径',
         pngUrl: '/src/assets/ClickOnPath.png'