Entity Tracking【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Entity%20tracking.html

效果如下视频所示：

示例代码如下：

<template>
  <CesiumMap loadTerrain enableTimeline @viewerCreated="viewerCreated" />
  <!-- 参数调整面板 -->
  <div class="panel">
    <el-form :model="form" label-suffix=":" label-width="auto">
      <el-form-item label="追踪实体">
        <el-radio-group
          v-model="form.entity"
          @change="handleTrackingEntityChange">
          <el-radio value="satellites">卫星</el-radio>
          <el-radio value="drone">无人机</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="追踪参考系">
        <el-select
          class="select"
          v-model="form.frame"
          placeholder="空"
          @change="handleFrameChange">
          <el-option
            v-for="item in frames"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
/**
 * 示例介绍：这个示例展示了可以应用于两个不同实体的可能跟踪参考框架：一个近地表缓慢移动的物体和一颗卫星。
 *
 * 关于追踪参考系-TrackingReferenceFrame，请参考以下官方文档进一步学习：
 * https://cesium.com/learn/cesiumjs/ref-doc/global.html?classFilter=TrackingReferenceFrame#TrackingReferenceFrame
 * - AUTODETECT: 自动检测算法。
 *   用于跟踪实体的参考系将根据其轨迹自动选择：
 *    - 近表面缓慢移动的物体将在实体的本地东北天(ENU)参考系中进行跟踪，
 *    - 而卫星等较快的物体将使用 VVLH（Vehicle Velocity, Local Horizontal,飞行器速度-本地水平坐标系）。
 *      - 关于VVLH，VV，这里称为V轴，V轴指向飞行器的的瞬时速度方向；
 *      - H轴垂直于地心到飞行器的连线，并指向轨道平面的水平方向，与速度方向共同构成轨道平面。
 *      - 由上述V轴和H轴计算得出第三轴，这里称为L轴，即轨道平面的法线方向。
 *   通用场景。
 * - INERTIAL: 适用于卫星、航天器，不考虑地球自转，但在没有定义方向时会回退到AUTODETECT。
 * - VELOCITY: 适用于导弹、飞机等，始终对齐速度方向，满足了特定领域(如航空航天)的精确控制需求。
 * - ENU: 适用于地面车辆，建筑物等，固定于当地地理方向。
 */

import { verifyTerrain } from "@/utils/utils.js";

let viewer, dataSource, satellite, drone;

const startTime = Cesium.JulianDate.fromIso8601("2012-03-15T10:00:00Z");
const satelliteStopTime = Cesium.JulianDate.fromIso8601("2012-03-16T10:00:00Z");
const droneStopTime = Cesium.JulianDate.fromIso8601("2012-03-15T10:00:30Z");

const form = reactive({
  entity: "satellites",
  frame: "AUTODETECT",
});

const frames = ref([
  {
    value: "AUTODETECT",
    label: "自动检测",
  },
  {
    value: "INERTIAL",
    label: "惯性坐标系",
  },
  {
    value: "VELOCITY",
    label: "速度坐标系",
  },
  {
    value: "ENU",
    label: "东北天坐标系",
  },
]);

async function viewerCreated(v) {
  viewer = v;
  // verifyTerrain(viewer);
  init();
}

async function init() {
  dataSource = await viewer.dataSources.add(
    Cesium.CzmlDataSource.load("../SampleData/tracking.czml")
  );
  satellite = dataSource.entities.getById("Satellite/ISS");
  drone = dataSource.entities.getById("CesiumDrone");
  satellite.viewFrom = new Cesium.Cartesian3(-300, 20, 100);
  drone.viewFrom = new Cesium.Cartesian3(-50, 0, 5);
  handleTrackingEntityChange(form.entity);
  handleFrameChange(form.frame);
}

function handleTrackingEntityChange(value) {
  viewer.clock.currentTime = startTime;
  if (value === "satellites") {
    viewer.clock.stopTime = satelliteStopTime;
    viewer.clock.multiplier = 30;
    viewer.timeline.zoomTo(startTime, satelliteStopTime);
    viewer.trackedEntity = satellite;
  } else if (value === "drone") {
    viewer.clock.stopTime = droneStopTime;
    viewer.clock.multiplier = 1;
    viewer.timeline.zoomTo(startTime, droneStopTime);
    viewer.trackedEntity = drone;
  }
}

function handleFrameChange(value) {
  switch (value) {
    case "AUTODETECT":
      satellite.trackingReferenceFrame =
        Cesium.TrackingReferenceFrame.AUTODETECT;
      drone.trackingReferenceFrame = Cesium.TrackingReferenceFrame.AUTODETECT;
      break;
    case "INERTIAL":
      satellite.trackingReferenceFrame = Cesium.TrackingReferenceFrame.INERTIAL;
      drone.trackingReferenceFrame = Cesium.TrackingReferenceFrame.INERTIAL;
      break;
    case "VELOCITY":
      satellite.trackingReferenceFrame = Cesium.TrackingReferenceFrame.VELOCITY;
      drone.trackingReferenceFrame = Cesium.TrackingReferenceFrame.VELOCITY;
      break;
    case "ENU":
      satellite.trackingReferenceFrame = Cesium.TrackingReferenceFrame.ENU;
      drone.trackingReferenceFrame = Cesium.TrackingReferenceFrame.ENU;
      break;
    default:
      break;
  }
}
</script>

<style lang="scss" scoped>
.panel {
  position: absolute;
  width: 350px;
  top: 10px;
  right: 10px;
  background-color: white;
  border-radius: 4px;
  z-index: 2;
  padding: 10px 5px 10px 10px;
  opacity: 0.96;
  box-shadow: rgba(195, 191, 188, 0.7) 0px 1px 2px 0px,
    rgba(195, 191, 188, 0.85) 0px 2px 4px 2px;
}

:deep(.el-form-item) {
  margin-bottom: 6px;
}
</style>