Cesium realizes satellite orbit detour

Cesium Realize the orbit detour of the satellite

In fact, there are many cases on the Internet , I didn't intend to write , But it's all done , Let's say a little , Code available ！

The final effect is like this ！

It is a very simple satellite , Radio signal , And then go around the track .

Resource Website

First of all , Share several websites , Although everyone should have , But let's share .

cesium API Chinese website

3D Model download

One of these downloads 3D There are many model websites 3D Model , You can search, download and use according to your own needs , Although most of them are charged , But it's free , Test or play by yourself , I think it's enough , I think it's pretty good ！

Draw the dynamic effect of satellite orbiting

First of all, let's talk about this a little , In fact, it is used cesium Time axis , Then add the satellite model , Rotate around the ground at a fixed height from the ground according to the set track , About the conical signal coverage area below , Just below the satellite , Add and draw a cylindrical model , So that the radius of the circular section above is 0, The radius of the lower circular section is larger , Then there is a cone , See me for specific cone drawing cases This blog 【 Shuttle door 】 Ha , There are many cases of drawing shapes .

Next, go straight to the code ！！！！ In fact, I also read articles posted by other bloggers , Then slightly modify the effect , But the general implementation method is what I said above .

Initialize Blue Star

The first step is to implement this function , Be sure to open the timeline , Otherwise, it will be difficult to use ！

timeline: true, // Show timeline controls 

This one has to be opened ！

    viewer = new Cesium.Viewer('map', {
    
      baseLayerPicker: false,  //  Image switching 
      animation: true,  // Whether to display animation controls 
      infoBox: false, // Whether to display the information displayed after clicking the element 
      geocoder: false, // Whether to display the place name search control 
      timeline: true, // Show timeline controls 
      fullscreenButton: false,
      shouldAnimate: false,
      navigationHelpButton: false, // Whether to display help information control 
      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"
      })
    })

Add satellite model method

The main task is to configure this timeline , Then call the method to put the satellite into the blue star .

  //  satellite 
  function satellite() {
    
    start = new Cesium.JulianDate.fromDate(new Date());  //  Get the current time   This is not a domestic time 
    start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());  //  Add eight hours , Get the Beijing time of our east 8th District 
    stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());  //  Set an end time , intend 360 Time ends in seconds 

     
    viewer.clock.startTime = start.clone();   //  to cesium The timeline sets the start time , That is, the time of Dongba District above 
    viewer.clock.stopTime = stop.clone();     //  Set up cesium The timeline sets the end time 
    viewer.clock.currentTime = start.clone(); //  Set up cesium The timeline sets the current time 
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  //  Time is over , Repeat it again 
    // Time changes to control speed  //  Time rate , The larger the number, the faster time passes 
    viewer.clock.multiplier = 2;
    // Set boundaries for the timeline 
    viewer.timeline.zoomTo(start, stop);

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

Related methods

All of a sudden, he sent the code directly , In fact, they are all available online , You can find it if I don't send it , Then these are put together on the Internet , And then , You should be able to read it , If you don't understand it, just look for it Cesium API Check the Chinese website , It shouldn't be difficult . come on. ！

function mySatePosition() {
    
    this.lon = 0;
    this.lat = 0;
    this.hei = 700000;          // Satellite altitude 
    this.phei = 700000 / 2;     // Track height 
    this.time = 0;
  }

  function computeCirclularFlight(source, panduan) {
    
    var property = new Cesium.SampledPositionProperty();
    if (panduan == 1) {
             // Satellite position 
      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);
        //  Add location , Corresponding to time 
        property.addSample(time, position);
      }
    } else if (panduan == 2) {
    // Track position 
      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);
        //  Add location , Corresponding to time 
        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,   // Track height 
      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);
    // Create entities 
    var entity1 = viewer.entities.add({
    
      //  Put entity availability Set to the same time interval as the simulation time .
      availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
    
        start: start,
        stop: stop
      })]),
      position: entity1p,// Calculate entity location attributes 
      // Automatically calculate direction based on position movement .
      orientation: new Cesium.VelocityOrientationProperty(entity1p),
      // Loading aircraft model 
      model: {
    
        uri: './models/weixing/scene.gltf',
        scale: 1000
      },
      // route 
      path: {
    
        resolution: 1,
        material: new Cesium.PolylineGlowMaterialProperty({
    
          glowPower: 0.1,
          color: Cesium.Color.PINK
        }),
        width: 5
      }
    });

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

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