cesium仿真推演

置顶 已于 2024-07-12 11:23:11 修改
阅读量1.1k 收藏 16
点赞数 22
分类专栏： cesium专栏 文章标签： javascript
于 2024-07-11 09:22:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20979541/article/details/140341726
版权

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>

Cesium态势标绘专题：弓形DEJA_VU3D
HwfOcaml的博客
09-19 536
在本文中，我们将介绍一种名为Cesium的开源地理信息系统（GIS）库，以及如何使用其弓形DEJA_VU3D功能进行态势标绘。DEJA_VU3D是Cesium的一个弓形标绘插件，它提供了强大的功能，可以在三维地球模型上绘制复杂的态势信息。通过以上代码，我们可以在Cesium地球模型上成功绘制一个弓形。你可以根据自己的需求调整弓形的位置、大小、颜色等参数，以及地球模型的其他显示设置。部分的JavaScript代码中，我们首先初始化了一个Cesium的Viewer对象，然后创建了一个DEJA_VU3D的实例。
cesium 实时轨迹
God's asylum的博客
09-04 1057
运用cesium中model和polyline添加模型和轨迹线，用CallbackProperty方法来实时改变经纬度。
Cesium案例，集成各种模型，推演，各种Cesium效果
05-22
mars3D-demo，集成各种模型，推演，各种Cesium效果
Cesium学习笔记
最新发布
weixin_57468559的博客
10-15 1565
Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库，Cesium支持海量的三维模型数据，影像数据，地形高程数据，失量数据等丰富的地理教据的加载。在交通，规划，城市管理，地形仿真等领城有非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。中文文档官网例子Cesium的特点①、跨平台，跨浏览器，无插件②、强大的地理数据可视化能力。Cesium自定义的3D Tiles数据格式，支持海量数据渲染。
cesium态势标绘 （ 直线箭头）
God's asylum的博客
05-18 2850
vue + cesium标绘与编辑，均采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习
sumo 和 cesium 的简单联合仿真
爷的博客
08-07 946
通过数据库为纽带，可以实现 sumo 仿真和 cesium 显示同步进行。
cesium飞行仿真
ljjjjjjjjjjj的博客
05-19 374
先下载node.js然后安装，然后下载地图文件，放在根目录下，最后在根目录下执行如下命令自动下载包，然后执行npm start启动web服务。上下左右可以控制飞机升降及左右偏转。
Cesium-数字仿真-你总要了解
热门推荐
weixin_44077556的博客
02-10 1万+
GIS从2D到3D到4D进行发展，根据BS/CS的形式不同，可以划分到以上几类，而Cesium实现了3D到4D的跨越。通视分析（可以看到什么，看不到的用红色显示）、可视域分析（可以看到什么，不可以看到什么）、流动性展示。支持粒子系统（游戏动画基本都是粒子系统完成）轨迹追踪（多目标、单目标）
Cesium中实现流体模拟
weixin_43481439的博客
01-26 2765
体积随机方法将流体看作是由大量微小的体积元素组成的系统，每个体积元素具有随机的速度和位置。：粒子方法，如经典的分子动力学方法（Molecular Dynamics, MD）和格子Boltzmann方法（Lattice Boltzmann Method, LBM），将流体看作由大量微观粒子组成的系统。它将模拟区域划分为一个或多个离散的网格单元，并根据流体的性质和运动方程，在网格点上进行数值计算。：边界元方法是一种基于势函数和其法向导数在流体边界上的离散化表示，以求解流体行为的方法。
sumo和cesium联合仿真.zip
06-23
仿真是一种利用计算机模型复现实际系统并对其进行实验研究的技术手段。通过建立数学或物理模型来模拟真实世界的系统，并通过实验对它们进行分析和优化。仿真技术在多个领域发挥着重要作用，包括航空航天、军事、工业...
cesium态势标绘与编辑
05-17
内容摘要：cesium态势标绘与编辑，点、线、面、圆、多边形、攻击箭头、钳击箭头、直线箭头标会与编辑，每个方法都用es6模块化处理，简单易读易懂， 适合人群：初学者 使用方式：解压压缩包 直接使用 技术范围：vue+...
Cesium模拟飞机飞行路线
07-27
飞机根据路线进行轨迹飞行，利用Cesium，适用于新手操作
基于cesium 开发的 3d 模型 飞行模拟
12-22
基于cesium 开发的 3d 模型 飞行模拟，完美模拟飞行装备的各种姿态展示
cesium 卫星轨迹模拟 czml
03-04
详细原理及代码解释：https://mp.csdn.net/postedit/86620777
基于仿真想定的推演技术研究
11-17
随着计算机仿真技术的发展及其在军事领域的应用，仿真已成为防空兵作战相关问题研究的重要手段，本章以仿真想定为基础，利用面向实体的分析方法和军事概念模型技术从仿真想定中提取推演所需信息，利用这些信息建立想定推演模型,并利用XML Schema描述想定推演模型,建立满足推演需求的想定推演计划。
想定仿真推演想定生成与应用技术研究.pdf
04-14
对想定构成要素， 研究仿真推演想定开发方法， 并对想定编辑软件进行了实现， 为仿真推演系统的综合态势提供了标准化生成思路.
基于Cesium+VUE实现的空间体体积计算功能组件，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-18
基于Cesium+VUE实现的空间体体积计算功能组件，完整demo和源代码，代码未加密/未压缩，可直接调用运行 其中涉及到的引用turf可以自行下载：https://turfjs.fenxianglu.cn/category/，或者 npm install @turf/turf ...
cesium property实现飞行实时姿态仿真
Dengzj_GISER
02-18 4706
property 实现实时飞行姿态，抬升，转弯，俯冲等变化
cesium从头开始一个项目-无人机飞行-4-设定仿真时间
weixin_45656079的博客
11-16 514
正在努力准备中
基于cesium的沙盘推演
01-12
基于Cesium的沙盘推演是一种利用Cesium可视化引擎进行三维立体仿真的方法。它采用B/S架构，通过WebAPI流式传输海量的三维模型数据，实现快速呈现三维立体仿真结果。 在沙盘推演中，基于Cesium的可视化引擎可以使用开源的Cesium库来构建虚拟地球，并通过加载瓦片的方式来展示地理信息。通过合理的瓦片加载次序调度和跳跃式层次的方式，可以节约加载时间和内存。 此外，沙盘推演还可以利用基于等级的细节层次（HLOD）的树状数据组织结构，实现分块加载和离核渲染，以应对大场景、大数据量的三维数据结构。这样可以提高仿真结果的呈现速度和效果。 总结起来，基于Cesium的沙盘推演利用Cesium可视化引擎和WebAPI流式传输数据，通过合理的瓦片加载和细节层次的优化，实现了快速呈现三维立体仿真结果的功能。
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩7_GIS

谢谢你

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值