update：大批量Websocket案例的添加

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

@@ -31,6 +31,16 @@ export function addMovingTargetsWebsocket(viewer) {
       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 = {
@@ -93,66 +103,4 @@ export function addMovingTargetsWebsocket(viewer) {
   ws.onclose = function() {
     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
+}
\ No newline at end of file

src/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket.vue

@@ -24,10 +24,6 @@ onMounted(() => {
             fullscreenButton: false,
             shouldAnimate: true,
             navigationHelpButton: false, //是否显示帮助信息控件
-            // terrainProvider: Cesium.createWorldTerrain({
-            //     requestWaterMask: true, // required for water effects
-            //     requestVertexNormals: true // required for terrain lighting
-            // })
         })
         
         addMovingTargetsWebsocket(viewer)
@@ -46,56 +42,4 @@ onMounted(() => {
     width: 100%;
     height: 100vh;
 }
-</style>
-
-<!--
-<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
+</style>
\ No newline at end of file

src/views/ElementMap.js

@@ -54,7 +54,7 @@ export const elementMovingMap = {
     },
     大批量动目标websocket: {
         title: '大批量动目标websocket',
-        pngUrl: '/src/assets/CoordinateAxis.png'
+        pngUrl: '/src/assets/MovingTargetsWebsocket.png'
     },
 
     点选路径: {