Clock Control

<!--
  示例：控制时钟倍速、区间与循环方式
  要点：clock 的 multiplier、clockRange、shouldAnimate 决定实体运动节奏
  依赖：CesiumJS 1.121 · jsDelivr CDN，位置由 clock 时间回调算出
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>时钟控制</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Widgets/widgets.css">
<style>
  html,body{height:100%;margin:0}
  body{background:#0e1116;color:#e6e8ec;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  #c{height:100%}
  .hud{position:absolute;left:12px;top:12px;z-index:5;background:rgba(23,28,35,.92);
       border:1px solid #2a313b;border-radius:6px;padding:9px 12px;font-size:12px;
       color:#a2a9b6;width:250px}
  .hud b{color:#e6e8ec;font-weight:600}
  .hud .row{margin-top:6px}
  .hud button{font:inherit;font-size:12px;padding:3px 9px;margin:0 4px 4px 0;border-radius:4px;
       cursor:pointer;border:1px solid #343b46;background:#1d232b;color:#cfd6e2}
  .hud button.on{background:#1d3a5c;border-color:#3d6f9e;color:#cfe4ff}
  select{font:inherit;font-size:12px;background:#1d232b;color:#cfd6e2;
       border:1px solid #343b46;border-radius:4px;padding:2px 4px;width:100%;margin-top:4px}
  .mono{font-family:ui-monospace,Consolas,monospace;color:#8fb7e0;font-size:11px}
  .cesium-viewer-bottom .cesium-widget-credits,.cesium-viewer-animationContainer,
  .cesium-viewer-timelineContainer{display:none!important}
</style>
</head>
<body>
<div id="c"></div>
<div class="hud">
  <div><b>时钟控制</b></div>
  <div class="row mono" id="time">—</div>
  <div class="row">
    <button data-m="1" class="on">1×</button>
    <button data-m="10">10×</button>
    <button data-m="60">60×</button>
    <button data-m="600">600×</button>
  </div>
  <div class="row">
    <select id="range">
      <option value="LOOP_STOP">LOOP_STOP 循环</option>
      <option value="CLAMPED">CLAMPED 到端点停住</option>
    </select>
  </div>
  <div class="row"><button id="reset">回到起点</button></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Cesium.js"></script>
<script>
(function () {
  'use strict';

  var viewer = new Cesium.Viewer('c', {
    baseLayer: false,
    baseLayerPicker: false, geocoder: false, homeButton: false,
    sceneModePicker: false, navigationHelpButton: false,
    animation: false, timeline: false, fullscreenButton: false,
    infoBox: false, selectionIndicator: false
  });

  var scene = viewer.scene;
  scene.globe.baseColor = Cesium.Color.fromCssColorString('#1c2733');
  scene.backgroundColor = Cesium.Color.fromCssColorString('#0e1116');
  scene.skyBox.show = false;
  scene.sun.show = false;
  scene.moon.show = false;
  if (scene.skyAtmosphere) scene.skyAtmosphere.show = false;

  var clock = viewer.clock;
  clock.startTime = Cesium.JulianDate.fromIso8601('2026-10-28T00:00:00Z');
  clock.stopTime = Cesium.JulianDate.addSeconds(
    clock.startTime, 3600, new Cesium.JulianDate()
  );
  clock.currentTime = clock.startTime.clone();
  clock.multiplier = 1;
  clock.clockRange = Cesium.ClockRange.LOOP_STOP;
  clock.shouldAnimate = true;

  var START = clock.startTime.clone();
  var CENTER = { lng: 116.389, lat: 39.906 };
  var RADIUS = 0.014;

  /* 位置完全由 clock 推出来：一小时绕一圈 */
  var probe = viewer.entities.add({
    position: new Cesium.CallbackProperty(function (time, result) {
      var sec = Cesium.JulianDate.secondsDifference(time, START);
      var a = sec / 3600 * Math.PI * 2 - Math.PI / 2;
      return Cesium.Cartesian3.fromDegrees(
        CENTER.lng + Math.cos(a) * RADIUS,
        CENTER.lat + Math.sin(a) * RADIUS * 0.72,
        400,
        Cesium.Ellipsoid.WGS84,
        result
      );
    }, false),
    point: {
      pixelSize: 12,
      color: Cesium.Color.fromCssColorString('#ffb13d'),
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      disableDepthTestDistance: Number.POSITIVE_INFINITY
    },
    label: {
      text: '沿轨道运动',
      font: '500 12px "Microsoft YaHei", sans-serif',
      fillColor: Cesium.Color.WHITE,
      pixelOffset: new Cesium.Cartesian2(0, -22),
      disableDepthTestDistance: Number.POSITIVE_INFINITY
    }
  });

  /* 轨道参考线与中心塔 */
  var orbit = [];
  for (var i = 0; i <= 64; i++) {
    var a = i / 64 * Math.PI * 2;
    orbit.push(
      CENTER.lng + Math.cos(a) * RADIUS,
      CENTER.lat + Math.sin(a) * RADIUS * 0.72
    );
  }
  viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(orbit),
      width: 1.5,
      material: new Cesium.PolylineDashMaterialProperty({
        color: Cesium.Color.fromCssColorString('#41536a'),
        dashLength: 16
      }),
      clampToGround: true
    }
  });
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(CENTER.lng, CENTER.lat, 200),
    cylinder: {
      length: 400, topRadius: 0, bottomRadius: 60,
      material: Cesium.Color.fromCssColorString('#3f86e0').withAlpha(0.8)
    }
  });

  var multButtons = Array.prototype.slice.call(
    document.querySelectorAll('.hud button[data-m]')
  );

  multButtons.forEach(function (b) {
    b.addEventListener('click', function () {
      clock.multiplier = parseInt(b.getAttribute('data-m'), 10);
      multButtons.forEach(function (x) { x.className = ''; });
      b.className = 'on';
    });
  });

  document.getElementById('range').addEventListener('change', function () {
    clock.clockRange = Cesium.ClockRange[this.value];
  });

  document.getElementById('reset').addEventListener('click', function () {
    clock.currentTime = START.clone();
    clock.shouldAnimate = true;
  });

  var timeEl = document.getElementById('time');

  scene.postRender.addEventListener(function () {
    timeEl.textContent = Cesium.JulianDate.toIso8601(clock.currentTime, 0);
    probe.label.text = '倍速 ' + clock.multiplier + '×';
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.389, 39.876, 2600),
    orientation: {
      heading: 0,
      pitch: Cesium.Math.toRadians(-28),
      roll: 0
    },
    duration: 0
  });
})();
</script>
</body>
</html>