从零搭建，Cesium场景之卫星轨道展示，一文搞定！

2023-10-25 16:29:22

前言

随着太空探索的不断深入，卫星在现代社会中的作用日益显著。从气象预报到导航定位，从通信传输到资源勘探，卫星技术已渗透到生活的方方面面。为了直观展示卫星的运行轨迹，我们需要借助强大的3D可视化引擎。CesiumJS作为一款开源且功能强大的地球可视化库，提供了完善的动画展示功能，非常适合用于卫星轨道展示。

Cesium简介

CesiumJS是一个基于WebGL的开源JavaScript库，用于创建交互式三维地球和火星的可视化。它提供了丰富的API和广泛的示例，使开发人员能够轻松构建具有地理空间信息的应用程序。CesiumJS支持多种数据格式，包括KML、GeoJSON和3D Tiles，并且可以无缝集成第三方库，如Leaflet和OpenLayers。

Cesium创建卫星轨道

1. 添加卫星模型

首先，我们需要创建一个卫星模型。可以使用3D建模软件（如Blender或3ds Max）创建模型，或从在线资源（如Sketchfab）下载预制的模型。卫星模型应为glTF或COLLADA格式，并具有明确的坐标系。

2. 创建轨道路径

接下来，需要创建卫星的轨道路径。轨道路径可以是圆形、椭圆形或抛物线。CesiumJS提供了Entity API来创建和管理实体，包括卫星和轨道。我们可以使用Entity API来定义轨道的形状、大小和位置。

3. 动画卫星运动

为了使卫星沿轨道运动，我们需要创建一个动画。CesiumJS提供了Clock和Animation API来创建和管理动画。我们可以使用Animation API来设置卫星的运动速度和方向。

4. 添加扫描光波（可选）

如果需要模拟卫星的扫描光波，可以使用CesiumJS的PolylineTrail API来创建光波轨迹。PolylineTrail可以沿路径创建一连串点，并设置颜色和宽度。

示例代码

// 创建一个Cesium Viewer实例
const viewer = new Cesium.Viewer("cesiumContainer");

// 添加卫星模型
const satelliteModel = viewer.entities.add({
  name: "Satellite",
  model: {
    uri: "path/to/satellite.gltf",
    scale: 1.0,
  },
});

// 创建轨道路径
const orbitPath = viewer.entities.add({
  name: "Orbit",
  path: {
    // 设置轨道形状和尺寸
    shape: new Cesium.EllipseGraphics(),
    width: 2.0,
    material: Cesium.Color.RED,
  },
});

// 动画卫星运动
const animation = viewer.clock.animate(function (time) {
  // 设置卫星的运动速度和方向
  satelliteModel.position = Cesium.Cartesian3.fromDegrees(
    // 经度和纬度
    0.0,
    0.0,
    0.0
  );
});

// 添加扫描光波
const lightWave = viewer.entities.add({
  name: "LightWave",
  polyline: {
    positions: [
      // 设置扫描光波轨迹
      new Cesium.Cartesian3(-1000000.0, 0.0, 0.0),
      new Cesium.Cartesian3(1000000.0, 0.0, 0.0),
    ],
    width: 1.0,
    material: Cesium.Color.YELLOW,
  },
});