快捷導(dǎo)航

基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫(huà)

更新時(shí)間：2022年06月27日 15:08:21 作者：王+V

這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫(huà)，文中的示例代碼講解詳細(xì)，對(duì)我們了解Cesium有一定的幫助，感興趣的可以嘗試一下

資源網(wǎng)站

首先呢，分享幾個(gè)網(wǎng)站，盡管大家應(yīng)該都有，但是還是分享一下子吧。

其中這個(gè)下載3D模型的網(wǎng)站有很多3D模型，可以根據(jù)自己的需要搜索下載使用，盡管大部分是收費(fèi)的，但是又免費(fèi)的呀，自己測(cè)試或者是玩的話(huà)，我覺(jué)得夠用了，我覺(jué)得還不錯(cuò)的呢！

繪制衛(wèi)星繞軌動(dòng)效

首先這個(gè)稍微說(shuō)一下哈，其實(shí)就是用了 cesium 的時(shí)間軸，然后添加衛(wèi)星模型，在距離地面的固定高度按照設(shè)置好的軌跡進(jìn)行繞地旋轉(zhuǎn)，關(guān)于下面的錐形信號(hào)覆蓋區(qū)域，就是在衛(wèi)星正下方，添加繪制了一個(gè)圓柱形的模型，使得上面的圓截面半徑為0，下面的圓截面半徑大一些，然后就是一個(gè)錐形了，具體錐形繪制案例看我這篇博客【穿梭門(mén)】哈，有好多繪制形狀的案例。

接下來(lái)直接上代碼?。。。?其實(shí)我也是看的別的博主發(fā)的文章，然后稍作修改出來(lái)的效果，但是大體實(shí)現(xiàn)方式就是我上面說(shuō)的。

初始化藍(lán)星

首先要實(shí)現(xiàn)這個(gè)功能，一定要開(kāi)啟時(shí)間軸的呀，不然不好使哈！

timeline: true, //是否顯示時(shí)間線(xiàn)控件

上面這個(gè)得開(kāi)起來(lái)！

    viewer = new Cesium.Viewer('map', {
      baseLayerPicker: false,  // 影像切換
      animation: true,  //是否顯示動(dòng)畫(huà)控件
      infoBox: false, //是否顯示點(diǎn)擊要素之后顯示的信息
      geocoder: false, //是否顯示地名查找控件
      timeline: true, //是否顯示時(shí)間線(xiàn)控件
      fullscreenButton: false,
      shouldAnimate: false,
      navigationHelpButton: false, //是否顯示幫助信息控件
      terrainProvider: new Cesium.createWorldTerrain({
        requestWaterMask: true,
        requestVertexNormals: true
      }),
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      })
    })

添加衛(wèi)星模型方法

主要是配置這個(gè)時(shí)間軸，然后就調(diào)用方法把衛(wèi)星放進(jìn)藍(lán)星里面。

  // 衛(wèi)星
  function satellite() {
    start = new Cesium.JulianDate.fromDate(new Date());  // 獲取當(dāng)前時(shí)間 這不是國(guó)內(nèi)的時(shí)間
    start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());  // 添加八小時(shí)，得到我們東八區(qū)的北京時(shí)間
    stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());  // 設(shè)置一個(gè)結(jié)束時(shí)間，意思是360秒之后時(shí)間結(jié)束

     
    viewer.clock.startTime = start.clone();   // 給cesium時(shí)間軸設(shè)置開(kāi)始的時(shí)間，也就是上邊的東八區(qū)時(shí)間
    viewer.clock.stopTime = stop.clone();     // 設(shè)置cesium時(shí)間軸設(shè)置結(jié)束的時(shí)間
    viewer.clock.currentTime = start.clone(); // 設(shè)置cesium時(shí)間軸設(shè)置當(dāng)前的時(shí)間
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  // 時(shí)間結(jié)束了，再繼續(xù)重復(fù)來(lái)一遍
    //時(shí)間變化來(lái)控制速度 // 時(shí)間速率，數(shù)字越大時(shí)間過(guò)的越快
    viewer.clock.multiplier = 2;
    //給時(shí)間線(xiàn)設(shè)置邊界
    viewer.timeline.zoomTo(start, stop);

    rrStates = [];
    getRandState(arrStates, 1);
    startFunc();
  }

相關(guān)方法

一股腦直接把代碼發(fā)過(guò)來(lái)了，然后網(wǎng)上其實(shí)都有，我不發(fā)你也找得到，然后這些也是網(wǎng)上拼湊起來(lái)的，然后嘞，應(yīng)該能看懂，看不懂的直接找那個(gè) Cesium API 中文版網(wǎng)站去查，應(yīng)該沒(méi)什么難的。加油！

function mySatePosition() {
    this.lon = 0;
    this.lat = 0;
    this.hei = 700000;          //衛(wèi)星高度
    this.phei = 700000 / 2;     //軌道高度
    this.time = 0;
  }

  function computeCirclularFlight(source, panduan) {
    var property = new Cesium.SampledPositionProperty();
    if (panduan == 1) {         //衛(wèi)星位置
      for (var i = 0; i < source.length; i++) {
        var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
        var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].hei);
        // 添加位置，和時(shí)間對(duì)應(yīng)
        property.addSample(time, position);
      }
    } else if (panduan == 2) {//軌道位置
      for (var i = 0; i < source.length; i++) {
        var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
        var position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, source[i].phei);
        // 添加位置，和時(shí)間對(duì)應(yīng)
        property.addSample(time, position);
      }
    }
    return property;
  }

  function getRandState(brr, count) {
    for (var m = 0; m < count; m++) {
      var arr = [];
      var t1 = Math.floor(Math.random() * 360);
      var t2 = Math.floor(Math.random() * 360);
      for (var i = t1; i <= 360 + t1; i += 30) {
        var aaa = new mySatePosition();
        aaa.lon = t2;
        aaa.lat = i;
        aaa.time = i - t1;
        arr.push(aaa);
      }
      brr.push(arr);
    }
  }

  function getStatePath(aaa) {
    var entity_ty1p = computeCirclularFlight(aaa, 2);
    var entity_ty1 = viewer.entities.add({
      availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start: start,
        stop: stop
      })]),
      position: entity_ty1p,   //軌道高度
      orientation: new Cesium.VelocityOrientationProperty(entity_ty1p),
      cylinder: {
        HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        length: 700000,
        topRadius: 0,
        bottomRadius: 900000 / 2,
        // material: Cesium.Color.RED.withAlpha(.4),
        // outline: !0,
        numberOfVerticalLines: 0,
        // outlineColor: Cesium.Color.RED.withAlpha(.8),
        material: Cesium.Color.fromBytes(35, 170, 242, 80)
      },
    });

    entity_ty1.position.setInterpolationOptions({
      interpolationDegree: 5,
      interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });

    var entity1p = computeCirclularFlight(aaa, 1);
    //創(chuàng)建實(shí)體
    var entity1 = viewer.entities.add({
      // 將實(shí)體availability設(shè)置為與模擬時(shí)間相同的時(shí)間間隔。
      availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start: start,
        stop: stop
      })]),
      position: entity1p,//計(jì)算實(shí)體位置屬性
      //基于位置移動(dòng)自動(dòng)計(jì)算方向.
      orientation: new Cesium.VelocityOrientationProperty(entity1p),
      //加載飛機(jī)模型
      model: {
        uri: './models/weixing/scene.gltf',
        scale: 1000
      },
      //路徑
      path: {
        resolution: 1,
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.1,
          color: Cesium.Color.PINK
        }),
        width: 5
      }
    });

    //差值器
    entity1.position.setInterpolationOptions({
      interpolationDegree: 5,
      interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });
  }

  function startFunc() {
    for (var i = 0; i < arrStates.length; i++) {
      getStatePath(arrStates[i]);
    }
  }

到此這篇關(guān)于基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)Cesium衛(wèi)星在軌繞行動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: