Bootstrap

cesium仿真推演

cesium 通过websocket接收实时位置，实现飞机轨迹、导道轨迹、爆炸点，实现效果如下

1.初始地球

    Cesium.Ion.defaultAccessToken ="";
    let viewer = new Cesium.Viewer("cesiumContainer", {
      baseLayerPicker: false,  // 影像切换
      animation: true,  //是否显示动画控件
      timeline: false, //是否显示时间线控件
      infoBox: false, //是否显示点击要素之后显示的信息
      geocoder: false, //是否显示地名查找控件
      timeline: true, //是否启用时间线控件
      fullscreenButton: false,
      shouldAnimate: true,
      navigationHelpButton: false, //是否显示帮助信息控件
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi",
      }),
    });

2.时间轴设置

    viewer.timeline.container.style.display = 'none';
    // 起始时间
    let start = Cesium.JulianDate.fromDate(new Date(2017, 7, 11));
    // 结束时间
    let stop = Cesium.JulianDate.addSeconds(start, 600, new Cesium.JulianDate());
    // 设置时钟开始时间
    viewer.clock.startTime = start.clone();
    // 设置时钟当前时间
    viewer.clock.currentTime = start.clone();
    // 设置时钟结束时间
    viewer.clock.stopTime = stop.clone();
    // 时间速率，数字越大时间过的越快，设置1好像是和实际时间一样
    viewer.clock.multiplier = 100;
    // 时间轴绑定到viewer上去
    // viewer.timeline.zoomTo(start, stop);
    // 循环执行，到达终止时间，重新从起点时间开始
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

3.添加模型

    // 飞机
    function createEntity (id, positionProperty, color, type) {
      return viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
          start: start,
          stop: stop
        })]),
        position: positionProperty,
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),
        model: {
          uri: type == 'plane'? './zhanji.glb':'./launchvehicle.glb',
          minimumPixelSize: 48,
          color: getColor(color, 1.0),
        },
        path: {
          show: true,
          leadTime: 0,
          trailTime: 40,
          width: 8,
          resolution: 1,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.3,
            taperPower: 0.3,
            color: color == 'RED'? Cesium.Color.fromCssColorString('#F56C6C'):Cesium.Color.fromCssColorString('#409EFF')  ,
          }),
        }
      });
    }
    // 爆炸点
    function createEntityFire (id, positionProperty) {
      return viewer.entities.add({
        position: positionProperty,
        billboard: {
          image: './爆炸.png', // 设置图片路径
          scale: 0.2, // 设置图片大小
          show: true,
        }
      });
    }
    let entity = createEntity(1, property, 'RED','plane');
    let entity1 = createEntity(2, property1, 'RED','plane');
    let entity2 = createEntity(3, property2, 'BLUE','plane');
    let entity3 = createEntity(4, property3, 'BLUE','plane');
    let entity4 = createEntity(5, property4, 'RED','dao');
    let entity5 = createEntityFire(6, property5);

4.模型添加时间轴

    let data = []
    let property = computeFlight(data)
    let property1 = computeFlight(data)
    let property2 = computeFlight(data)
    let property3 = computeFlight(data)
    let property4 = computeFlight(data)
    let property5 = computeFlight(data)
    function computeFlight (source) {
        let property = new Cesium.SampledPositionProperty();
        for (let i = 0; i < source.length; i++) {
          let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
          let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
          // 添加位置，和时间对应
          property.addSample(time, position);
        }
        // 设置插值算法为拉格朗日多项式逼近
        property.setInterpolationOptions({
          interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
          interpolationDegree: 5 // 可以根据需要调整插值次数
        });
        return property;
      

    }

    function getColor (colorName, alpha) {
      const color = Cesium.Color[colorName.toUpperCase()];
      return Cesium.Color.fromAlpha(color, parseFloat(alpha));
    }

5.websocket推送

    const socket = new WebSocket('ws://192.168.1.177:16868/pull_data');

    socket.onopen = function () {
      console.log('WebSocket 连接已建立.');
      socket.send('Hello Server!');
    };

    socket.onmessage = function (event) {
      const data = JSON.parse(event.data).data;
      if (Array.isArray(data)) {
        data.forEach(item => {
          let entityProperty
          let id = item.id;
          if (id === 1) {
            entityProperty = property
          } else if (id === 2) {
            entityProperty = property1
          } else if (id === 3) {
            entityProperty = property2
          } else if (id === 4) {
            entityProperty = property3
          } else if (id === 5) {
            entityProperty = property4
          } else if (id === 6) {
            entityProperty = property5
          }
          if (entityProperty) {
            if (item.time !== undefined) {
              let time = Cesium.JulianDate.addSeconds(start, item.time, new Cesium.JulianDate);
              let position = Cesium.Cartesian3.fromDegrees(item.longitude, item.dimension, item.height);
              entityProperty.addSample(time, position);
            }

          } else {
            // console.error(`No property found for id ${id}`);
          }
        });
      }
    };
    socket.onclose = function (event) {
      if (event.wasClean) {
        console.log('WebSocket 连接已关闭.');
      } else {
        console.error('WebSocket 连接断开:', event.code, event.reason);
      }
    };
    socket.onerror = function (error) {
      console.error('WebSocket 错误发生:', error);
    };

6.数据情况

此处为websocket推送的数据，一秒推送一组数据

[
  [
      {
          "longitude": 115.90167226526711,
          "dimension": 28.625120981344978,
          "height": 50000,
          "time": 0,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 115.81082463521449,
          "dimension": 22.79624472230782,
          "height": 50000,
          "time": 0,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.58182905000967,
          "dimension": 25.022782945162177,
          "height": 40000,
          "time": 0,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 120.64238963040782,
          "dimension": 24.16165755368411,
          "height": 30000,
          "time": 0,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 116.06694984208235,
          "dimension": 28.066471672734693,
          "height": 50000,
          "time": 40,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 115.98677094072605,
          "dimension": 22.47071272291977,
          "height": 20000,
          "time": 40,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.8182559314053,
          "dimension": 24.875146938021118,
          "height": 40000,
          "time": 40,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 120.54482508398326,
          "dimension": 24.227277585456818,
          "height": 20000,
          "time": 40,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 116.24925479211112,
          "dimension": 27.475234777949026,
          "height": 70000,
          "time": 80,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 116.06867412991954,
          "dimension": 22.01236453350201,
          "height": 30000,
          "time": 80,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.94892630210205,
          "dimension": 24.60152650072645,
          "height": 70000,
          "time": 80,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 120.45427903992982,
          "dimension": 24.293364318851374,
          "height": 30000,
          "time": 80,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 116.64557588315023,
          "dimension": 26.996137747603726,
          "height": 70000,
          "time": 120,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 116.19216458394004,
          "dimension": 21.787668223836405,
          "height": 50000,
          "time": 120,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.84264405431378,
          "dimension": 24.059381853500327,
          "height": 70000,
          "time": 120,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 120.44707478407804,
          "dimension": 24.412307008786513,
          "height": 30000,
          "time": 120,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 116.97220379017409,
          "dimension": 26.66863686778167,
          "height": 70000,
          "time": 160,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 116.64786006235653,
          "dimension": 21.68372653628677,
          "height": 40000,
          "time": 160,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.61482766938946,
          "dimension": 23.373206571396267,
          "height": 70000,
          "time": 160,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 120.37816248147197,
          "dimension": 24.514653124919107,
          "height": 10000,
          "time": 160,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 117.75322832015706,
          "dimension": 25.922013611547982,
          "height": 50000,
          "time": 200,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 117.21532723629497,
          "dimension": 21.55501327744841,
          "height": 10000,
          "time": 200,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.133599805367215,
          "height": 50000,
          "time": 200,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 120.22219621602466,
          "dimension": 24.554248755142424,
          "height": 50000,
          "time": 200,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 118.71456116448206,
          "dimension": 24.957818869004782,
          "height": 60000,
          "time": 240,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 117.74502819587877,
          "dimension": 21.271103462087552,
          "height": 40000,
          "time": 240,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.133599805367215,
          "height": 50000,
          "time": 240,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 120.05172146076706,
          "dimension": 24.620213692294797,
          "height": 30000,
          "time": 240,
          "id": 4,
          "type": "blue"
      },
      {
          "longitude": 117.74502819587877,
          "dimension": 21.271103462087552,
          "height": 40000,
          "time": 240,
          "id": 5,
          "type": "red"
      }
  ],
  [
      {
          "longitude": 119.46174427938871,
          "dimension": 24.210812479910643,
          "height": 80000,
          "time": 280,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 118.18638353470584,
          "dimension": 21.0740436622621,
          "height": 40000,
          "time": 280,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.233599805367213,
          "height": 50000,
          "time": 280,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 119.8014500115608,
          "dimension": 24.613618762754086,
          "height": 50000,
          "time": 280,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 120.12089834650197,
          "dimension": 23.152518875104718,
          "height": 70000,
          "time": 320,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 119.57256305606677,
          "dimension": 20.738900169864934,
          "height": 20000,
          "time": 320,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.333599805367214,
          "height": 50000,
          "time": 320,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 119.59833115423396,
          "dimension": 24.53445250129994,
          "height": 30000,
          "time": 320,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 120.12089834650197,
          "dimension": 23.152518875104718,
          "height": 70000,
          "time": 360,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 120.28162496305498,
          "dimension": 20.680390511460004,
          "height": 50000,
          "time": 360,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.433599805367216,
          "height": 50000,
          "time": 360,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 119.33355121521748,
          "dimension": 24.26689822167974,
          "height": 30000,
          "time": 360,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 120.12089834650197,
          "dimension": 23.152518875104718,
          "height": 70000,
          "time": 400,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 121.0598128017038,
          "dimension": 20.66304175586005,
          "height": 50000,
          "time": 400,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.433599805367216,
          "height": 50000,
          "time": 400,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 119.27551725598164,
          "dimension": 24.12463358054309,
          "height": 40000,
          "time": 400,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 120.12089834650197,
          "dimension": 23.152518875104718,
          "height": 70000,
          "time": 440,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 121.67016447779628,
          "dimension": 20.621869517064766,
          "height": 20000,
          "time": 440,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.533599805367214,
          "height": 50000,
          "time": 440,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 119.10504250072404,
          "dimension": 23.8495824814122,
          "height": 40000,
          "time": 440,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 120.12089834650197,
          "dimension": 23.052518875104717,
          "height": 70000,
          "time": 480,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 122.2352045926724,
          "dimension": 20.77588453487941,
          "height": 30000,
          "time": 480,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.633599805367215,
          "height": 50000,
          "time": 480,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 118.87653378623185,
          "dimension": 23.17943566695553,
          "height": 50000,
          "time": 480,
          "id": 4,
          "type": "blue"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.833599805367214,
          "height": 50000,
          "time": 480,
          "id": 5,
          "type": "red"
      }
  ],
  [
      {
          "longitude": 122.355738035547,
          "dimension": 23.052518875104717,
          "height": 20000,
          "time": 520,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 122.355738035547,
          "dimension": 21.255686510074923,
          "height": 20000,
          "time": 520,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.833599805367214,
          "height": 50000,
          "time": 520,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 118.87653378623185,
          "dimension": 23.27943566695553,
          "height": 50000,
          "time": 520,
          "id": 4,
          "type": "blue"
      }
  ],
  [
      {
          "longitude": 122.27644297970562,
          "dimension": 23.052518875104717,
          "height": 20000,
          "time": 560,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 122.27644297970562,
          "dimension": 21.718371556325124,
          "height": 20000,
          "time": 560,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.133599805367215,
          "height": 50000,
          "time": 560,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 118.87653378623185,
          "dimension": 23.37943566695553,
          "height": 50000,
          "time": 560,
          "id": 4,
          "type": "blue"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.133599805367215,
          "height": 50000,
          "time": 560,
          "id": 6,
          "type": "red"
      }
  ],
  [
      {
          "longitude": 121.45042686046793,
          "dimension": 23.052518875104717,
          "height": 10000,
          "time": 600,
          "id": 1,
          "type": "red"
      },
      {
          "longitude": 121.45042686046793,
          "dimension": 22.418104243855808,
          "height": 10000,
          "time": 600,
          "id": 2,
          "type": "red"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.133599805367215,
          "height": 50000,
          "time": 600,
          "id": 3,
          "type": "blue"
      },
      {
          "longitude": 118.87653378623185,
          "dimension": 23.47943566695553,
          "height": 50000,
          "time": 600,
          "id": 4,
          "type": "blue"
      },
      {
          "longitude": 121.41934736848623,
          "dimension": 22.133599805367215,
          "height": 50000,
          "time": 600,
          "id": 6,
          "type": "red"
      }
  ]
]

7.此处为 不使用websocket推送效果的代码，以脚本行式实现推演效果，点个赞谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Cesium App</title>
  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Widgets/widgets.css" />
  <style>
    #cesiumContainer {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Cesium.js"></script>
  <div id="cesiumContainer"></div>

  <script type="module">
    import RadarScanMaterialProperty from "./drawRadar.js"
    Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlOTExNTU4NC1lMDFlLTRiYTYtOTRmZi0zNDAwZWFjMjMxNDAiLCJpZCI6MTU5NTIsImlhdCI6MTYwNjY0MDc4MH0.DEgc4-h5oyP530dPxa1YKpXqzCAzUagibRB9bHm5QQs";
    let viewer = new Cesium.Viewer("cesiumContainer", {
      geocoder: false, //是否显示搜索框
      homeButton: true, //是否显示Home按钮
      navigationHelpButton: false, //是否显示操作指南按钮
      animation: false, //是否创建动画小器件，左下角仪表
      shouldAnimate: true,
      timeline: false, //是否显示时间线控件
      fullscreenButton: false, //是否显示右下角全屏按钮
      baseLayerPicker: false, //是否显示图层选择器
      scene3DOnly: false, //如果设置为true，则所有几何图形以3D渲染以节约GPU资源
      sceneModePicker: false, //是否显示3D/2D选择器
      infoBox: false, //是否显示实现信息框
      selectionIndicator: false, //是否显示选中实体标记
      requestRenderMode: true, //决胜请求渲染模式
      contextOptions: {
        webgl: {
          preserveDrawingBuffer: true,
          alpha: true,
        },
      },
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi",
      }),
    });



        // 雷达数据
    let arr = [
      { lon: 120, lat: 26, model: './leida.glb', type: 'red' },
      { lon: 115, lat: 23, model: './leida.glb', type: 'red' },
      { lon: 120, lat: 23, model: './leida.glb', type: 'blue' },
    ]
    for (let i = 0; i < arr.length; i++) {
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(arr[i].lon, arr[i].lat),
        name: '雷达扫描',
        ellipse: {
          semiMajorAxis: 100000.0,
          semiMinorAxis: 100000.0,
          material: new Cesium.RadarScanMaterialProperty({
            color: arr[i].type == 'red' ? Cesium.Color.fromCssColorString('#F56C6C') : Cesium.Color.fromCssColorString('#409EFF'),
            speed: 20.0,
          }),
          height: 20.0,
          heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
          outline: true,
          outlineColor: arr[i].type == 'red' ? Cesium.Color.fromCssColorString('#F56C6C') : Cesium.Color.fromCssColorString('#409EFF')
        },
        model: {
          // 引入模型
          uri: './leida.glb',
          // 模型的近似最小像素大小，而不考虑缩放。这可以用来确保即使观看者缩小也可以看到模型。如果为0.0，则不强制使用最小大小
          minimumPixelSize: 200,
          // 模型的颜色（与模型的渲染颜色混合的属性）
          color: Cesium.Color.WHITE.withAlpha(1),
          // 模型的最大比例大小
          maximumScale: 200,
          // 是否执行模型动画
          runAnimations: false,
          // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
          scale: 200,
          // 是否显示
          show: true
        }
      })
    }
    viewer.camera.flyTo({
      destination: new Cesium.Cartesian3.fromDegrees(117, 12, 1000000),
      duration: 3,
      orientation: {
        heading: Cesium.Math.toRadians(0.0), // 方向（以弧度表示），0 表示正北
        pitch: Cesium.Math.toRadians(-45.0), // 倾斜度（以弧度表示），-90 表示垂直向下
        roll: 0.0 // 滚动度（以弧度表示）
      },
    })


    // 红方飞机
    let dataRed = [
      [
        { longitude: 115.90167226526711, dimension: 28.625120981344978, height: 50000, time: 0 },
        { longitude: 116.06694984208235, dimension: 28.066471672734693, height: 50000, time: 40 },
        { longitude: 116.24925479211112, dimension: 27.475234777949026, height: 70000, time: 80 },
        { longitude: 116.64557588315023, dimension: 26.996137747603726, height: 70000, time: 120 },
        { longitude: 116.97220379017409, dimension: 26.66863686778167, height: 70000, time: 160 },
        { longitude: 117.75322832015706, dimension: 25.922013611547982, height: 50000, time: 200 },
        { longitude: 118.71456116448206, dimension: 24.957818869004782, height: 60000, time: 240 },
        { longitude: 119.46174427938871, dimension: 24.210812479910643, height: 80000, time: 280 },
        { longitude: 120.12089834650197, dimension: 23.152518875104718, height: 70000, time: 320 },
        { longitude: 120.12089834650197, dimension: 23.052518875104718, height: 70000, time: 480 }
      ],
      [
        { longitude: 115.81082463521449, dimension: 22.79624472230782, height: 50000, time: 0 },
        { longitude: 115.98677094072605, dimension: 22.47071272291977, height: 20000, time: 40 },
        { longitude: 116.06867412991954, dimension: 22.01236453350201, height: 30000, time: 80 },
        { longitude: 116.19216458394004, dimension: 21.787668223836405, height: 50000, time: 120 },
        { longitude: 116.64786006235653, dimension: 21.68372653628677, height: 40000, time: 160 },
        { longitude: 117.21532723629497, dimension: 21.55501327744841, height: 10000, time: 200 },
        { longitude: 117.74502819587877, dimension: 21.271103462087552, height: 40000, time: 240 },
        { longitude: 118.18638353470584, dimension: 21.0740436622621, height: 40000, time: 280 },
        { longitude: 119.57256305606677, dimension: 20.738900169864934, height: 20000, time: 320 },
        { longitude: 120.28162496305498, dimension: 20.680390511460004, height: 50000, time: 360 },
        { longitude: 121.0598128017038, dimension: 20.66304175586005, height: 50000, time: 400 },
        { longitude: 121.67016447779628, dimension: 20.621869517064766, height: 20000, time: 440 },
        { longitude: 122.2352045926724, dimension: 20.77588453487941, height: 30000, time: 480 },
        { longitude: 122.355738035547, dimension: 21.255686510074923, height: 10000, time: 520 },
        { longitude: 122.27644297970562, dimension: 21.718371556325124, height: 20000, time: 560 },
        { longitude: 121.45042686046793, dimension: 22.418104243855808, height: 10000, time: 600 }
      ]
    ];
    // 蓝方飞机
    let dataBlue = [
      [
        { longitude: 121.58182905000967, dimension: 25.022782945162177, height: 40000, time: 0 },
        { longitude: 121.8182559314053, dimension: 24.875146938021118, height: 40000, time: 40 },
        { longitude: 121.94892630210205, dimension: 24.60152650072645, height: 70000, time: 100 },
        { longitude: 121.84264405431378, dimension: 24.059381853500327, height: 70000, time: 280 },
        { longitude: 121.61482766938946, dimension: 23.373206571396267, height: 70000, time: 360 },
        { longitude: 121.41934736848623, dimension: 22.833599805367214, height: 50000, time: 480 }
      ],
      [
        {longitude: 120.64238963040782,dimension: 24.16165755368411,height: 30000,time: 0},
        {longitude: 120.54482508398326,dimension: 24.227277585456818,height: 20000,time: 40},
        {longitude: 120.45427903992982,dimension: 24.293364318851374,height: 30000,time: 80},
        {longitude: 120.44707478407804,dimension: 24.412307008786513,height: 30000,time: 120},
        {longitude: 120.37816248147197,dimension: 24.514653124919107,height: 10000,time: 160},
        {longitude: 120.22219621602466,dimension: 24.554248755142424,height: 50000,time: 200},
        {longitude: 120.05172146076706,dimension: 24.620213692294797,height: 30000,time: 240},
        {longitude: 119.8014500115608,dimension: 24.613618762754086,height: 50000,time: 280},
        {longitude: 119.59833115423396,dimension: 24.53445250129994,height: 30000,time: 320},
        {longitude: 119.33355121521748,dimension: 24.26689822167974,height: 30000,time: 360},
        {longitude: 119.27551725598164,dimension: 24.12463358054309,height: 40000,time: 400},
        {longitude: 119.10504250072404,dimension: 23.8495824814122,height: 40000,time: 440},
        {longitude: 118.87653378623185,dimension: 23.87943566695553,height: 50000,time: 480}
      ]
    ]
    

    // 红方发射导弹
    let launchvehicle = [
      [
        { longitude: 117.74502819587877, dimension: 21.271103462087552, height: 40000, time: 240 },
        { longitude: 121.41934736848623, dimension: 22.833599805367214, height: 50000, time: 480 }
      ]
    ]
    
    // 爆炸点
    let fireList = [
      [
        { longitude: 121.41934736848623, dimension: 22.833599805367214, height: 50000, time: 480 },
        { longitude: 121.41934736848623, dimension: 22.833599805367224, height: 50000, time: 500 }
      ]
    ]

    // 起始时间
    let start = Cesium.JulianDate.fromDate(new Date(2017, 7, 11));
    // 结束时间
    let stop = Cesium.JulianDate.addSeconds(start, 800, new Cesium.JulianDate());

    // 设置始时钟始时间
    viewer.clock.startTime = start.clone();
    // 设置时钟当前时间
    viewer.clock.currentTime = start.clone();
    // 设置始终停止时间
    viewer.clock.stopTime = stop.clone();
    // 时间速率，数字越大时间过的越快
    viewer.clock.multiplier = 40;
    // 时间轴
    // viewer.timeline.zoomTo(start,stop);
    // 循环执行,即为2，到达终止时间，重新从起点时间开始
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

    for (let j = 0; j < dataRed.length; j++) {
      let property = computeFlight(dataRed[j]);
      //console.log(property)
      // 添加模型
      let planeModel = viewer.entities.add({
        // 和时间轴关联
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
          start: start,
          stop: stop
        })]),
        position: property,
        // 根据所提供的速度计算模型的朝向
        orientation: new Cesium.VelocityOrientationProperty(property),
        // 模型数据
        model: {
          uri: './f16.glb',
          minimumPixelSize: 48,
          color: getColor('RED', 1.0),//设置颜色
        },
        path: {
          show: true,
          leadTime: 0,
          trailTime: 40,
          width: 8,
          resolution: 1,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.3,
            taperPower: 0.3,
            color: Cesium.Color.fromCssColorString('#F56C6C'),
          }),
        }
      });
    }

    for (let j = 0; j < dataBlue.length; j++) {
      let property = computeFlight(dataBlue[j]);
      // 添加模型
      let planeModel = viewer.entities.add({
        // 和时间轴关联
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
          start: start,
          stop: stop
        })]),
        position: property,
        // 根据所提供的速度计算模型的朝向
        orientation: new Cesium.VelocityOrientationProperty(property),
        // 模型数据
        model: {
          uri: './zhanji.glb',
          minimumPixelSize: 48,
          color: getColor('BLUE', 1.0),//设置颜色
          // color: Cesium.Color.fromCssColorString('#409EFF')
        },
        path: {
          show: true,
          leadTime: 0,
          trailTime: 40,
          width: 8,
          resolution: 1,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.3,
            taperPower: 0.3,
            color: Cesium.Color.fromCssColorString('#409EFF'),
          }),
        }
      });
    }


    for (let j = 0; j < launchvehicle.length; j++) {
      let property = computeFlight(launchvehicle[j]);
      // 添加模型
      let planeModel = viewer.entities.add({
        // 和时间轴关联
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
          start: start,
          stop: stop
        })]),
        position: property,
        // 根据所提供的速度计算模型的朝向
        orientation: new Cesium.VelocityOrientationProperty(property),
        // 模型数据
        model: {
          uri: './launchvehicle.glb',
          minimumPixelSize: 48,
          color: getColor('RED', 1.0),//设置颜色
          // color: Cesium.Color.fromCssColorString('#F56C6C')
        },
        path: {
          show: true,
          leadTime: 0,
          trailTime: 40,
          width: 8,
          resolution: 1,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.3,
            taperPower: 0.3,
            color: Cesium.Color.fromCssColorString('#F56C6C'),
          }),
        }
      });
    }


    for (let j = 0; j < fireList.length; j++) {
      let property = computeFlight(fireList[j]);
      // 添加模型
      let planeModel = viewer.entities.add({
        position: property,
        billboard: {
          image: './爆炸.png', // 设置图片路径
          scale: 0.2, // 设置图片大小
          show: true,
        }
      })
    }

    function getColor(colorName, alpha) {
      const color = Cesium.Color[colorName.toUpperCase()];
      return Cesium.Color.fromAlpha(color, parseFloat(alpha));
    }

    function computeFlight (source) {
      // 取样位置 相当于一个集合
      let property = new Cesium.SampledPositionProperty();
      for (let i = 0; i < source.length; i++) {
        let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
        let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
        // 添加位置，和时间对应
        property.addSample(time, position);
      }
      // 设置插值算法为拉格朗日多项式逼近
      property.setInterpolationOptions({
        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
        interpolationDegree: 5 // 可以根据需要调整插值次数
      });
      return property;
    }

  </script>
</body>
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
状态管理mobx与redux的对比
辐射神经场算法——NeRF算法详解
坐牢后，我被安排去写代码...
云计算技术 实验五 Hbase的安装和基础编程
Gitee删除的文件怎么找回?(pycharm中删除的文件怎么找回)
【C语言】字符串---刷题篇
Python类属性和实例属性的定义
【个人笔记】解决van-uploader只能上传图片的问题
macbook 安装 alfred
面试中被问到：你在工作中碰到的最困难的问题是什么？
;