cesium学习 之 Entity 画卫星轨道 （一）

cesium学习 之 Entity 画卫星轨道 （一）

最近公司想做个卫星轨迹展示大屏，原型图看上去确实比较逼真，然后我就惨了，开始学习cesium，满满的English文档，看着头大。
B站上面有入门级讲解视频，挺适合刚学习的，我也是看了才慢慢的了解cesium，但是也仅仅是了解，要到达项目要求，这快乐的学习路程（其实很苦逼的）开始了。
因为已经入门了，懂得一些基本的常识之后，现在我就一点点记载接下来更深的知识。

Entity

中文API

基本属性

我现在要做的就是 使用entity创建如下的卫星以及轨道
卫星轨道
废话不多说

使用entity绘画一条线

先来一个地球

<template>
  <div class="satewrap">
    <div id="entityCesium" class="satebox"></div>
  </div>
</template>
<script>


import * as Cesium from "cesium/Source/Cesium.js";
var viewer = null
export default {
  name: "CesiumContainer",
  data() {
    return {};
  },
  methods: {
    // 渲染卫星
    initSateliteHan() {
      viewer = new Cesium.Viewer("entityCesium");
      //去掉版权信息
      viewer._cesiumWidget._creditContainer.style.display = "none";
      // 设定了模拟时间的边界
      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);
    },
  },
  mounted() {
    this.initSateliteHan();
  },
};
</script>
<style lang="less" scoped>
.satewrap {
  width: 100%;
  height: 100%;
}
.satebox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>

召唤地球
现在开始使用entity制作一条线，我先看看文档和实例

 // 开始绘画一个 
const polyline_1 =  viewer.entities.add({
  id: 'my_polyline_1',
  name: 'test_polyline_1',
  // billboard: billboard,
   polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      0,
      39,
      2500000,
      60,
      39,
      2500000,
      120,
      39,
      2500000,
      180,
      39,
      2500000,
      240,
      39,
      2500000,
      300,
      39,
      2500000,
      360,
      39,
      2500000,
    ]),
    width: 5,
    material: new Cesium.PolylineOutlineMaterialProperty({
      color: Cesium.Color.ORANGE,
      outlineWidth: 2,
      outlineColor: Cesium.Color.BLACK,
    }),
  },
  // availability: 暂时不需要这个，后期需要跟时间绑定
})

直接就这样
好丑的线
所以接下来美化一下

绘画轨道了

 var positionArr = new Cesium.SampledPositionProperty(); // 这才是做重要的
 var lon = Math.floor(Math.random() * 360);
   var lat = Math.floor(Math.random() * 360);
   for(let k=lat;k<=360 + lat;k+=30) {
     let obj = {
       lon: lon,
       lat: k,
       time: k- lat,
       hei: 7000000,
     }
     // console.log(obj,'obj');
     var time = Cesium.JulianDate.addSeconds(
       start,
       obj.time,
       new Cesium.JulianDate()
     );
     // 经纬度转换为世界坐标
     var position = Cesium.Cartesian3.fromDegrees(
       obj.lon,
       obj.lat,
       obj.hei
     );
     // console.log(position, 'position');
     
     positionArr.addSample(time, position);
     // positionArr.push(property)
   }
   // 开始绘画一个 
   const polyline_1 =  viewer.entities.add({
     availability: new Cesium.TimeIntervalCollection([
       new Cesium.TimeInterval({
         start: start,
         stop: stop,
       }),
     ]),
     id: 'my_polyline_1',
     name: 'test_polyline_1',
     position: positionArr,

     orientation: new Cesium.VelocityOrientationProperty(positionArr),
     path: {
       resolution: 1,
       material: new Cesium.PolylineGlowMaterialProperty({
         glowPower: 0.1,
         color: Cesium.Color.GREEN,
       }),
       width: 5,
     },
   })
   // console.log(polyline_1,'polyline_1');
   //这个让折现变成曲线
   polyline_1.position.setInterpolationOptions({
     interpolationDegree: 5,
     interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
   });

终于成为一个环绕地球的圆形轨道
写法稍微不一样，不是用polyline 写的，而是用path
ok,今天就这样结束，好困！
明天加卫星，带点项目上的东西，一边学习一边记笔记。