cesium模拟卫星环绕

效果：

网上查询很多方法个人觉得较为复杂冗余 以下按照个人想法完成效果：

1.设置模拟时间

2.初始化轨道坐标

3.按照坐标把轨道画出来

4.添加卫星模型

5.优化卫星轨迹

1.设置模拟时间代码：

 // 设定了模拟时间的边界
  var start = new Cesium.JulianDate.fromDate(new Date()); // 当前时间
  start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); //东八区时间
  // 结束时间
  var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
  //确保查看器处于预期的时间
  viewer.clock.startTime = start.clone();
  viewer.clock.stopTime = stop.clone();
  viewer.clock.currentTime = start.clone();
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
  //时间变化来控制速度 // 时间速率，数字越大时间过的越快
  viewer.clock.multiplier = 10;

2.初始化轨道坐标代码：

  // 动态控制模型的位置，达到模型沿轨迹平滑移动的目的 后面优化卫星轨迹会用到这个
  var positionArr = new Cesium.SampledPositionProperty(); 
  var lon = Math.floor(Math.random() * 360);
  var lat = Math.floor(Math.random() * 360);
  var line = []; //轨道坐标集合
  for (let k = lat; k <= 360 + lat; k += 30) {
    let obj = {
      lon: lon,
      lat: k,
      time: k - lat,
      alt: 2000000,
    };
    var time = Cesium.JulianDate.addSeconds(
      start,
      obj.time,
      new Cesium.JulianDate()
    );
    // 按轨迹画点以便于直观验证轨迹坐标点
    // viewer.entities.add({
    //   position: Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.alt),
    //   point: {
    //     pixelSize: 30,
    //     color: Cesium.Color.fromCssColorString(`rgba(255,0,255,1)`), //圆的颜色
    //     outlineColor: Cesium.Color.fromCssColorString(`rgba(0,255,255,1)`), //描边颜色
    //     outlineWidth: 5, //描边宽度
    //   },
    // });
    console.log(obj, "position"); //轨迹坐标点
    line.push(Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.alt));
    // 经纬度转换为世界坐标   轨道坐标
    var position = Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.alt);
    console.log(position, "position");
    // addSample (time, position, derivatives ) time:采样时间;position:在指定时间的位置;derivatives:可选在指定时间的导数值数组。
    positionArr.addSample(time, position);
  }

这里可以用加点的方式验证轨道左边是否正确 方法为注释内容

---

3.按照坐标把轨道画出来代码：

  // 添加轨道
   viewer.entities.add({
     id: "line",
     polyline: {
       positions: line,
       width: 2,
      material: Cesium.Color.fromCssColorString(`rgba(0,255,255,1)`),
   },
  });

4..添加卫星模型以及优化卫星轨道代码：

  var satellite = viewer.entities.add({
    // 将实体availability设置为与模拟时间相同的时间间隔。
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: start,
        stop: stop,
      }),
    ]),
    position: positionArr, //计算实体位置属性
    //基于位置移动自动计算方向.
    orientation: new Cesium.VelocityOrientationProperty(positionArr),
    //加载卫星模型
    model: {
      uri: "./model/weixing3/scene.gltf",
      minimumPixelSize: 32,
    },
    //卫星行径 优化时方便看到行径，优化后可注释掉path
    path: {
      resolution: 1,
      // material: new Cesium.PolylineGlowMaterialProperty({
      //   glowPower: 0.1,
      //   color: Cesium.Color.PINK,
      // }),
      material: Cesium.Color.fromCssColorString(`rgba(0,255,255,1)`),
      width: 3,
    },
  });
  // 这个让折现变成曲线 让卫星轨迹能更平滑
  satellite.position.setInterpolationOptions({
    interpolationDegree: 5,
    interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
  });

如果不使用setInterpolationOptions方法卫星轨迹就会按照折现来跑，如下：

蓝色线条为轨道路径 紫色线为卫星路径

---

让卫星路径平滑

1. var positionArr = new Cesium.SampledPositionProperty(); //上面第二部有用到这个方法

2. positionArr.addSample(time, position);//上面第二部有用到这个方法

3.给卫星添加position的时候需要用到处理过后的positionArr 

4. satellite.position.setInterpolationOptions（）方法让折现变成曲线

完整代码：

<template>
  <div class="btn"></div>
  <Map />
</template>

<script setup>
import Map from "@/components/map/Map.vue";
import { nextTick, onUnmounted, reactive } from "vue";
const person = reactive({});
nextTick(() => {
  // 设定了模拟时间的边界
  var start = new Cesium.JulianDate.fromDate(new Date()); // 当前时间
  start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); //东八区时间
  // 结束时间
  var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
  //确保查看器处于预期的时间
  viewer.clock.startTime = start.clone();
  viewer.clock.stopTime = stop.clone();
  viewer.clock.currentTime = start.clone();
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
  //时间变化来控制速度 // 时间速率，数字越大时间过的越快
  viewer.clock.multiplier = 10;
  //给时间线设置边界
  // viewer.timeline.zoomTo(start, stop);
  // 动态控制模型的位置，达到模型沿轨迹平滑移动的目的 后面优化卫星轨迹会用到这个
  var positionArr = new Cesium.SampledPositionProperty();
  var lon = Math.floor(Math.random() * 360);
  var lat = Math.floor(Math.random() * 360);
  var line = []; //轨道坐标集合
  for (let k = lat; k <= 360 + lat; k += 30) {
    let obj = {
      lon: lon,
      lat: k,
      time: k - lat,
      alt: 2000000,
    };
    var time = Cesium.JulianDate.addSeconds(
      start,
      obj.time,
      new Cesium.JulianDate()
    );
    // 按轨迹画点以便于直观验证轨迹坐标点
    // viewer.entities.add({
    //   position: Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.alt),
    //   point: {
    //     pixelSize: 30,
    //     color: Cesium.Color.fromCssColorString(`rgba(255,0,255,1)`), //圆的颜色
    //     outlineColor: Cesium.Color.fromCssColorString(`rgba(0,255,255,1)`), //描边颜色
    //     outlineWidth: 5, //描边宽度
    //   },
    // });
    console.log(obj, "position"); //轨迹坐标点
    line.push(Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.alt));
    // 经纬度转换为世界坐标   轨道坐标
    var position = Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.alt);
    console.log(position, "position");
    // addSample (time, position, derivatives ) time:采样时间;position:在指定时间的位置;derivatives:可选在指定时间的导数值数组。
    positionArr.addSample(time, position);
  }
  // 添加轨道
  viewer.entities.add({
    id: "line",
    polyline: {
      positions: line,
      width: 2,
      material: Cesium.Color.fromCssColorString(`rgba(0,255,255,1)`),
    },
  });

  // 画卫星
  var satellite = viewer.entities.add({
    // 将实体availability设置为与模拟时间相同的时间间隔。
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: start,
        stop: stop,
      }),
    ]),
    position: positionArr, //计算实体位置属性
    //基于位置移动自动计算方向.
    orientation: new Cesium.VelocityOrientationProperty(positionArr),
    //加载飞机模型
    model: {
      uri: "./model/weixing3/scene.gltf",
      minimumPixelSize: 32,
    },
    //卫星行径 优化时方便看到行径，优化后可注释掉path
    // path: {
    //   resolution: 1,
    //   // material: new Cesium.PolylineGlowMaterialProperty({
    //   //   glowPower: 0.1,
    //   //   color: Cesium.Color.PINK,
    //   // }),
    //   material: Cesium.Color.fromCssColorString(`rgba(255,0,255,1)`),
    //   width: 3,
    // },
  });
  // 这个让折现变成曲线 让卫星轨迹能更平滑
  satellite.position.setInterpolationOptions({
    interpolationDegree: 5,
    interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
  });
});

onUnmounted(() => {});
</script>
<style scoped lang='less'>
.btn {
  position: absolute;
  left: 300px;
  top: 30px;
  z-index: 999;
}
</style>