Cesium

primitives和groundPrimitives：自己新创建对象，前者是创建离地的对象，后者是创建贴地的对象。

billboards：对象的集合

Model，Billboards，ViewportQuad都是图元的类型，图元类型很多，有大有小。

Primitive：自定义几何体。

Cesium.Model.fromGltf({
  url: url,
  modelMatrix: modelMatrix,
  minimumPixelSize: 128,
})

加载模型，url是Gltf文件的路径，modelMatrix是控制模型放在地球上的什么位置。

Cesium.HeadingPitchRange(heading, pitch, r * 2.0)

heading控制航线角，默认向东，向左转为正，向右转为负。pitch控制飞机的俯仰角。

const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);  
const origin = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    height
  );
  const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
    origin,
    hpr
  );

首先根据经纬度高度计算出一个以地球的圆心为原点，初始的X，Y，Z坐标；hpr是移动模型，记录

Color控制飞机颜色，Alpha控制透明度，Mix是在混合模式下颜色切换。

http://localhost:8080/Apps/Sandcastle/index.html?src=HeadingPitchRoll.html&label=All

http://localhost:8080/Apps/Sandcastle/gallery/HeadingPitchRoll2.html

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/simple.czml")
  );

  viewer.camera.flyHome(0);

const canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
  canvas.focus();
});
canvas.focus();

const scene = viewer.scene;

const pathPosition = new Cesium.SampledPositionProperty();
const pathPosition1 = new Cesium.SampledPositionProperty();

const entityPath = viewer.entities.add({
  position: pathPosition,
  name: "path",
  path: {
    show: true,
    leadTime: 0,
    trailTime: 60,
    width: 10,
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.3,
      taperPower: 0.3,
      color: Cesium.Color.PALEGOLDENROD,
    }),
  },
});

const entityPath1 = viewer.entities.add({
  position1: pathPosition1,
  name: "path1",
  path1: {
    show: true,
    leadTime: 0,
    trailTime: 60,
    width: 10,
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.3,
      taperPower: 0.3,
      color: Cesium.Color.PALEGOLDENROD,
    }),
  },
}); 

const camera = viewer.camera;
const controller = scene.screenSpaceCameraController;
const controller2 = scene.screenSpaceCameraController;
let r = 0;

const hpRoll = new Cesium.HeadingPitchRoll();
const hpRange = new Cesium.HeadingPitchRange();
let speed = 100;
const deltaRadians = Cesium.Math.toRadians(3.0);

let position = Cesium.Cartesian3.fromDegrees(
  -123.0744619,
  44.0503706,
  5000.0
);

let position1 = Cesium.Cartesian3.fromDegrees(
  -123.1044619,
  44.1003706,
  5000.0
);

let speedVector = new Cesium.Cartesian3();
const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
  "north",
  "west"
);

const planePrimitive = scene.primitives.add(
  Cesium.Model.fromGltf({
    url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform
    ),
    minimumPixelSize: 128,
  })
);

const planePrimitive1 = scene.primitives.add(
  Cesium.Model.fromGltf({
    url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
      position1,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform
    ),
    minimumPixelSize: 128,
  })
);

planePrimitive.readyPromise.then(function (model) {
  // Play and loop all animations at half-speed
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT,
  });

  // Zoom to model
  r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
  controller.minimumZoomDistance = r * 0.5;
  const center = model.boundingSphere.center;
  const heading = Cesium.Math.toRadians(230.0);
  const pitch = Cesium.Math.toRadians(-20.0);
  hpRange.heading = heading;
  hpRange.pitch = pitch;
  hpRange.range = r * 50.0;
  camera.lookAt(center, hpRange);
});

planePrimitive1.readyPromise.then(function (model) {
  // Play and loop all animations at half-speed
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT,
  });

  // Zoom to model
  r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
  controller2.minimumZoomDistance = r * 0.5;
  const center = model.boundingSphere.center;
  const heading = Cesium.Math.toRadians(230.0);
  const pitch = Cesium.Math.toRadians(-20.0);
  hpRange.heading = heading;
  hpRange.pitch = pitch;
  hpRange.range = r * 50.0;
  camera.lookAt(center, hpRange);
});



document.addEventListener("keydown", function (e) {
  switch (e.keyCode) {
    case 40:
      if (e.shiftKey) {
        // speed down
        speed = Math.max(--speed, 50);
      } else {
        // pitch down
        hpRoll.pitch -= deltaRadians;
        if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
          hpRoll.pitch += Cesium.Math.TWO_PI;
        }
      }
      break;
    case 38:
      if (e.shiftKey) {
        // speed up
        speed = Math.min(++speed, 500);
      } else {
        // pitch up
        hpRoll.pitch += deltaRadians;
        if (hpRoll.pitch > Cesium.Math.TWO_PI) {
          hpRoll.pitch -= Cesium.Math.TWO_PI;
        }
      }
      break;
    case 39:
      if (e.shiftKey) {
        // roll right
        hpRoll.roll += deltaRadians;
        if (hpRoll.roll > Cesium.Math.TWO_PI) {
          hpRoll.roll -= Cesium.Math.TWO_PI;
        }
      } else {
        // turn right
        hpRoll.heading += deltaRadians;
        if (hpRoll.heading > Cesium.Math.TWO_PI) {
          hpRoll.heading -= Cesium.Math.TWO_PI;
        }
      }
      break;
    case 37:
      if (e.shiftKey) {
        // roll left until
        hpRoll.roll -= deltaRadians;
        if (hpRoll.roll < 0.0) {
          hpRoll.roll += Cesium.Math.TWO_PI;
        }
      } else {
        // turn left
        hpRoll.heading -= deltaRadians;
        if (hpRoll.heading < 0.0) {
          hpRoll.heading += Cesium.Math.TWO_PI;
        }
      }
      break;
    default:
  }
});

const headingSpan = document.getElementById("heading");
const pitchSpan = document.getElementById("pitch");
const rollSpan = document.getElementById("roll");
const speedSpan = document.getElementById("speed");
const fromBehind = document.getElementById("fromBehind");

viewer.scene.preUpdate.addEventListener(function (scene, time) {
  speedVector = Cesium.Cartesian3.multiplyByScalar(
    Cesium.Cartesian3.UNIT_X,
    speed / 10,
    speedVector
  );
  position = Cesium.Matrix4.multiplyByPoint(
    planePrimitive.modelMatrix,
    speedVector,
    position
  );
  position1 = Cesium.Matrix4.multiplyByPoint(
    planePrimitive1.modelMatrix,
    speedVector,
    position1
  );
  pathPosition.addSample(Cesium.JulianDate.now(), position);
  pathPosition1.addSample(Cesium.JulianDate.now(), position1);
  Cesium.Transforms.headingPitchRollToFixedFrame(
    position,
    hpRoll,
    Cesium.Ellipsoid.WGS84,
    fixedFrameTransform,
    planePrimitive.modelMatrix
  );
  
  Cesium.Transforms.headingPitchRollToFixedFrame(
    position1,
    hpRoll,
    Cesium.Ellipsoid.WGS84,
    fixedFrameTransform,
    planePrimitive1.modelMatrix
  );

  if (fromBehind.checked) {
    // Zoom to model
    const center = planePrimitive.boundingSphere.center;
    hpRange.heading = hpRoll.heading;
    hpRange.pitch = hpRoll.pitch;
    camera.lookAt(center, hpRange);
  }
  
  if (fromBehind.checked) {
    // Zoom to model
    const center = planePrimitive1.boundingSphere.center;
    hpRange.heading = hpRoll.heading;
    hpRange.pitch = hpRoll.pitch;
    camera.lookAt(center, hpRange);
  }
});

viewer.scene.preRender.addEventListener(function (scene, time) {
  headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(
    1
  );
  pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
  rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
  speedSpan.innerHTML = speed.toFixed(1);
});

religiones/Cesium-Satellite: Cesium 卫星态势感知系统 (github.com)

JavaScript统计数据处理- 概述 - 银河统计 - 博客园 (cnblogs.com)

CZML:卫星

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

Sandcastle.addDefaultToolbarButton("Satellites", function () {
  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/simple.czml")
  );

  viewer.camera.flyHome(0);
});

Sandcastle.addToolbarButton("Vehicle", function () {
  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/Vehicle.czml")
  );

  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
    orientation: {
      heading: 6,
    },
  });
});

Sandcastle.reset = function () {
  viewer.dataSources.removeAll();
};

<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

整合后：

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/simple.czml")
  );

  viewer.camera.flyHome(0);

const canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
  canvas.focus();
});
canvas.focus();

const scene = viewer.scene;

const pathPosition = new Cesium.SampledPositionProperty();
const pathPosition1 = new Cesium.SampledPositionProperty();

const entityPath = viewer.entities.add({
  position: pathPosition,
  name: "path",
  path: {
    show: true,
    leadTime: 0,
    trailTime: 60,
    width: 10,
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.3,
      taperPower: 0.3,
      color: Cesium.Color.PALEGOLDENROD,
    }),
  },
});

const entityPath1 = viewer.entities.add({
  position1: pathPosition1,
  name: "path1",
  path1: {
    show: true,
    leadTime: 0,
    trailTime: 60,
    width: 10,
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.3,
      taperPower: 0.3,
      color: Cesium.Color.PALEGOLDENROD,
    }),
  },
}); 

const camera = viewer.camera;
const controller = scene.screenSpaceCameraController;
const controller2 = scene.screenSpaceCameraController;
let r = 0;

const hpRoll = new Cesium.HeadingPitchRoll();
const hpRange = new Cesium.HeadingPitchRange();
let speed = 5000;
const deltaRadians = Cesium.Math.toRadians(3.0);

let position = Cesium.Cartesian3.fromDegrees(
  -123.0744619,
  44.0503706,
  5000.0
);

let position1 = Cesium.Cartesian3.fromDegrees(
  -120.1044619,
  41.1003706,
  5000.0
);

let speedVector = new Cesium.Cartesian3();
const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
  "north",
  "west"
);

const planePrimitive = scene.primitives.add(
  Cesium.Model.fromGltf({
    url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform
    ),
    minimumPixelSize: 64,
  })
);

const planePrimitive1 = scene.primitives.add(
  Cesium.Model.fromGltf({
    url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
      position1,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform
    ),
    minimumPixelSize: 64,
  })
);

planePrimitive.readyPromise.then(function (model) {
  // Play and loop all animations at half-speed
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT,
  });

  // Zoom to model
  r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
  controller.minimumZoomDistance = r * 0.5;
  const center = model.boundingSphere.center;
  const heading = Cesium.Math.toRadians(230.0);
  const pitch = Cesium.Math.toRadians(-20.0);
  hpRange.heading = heading;
  hpRange.pitch = pitch;
  hpRange.range = r * 50.0;
  //camera.lookAt(center, hpRange);
});

planePrimitive1.readyPromise.then(function (model) {
  // Play and loop all animations at half-speed
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT,
  });

  // Zoom to model
  r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
  controller2.minimumZoomDistance = r * 0.5;
  const center = model.boundingSphere.center;
  const heading = Cesium.Math.toRadians(230.0);
  const pitch = Cesium.Math.toRadians(-20.0);
  hpRange.heading = heading;
  hpRange.pitch = pitch;
  hpRange.range = r * 50.0;
  //camera.lookAt(center, hpRange);
});



document.addEventListener("keydown", function (e) {
  switch (e.keyCode) {
    case 40:
      if (e.shiftKey) {
        // speed down
        speed = Math.max(--speed, 100);
      } else {
        // pitch down
        hpRoll.pitch -= deltaRadians;
        if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
          hpRoll.pitch += Cesium.Math.TWO_PI;
        }
      }
      break;
    case 38:
      if (e.shiftKey) {
        // speed up
        speed = Math.min(++speed, 10000);
      } else {
        // pitch up
        hpRoll.pitch += deltaRadians;
        if (hpRoll.pitch > Cesium.Math.TWO_PI) {
          hpRoll.pitch -= Cesium.Math.TWO_PI;
        }
      }
      break;
    case 39:
      if (e.shiftKey) {
        // roll right
        hpRoll.roll += deltaRadians;
        if (hpRoll.roll > Cesium.Math.TWO_PI) {
          hpRoll.roll -= Cesium.Math.TWO_PI;
        }
      } else {
        // turn right
        hpRoll.heading += deltaRadians;
        if (hpRoll.heading > Cesium.Math.TWO_PI) {
          hpRoll.heading -= Cesium.Math.TWO_PI;
        }
      }
      break;
    case 37:
      if (e.shiftKey) {
        // roll left until
        hpRoll.roll -= deltaRadians;
        if (hpRoll.roll < 0.0) {
          hpRoll.roll += Cesium.Math.TWO_PI;
        }
      } else {
        // turn left
        hpRoll.heading -= deltaRadians;
        if (hpRoll.heading < 0.0) {
          hpRoll.heading += Cesium.Math.TWO_PI;
        }
      }
      break;
    default:
  }
});

const headingSpan = document.getElementById("heading");
const pitchSpan = document.getElementById("pitch");
const rollSpan = document.getElementById("roll");
const speedSpan = document.getElementById("speed");
const fromBehind = document.getElementById("fromBehind");

viewer.scene.preUpdate.addEventListener(function (scene, time) {
  speedVector = Cesium.Cartesian3.multiplyByScalar(
    Cesium.Cartesian3.UNIT_X,
    speed / 10,
    speedVector
  );
  position = Cesium.Matrix4.multiplyByPoint(
    planePrimitive.modelMatrix,
    speedVector,
    position
  );
  position1 = Cesium.Matrix4.multiplyByPoint(
    planePrimitive1.modelMatrix,
    speedVector,
    position1
  );
  pathPosition.addSample(Cesium.JulianDate.now(), position);
  pathPosition1.addSample(Cesium.JulianDate.now(), position1);
  Cesium.Transforms.headingPitchRollToFixedFrame(
    position,
    hpRoll,
    Cesium.Ellipsoid.WGS84,
    fixedFrameTransform,
    planePrimitive.modelMatrix
  );
  
  Cesium.Transforms.headingPitchRollToFixedFrame(
    position1,
    hpRoll,
    Cesium.Ellipsoid.WGS84,
    fixedFrameTransform,
    planePrimitive1.modelMatrix
  );

  if (fromBehind.checked) {
    // Zoom to model
    const center = planePrimitive.boundingSphere.center;
    hpRange.heading = hpRoll.heading;
    hpRange.pitch = hpRoll.pitch;
    //camera.lookAt(center, hpRange);
  }
  
  if (fromBehind.checked) {
    // Zoom to model
    const center = planePrimitive1.boundingSphere.center;
    hpRange.heading = hpRoll.heading;
    hpRange.pitch = hpRoll.pitch;
    //camera.lookAt(center, hpRange);
  }
});

viewer.scene.preRender.addEventListener(function (scene, time) {
  headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(
    1
  );
  pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
  rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
  speedSpan.innerHTML = speed.toFixed(1);
});

http://webglreport.com/

5.15.2 83.0.4103.122

pyuic的使用：首先将.ui文件转换为.py文件，然后进行一定的修改

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'test.ui'
#
# Created by: PyQt5 UI code generator 5.15.6
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtWidgets import QFileDialog, QApplication, QMainWindow		#加头文件
import sys	#修改
class Ui_MainWindow(QMainWindow): #修改QMainWindow
    def __init__(self):	#新加
        super().__init__()
        self.setupUi(self)
        self.retranslateUi(self)
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 28))
        self.menubar.setObjectName("menubar")
        self.menu = QtWidgets.QMenu(self.menubar)
        self.menu.setObjectName("menu")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
        self.action = QtWidgets.QAction(MainWindow)
        self.action.setObjectName("action")
        self.actioncopy = QtWidgets.QAction(MainWindow)
        self.actioncopy.setObjectName("actioncopy")
        self.menu.addAction(self.action)
        self.menu.addAction(self.actioncopy)
        self.menubar.addAction(self.menu.menuAction())

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.menu.setTitle(_translate("MainWindow", "文件"))
        self.action.setText(_translate("MainWindow", "保存"))
        self.actioncopy.setText(_translate("MainWindow", "copy"))


if __name__ == "__main__":	#新加主函数
  app = QApplication(sys.argv) # 创建一个QApplication，也就是你要开发的软件app
  MainWindow1 = QMainWindow()  # 创建一个QMainWindow，用来装载你需要的各种组件、控件
  ui = Ui_MainWindow()             # ui是你创建的ui类的实例化对象
  ui.setupUi(MainWindow1)         # 执行类中的setupUi方法，方法的参数是第二步中创建的QMainWindow
  MainWindow1.show()            # 执行QMainWindow的show()方法，显示这个QMainWindow
  sys.exit(app.exec_())          # 使用exit()或者点击关闭按钮退出QApplication

也可以直接加载.ui文件，简单粗暴。

from PyQt5 import QtWidgets, uic
from PyQt5.QtWidgets import QApplication
import sys


# 注意：ui界面文件是个对话框，那么MyApp就必须继承 QDialog
# 类似的，若ui界面文件是个MainWindow，那么MyApp就必须继承 QMainWindow
class MyApp(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        uic.loadUi('test.ui', self)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    myapp = MyApp()
    myapp.show()
    sys.exit(app.exec_())

https://support.mozilla.com/en-US/kb/how-do-i-upgrade-my-graphics-drivers

卫星星历，又称为两行轨道数据（TLE，Two-Line Orbital Element）

离线版本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Use HeadingPitchRoll">
    <meta name="cesium-sandcastle-labels" content="Tutorials">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
<style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
      <h1>Loading...</h1>
    </div>
    <div id="toolbar">
      <table class="infoPanel">
        <tbody>
          <tr>
            <td>
              Click on the 3D window then use the keyboard to change settings.
            </td>
          </tr>
          <tr>
            <td>Heading: <span id="heading"></span>°</td>
          </tr>
          <tr>
            <td>← to left/→ to right</td>
          </tr>
          <tr>
            <td>Pitch: <span id="pitch"></span>°</td>
          </tr>
          <tr>
            <td>↑ to up/↓ to down</td>
          </tr>
          <tr>
            <td>roll: <span id="roll"></span>°</td>
          </tr>
          <tr>
            <td>← + ⇧ left/→ + ⇧ right</td>
          </tr>
          <tr>
            <td>Speed: <span id="speed"></span>m/s</td>
          </tr>
          <tr>
            <td>↑ + ⇧ to speed up/↓ + ⇧ to speed down</td>
          </tr>
          <tr>
            <td>
              following aircraft
              <input id="fromBehind" type="checkbox">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script id="cesium_sandcastle_script">
window.startup = function (Cesium) {
    'use strict';
//Sandcastle_Begin
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNThmNDE3OC1mZTg1LTQ2ZjQtODAyNS04MDk3YmM3OGExOTIiLCJpZCI6MTI5ODYyLCJpYXQiOjE2Nzk0Nzc4OTl9.h4_2Dis0n4_sBxPoskb9ZceJ7RNyt2SZ8aZARrp1vM4';

const wrapper = document.querySelector("#cesiumContainer");

const config = {
  imageryProvider: new Cesium.TileMapServiceImageryProvider({
    url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
  }),
  //navigationInstructionsInitiallyVisible: false,
  //projectionPicker: false,
  //creditContainer: null,
  //animation: false, // 是否创建动画小器件，左下角仪表
  baseLayerPicker: false, // 是否显示图层选择器
  //fullscreenButton: false, // 是否显示全屏按钮
  geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
  //homeButton: false, // 是否显示Home按钮
  //infoBox: false, // 是否显示信息框
  //sceneModePicker: true, // 是否显示3D/2D选择器
  //selectionIndicator: false, // 是否显示选取指示器组件
  //timeline: false, // 是否显示时间轴
  //navigationHelpButton: false, // 是否显示右上角的帮助按钮
  //requestRenderMode: true, // 是否采用请求渲染模式
  shouldAnimate: true,
};
const viewer = new Cesium.Viewer(wrapper, config);


  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/BEIDOU 3 (C01).czml")
  );

  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/BEIDOU 5 (C06).czml")
  );

  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/BEIDOU-3 M24.czml")
  );

  viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../../SampleData/BEIDOU IGSO-7 (C16).czml")
  );
  //   viewer.dataSources.add(
  //   Cesium.CzmlDataSource.load("../../SampleData/simple.czml")
  // );

  viewer.camera.flyHome(0);

const canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
  canvas.focus();
});
canvas.focus();

const scene = viewer.scene;

const pathPosition = new Cesium.SampledPositionProperty();
const pathPosition1 = new Cesium.SampledPositionProperty();

const entityPath = viewer.entities.add({
  position: pathPosition,
  name: "path",
  path: {
    show: true,
    leadTime: 0,
    trailTime: 60,
    width: 10,
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.3,
      taperPower: 0.3,
      color: Cesium.Color.PALEGOLDENROD,
    }),
  },
});

const entityPath1 = viewer.entities.add({
  position1: pathPosition1,
  name: "path1",
  path1: {
    show: true,
    leadTime: 0,
    trailTime: 60,
    width: 10,
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.3,
      taperPower: 0.3,
      color: Cesium.Color.PALEGOLDENROD,
    }),
  },
}); 

const camera = viewer.camera;
const controller = scene.screenSpaceCameraController;
const controller2 = scene.screenSpaceCameraController;
let r = 0;

const hpRoll = new Cesium.HeadingPitchRoll();
const hpRange = new Cesium.HeadingPitchRange();
let speed = 5000;
const deltaRadians = Cesium.Math.toRadians(3.0);

let position = Cesium.Cartesian3.fromDegrees(
  -123.0744619,
  44.0503706,
  5000.0
);

let position1 = Cesium.Cartesian3.fromDegrees(
  -120.1044619,
  41.1003706,
  5000.0
);

let speedVector = new Cesium.Cartesian3();
const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
  "north",
  "west"
);

const planePrimitive = scene.primitives.add(
  Cesium.Model.fromGltf({
    url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform
    ),
    minimumPixelSize: 64,
  })
);

const planePrimitive1 = scene.primitives.add(
  Cesium.Model.fromGltf({
    url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
      position1,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform
    ),
    minimumPixelSize: 64,
  })
);

planePrimitive.readyPromise.then(function (model) {
  // Play and loop all animations at half-speed
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT,
  });

  // Zoom to model
  r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
  controller.minimumZoomDistance = r * 0.5;
  const center = model.boundingSphere.center;
  const heading = Cesium.Math.toRadians(230.0);
  const pitch = Cesium.Math.toRadians(-20.0);
  hpRange.heading = heading;
  hpRange.pitch = pitch;
  hpRange.range = r * 50.0;
  //camera.lookAt(center, hpRange);
});

planePrimitive1.readyPromise.then(function (model) {
  // Play and loop all animations at half-speed
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT,
  });

  // Zoom to model
  r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
  controller2.minimumZoomDistance = r * 0.5;
  const center = model.boundingSphere.center;
  const heading = Cesium.Math.toRadians(230.0);
  const pitch = Cesium.Math.toRadians(-20.0);
  hpRange.heading = heading;
  hpRange.pitch = pitch;
  hpRange.range = r * 50.0;
  //camera.lookAt(center, hpRange);
});



document.addEventListener("keydown", function (e) {
  switch (e.keyCode) {
    case 40:
      if (e.shiftKey) {
        // speed down
        speed = Math.max(--speed, 100);
      } else {
        // pitch down
        hpRoll.pitch -= deltaRadians;
        if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
          hpRoll.pitch += Cesium.Math.TWO_PI;
        }
      }
      break;
    case 38:
      if (e.shiftKey) {
        // speed up
        speed = Math.min(++speed, 10000);
      } else {
        // pitch up
        hpRoll.pitch += deltaRadians;
        if (hpRoll.pitch > Cesium.Math.TWO_PI) {
          hpRoll.pitch -= Cesium.Math.TWO_PI;
        }
      }
      break;
    case 39:
      if (e.shiftKey) {
        // roll right
        hpRoll.roll += deltaRadians;
        if (hpRoll.roll > Cesium.Math.TWO_PI) {
          hpRoll.roll -= Cesium.Math.TWO_PI;
        }
      } else {
        // turn right
        hpRoll.heading += deltaRadians;
        if (hpRoll.heading > Cesium.Math.TWO_PI) {
          hpRoll.heading -= Cesium.Math.TWO_PI;
        }
      }
      break;
    case 37:
      if (e.shiftKey) {
        // roll left until
        hpRoll.roll -= deltaRadians;
        if (hpRoll.roll < 0.0) {
          hpRoll.roll += Cesium.Math.TWO_PI;
        }
      } else {
        // turn left
        hpRoll.heading -= deltaRadians;
        if (hpRoll.heading < 0.0) {
          hpRoll.heading += Cesium.Math.TWO_PI;
        }
      }
      break;
    default:
  }
});

const headingSpan = document.getElementById("heading");
const pitchSpan = document.getElementById("pitch");
const rollSpan = document.getElementById("roll");
const speedSpan = document.getElementById("speed");
const fromBehind = document.getElementById("fromBehind");

viewer.scene.preUpdate.addEventListener(function (scene, time) {
  speedVector = Cesium.Cartesian3.multiplyByScalar(
    Cesium.Cartesian3.UNIT_X,
    speed / 10,
    speedVector
  );
  position = Cesium.Matrix4.multiplyByPoint(
    planePrimitive.modelMatrix,
    speedVector,
    position
  );
  position1 = Cesium.Matrix4.multiplyByPoint(
    planePrimitive1.modelMatrix,
    speedVector,
    position1
  );
  pathPosition.addSample(Cesium.JulianDate.now(), position);
  pathPosition1.addSample(Cesium.JulianDate.now(), position1);
  Cesium.Transforms.headingPitchRollToFixedFrame(
    position,
    hpRoll,
    Cesium.Ellipsoid.WGS84,
    fixedFrameTransform,
    planePrimitive.modelMatrix
  );
  
  Cesium.Transforms.headingPitchRollToFixedFrame(
    position1,
    hpRoll,
    Cesium.Ellipsoid.WGS84,
    fixedFrameTransform,
    planePrimitive1.modelMatrix
  );

  if (fromBehind.checked) {
    // Zoom to model
    const center = planePrimitive.boundingSphere.center;
    hpRange.heading = hpRoll.heading;
    hpRange.pitch = hpRoll.pitch;
    //camera.lookAt(center, hpRange);
  }
  
  if (fromBehind.checked) {
    // Zoom to model
    const center = planePrimitive1.boundingSphere.center;
    hpRange.heading = hpRoll.heading;
    hpRange.pitch = hpRoll.pitch;
    //camera.lookAt(center, hpRange);
  }
});

viewer.scene.preRender.addEventListener(function (scene, time) {
  headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(
    1
  );
  pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
  rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
  speedSpan.innerHTML = speed.toFixed(1);
});
//Sandcastle_End
    Sandcastle.finishedLoading();
};
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    window.startup(Cesium);
}
</script>
</body>
</html>