天天看點

# Cesium實作衛星在軌繞行Cesium實作衛星在軌繞行

Cesium實作衛星在軌繞行

這個效果其實網上很多案例了,本來不打算寫了,但是做都做了,稍微來說一下吧,代碼實測可用!

最後的效果就是這個樣子的啦!

# Cesium實作衛星在軌繞行Cesium實作衛星在軌繞行

就是很簡單的一個衛星,放射信号,然後圍着軌道轉圈圈。

資源網站

首先呢,分享幾個網站,盡管大家應該都有,但是還是分享一下子吧。

cesium API 中文網站

3D模型下載下傳

其中這個下載下傳3D模型的網站有很多3D模型,可以根據自己的需要搜尋下載下傳使用,盡管大部分是收費的,但是又免費的呀,自己測試或者是玩的話,我覺得夠用了,我覺得還不錯的呢!

繪制衛星繞軌動效

首先這個稍微說一下哈,其實就是用了 cesium 的時間軸,然後添加衛星模型,在距離地面的固定高度按照設定好的軌迹進行繞地旋轉,關于下面的錐形信号覆寫區域,就是在衛星正下方,添加繪制了一個圓柱形的模型,使得上面的圓截面半徑為0,下面的圓截面半徑大一些,然後就是一個錐形了。

接下來直接上代碼!!!! 其實我也是看的别的部落客發的文章,然後稍作修改出來的效果,但是大體實作方式就是我上面說的。

初始化藍星

首先要實作這個功能,一定要開啟時間軸的呀,不然不好使哈!

timeline: true, //是否顯示時間線控件
           

上面這個得開起來!

viewer = new Cesium.Viewer('map', {
      baseLayerPicker: false,  // 影像切換
      animation: true,  //是否顯示動畫控件
      infoBox: false, //是否顯示點選要素之後顯示的資訊
      geocoder: false, //是否顯示地名查找控件
      timeline: true, //是否顯示時間線控件
      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"
      })
    })
           

添加衛星模型方法

// 衛星
  function satellite() {
    start = new Cesium.JulianDate.fromDate(new Date());  // 擷取目前時間 這不是國内的時間
    start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());  // 添加八小時,得到我們東八區的中原標準時間
    stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());  // 設定一個結束時間,意思是360秒之後時間結束

     
    viewer.clock.startTime = start.clone();   // 給cesium時間軸設定開始的時間,也就是上邊的東八區時間
    viewer.clock.stopTime = stop.clone();     // 設定cesium時間軸設定結束的時間
    viewer.clock.currentTime = start.clone(); // 設定cesium時間軸設定目前的時間
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  // 時間結束了,再繼續重複來一遍
    //時間變化來控制速度 // 時間速率,數字越大時間過的越快
    viewer.clock.multiplier = 2;
    //給時間線設定邊界
    viewer.timeline.zoomTo(start, stop);

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

相關方法

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

  function computeCirclularFlight(source, panduan) {
    var property = new Cesium.SampledPositionProperty();
    if (panduan == 1) {         //衛星位置
      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);
        // 添加位置,和時間對應
        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);
        // 添加位置,和時間對應
        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);
    //建立實體
    var entity1 = viewer.entities.add({
      // 将實體availability設定為與模拟時間相同的時間間隔。
      availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start: start,
        stop: stop
      })]),
      position: entity1p,//計算實體位置屬性
      //基于位置移動自動計算方向.
      orientation: new Cesium.VelocityOrientationProperty(entity1p),
      //加載飛機模型
      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]);
    }
  }
           

繼續閱讀