update：大批量动目标websocket的初步修改

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

@@ -4,68 +4,6 @@ export function addMovingTargetsWebsocket(viewer) {
     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('连接关闭');
-    };
-}
-
-
-
-
-/**
- * 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秒
@@ -156,4 +94,65 @@ export function addMovingTargetsWebsocket(viewer) {
     console.log('连接关闭');
   };
 }
+
+
+
+/**
+ * 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

@@ -18,16 +18,16 @@ onMounted(() => {
             baseLayerPicker: false,  // 影像切换
             animation: true,  //是否显示动画控件
             timeline: false, //是否显示时间线控件
-            infoBox: 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
-            })
+            // terrainProvider: Cesium.createWorldTerrain({
+            //     requestWaterMask: true, // required for water effects
+            //     requestVertexNormals: true // required for terrain lighting
+            // })
         })
         
         addMovingTargetsWebsocket(viewer)
@@ -48,7 +48,6 @@ onMounted(() => {
 }
 </style>
 
-
 <!--
 <template>
     <div id="cesiumContainer" class="cesium-container"></div>
@@ -56,7 +55,7 @@ onMounted(() => {
 
 <script setup>
 import { onMounted } from 'vue';
-import { addMovingTargets } from './function';
+import { addMovingTargetsWebsocket } from './function';
 
 let viewer;
 
@@ -70,19 +69,19 @@ onMounted(() => {
             baseLayerPicker: false,  // 影像切换
             animation: true,  //是否显示动画控件
             timeline: false, //是否显示时间线控件
-            infoBox: true, //是否显示点击要素之后显示的信息
+            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
-            // })
+            terrainProvider: Cesium.createWorldTerrain({
+                requestWaterMask: true, // required for water effects
+                requestVertexNormals: true // required for terrain lighting
+            })
         })
         
-        addMovingTargets(viewer)
+        addMovingTargetsWebsocket(viewer)
 
     };
     document.head.appendChild(script);