Minimal Scene

<!--
  本示例：Cesium 最小可运行场景（完全不需要 ion Token）
  核心逻辑：搜索「核心逻辑开始 / 结束」两行注释
  依赖：CesiumJS 1.121 · jsDelivr CDN
-->
<!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>Cesium 最小可运行场景（免 ion Token）</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 {
    font: 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #0e1116; color: #e6e8ec;
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
  }

  /* 顶部说明条：告诉读者「为什么这里没有 Token」 */
  .hint {
    flex: 0 0 auto;
    padding: 8px 14px;
    background: #171c23;
    border-bottom: 1px solid #2a313b;
    font-size: 12px;
    color: #a2a9b6;
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  }
  .hint b { color: #5b9dff; font-weight: 600; }

  #cesiumContainer { flex: 1 1 auto; min-height: 0; }

  .loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px;
    background: #0e1116; color: #a2a9b6; font-size: 13px;
    z-index: 10;
  }
  .loading.hide { display: none; }
  .spin {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #2a313b; border-top-color: #5b9dff;
    animation: sp .8s linear infinite;
  }
  @keyframes sp { to { transform: rotate(360deg); } }

  .cesium-viewer-bottom .cesium-widget-credits { display: none !important; }
</style>
</head>
<body>

  <div class="hint">
    <b>免 Token</b>
    <span>关键是把 baseLayer 设为 false，不加载任何影像瓦片；再用 globe.baseColor 给地球一个底色。</span>
  </div>

  <div id="cesiumContainer"></div>

  <div class="loading" id="loading">
    <div class="spin"></div>
    <div>正在加载 CesiumJS（约 3 MB）</div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Cesium.js"></script>
<script>
(function () {
  'use strict';

  var loadingEl = document.getElementById('loading');

  /* 库加载失败时给出明确原因，而不是留一个空白地球 */
  if (typeof Cesium === 'undefined') {
    loadingEl.innerHTML =
      '<div style="color:#ff8c74;text-align:center;line-height:1.8">' +
      'CesiumJS 加载失败<br>请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  // ===== 核心逻辑开始 =====

  /* 1. 创建 Viewer —— 这里是最容易卡住的地方：
        不传 baseLayer 会默认尝试 Cesium World Terrain / ion，
        没有 Token 就会一直转圈。显式设为 false 即可完全绕开 ion。 */
  var viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayer: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    infoBox: false,
    selectionIndicator: false
  });

  /* 2. 关掉天空盒、太阳、月亮，让纯色地球更干净 */
  var scene = viewer.scene;
  scene.globe.baseColor = Cesium.Color.fromCssColorString('#1e2a36');
  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;

  /* 3. 在球面上放一个点，证明坐标系是通的 */
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.391263, 39.907359),
    point: {
      pixelSize: 12,
      color: Cesium.Color.fromCssColorString('#5b9dff'),
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2
    },
    label: {
      text: '北京',
      font: '600 12px sans-serif',
      fillColor: Cesium.Color.WHITE,
      pixelOffset: new Cesium.Cartesian2(0, -24),
      disableDepthTestDistance: Number.POSITIVE_INFINITY
    }
  });

  /* 4. 相机飞到中国上空 */
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.391263, 39.907359, 12000000),
    orientation: { heading: 0, pitch: Cesium.Math.toRadians(-90), roll: 0 },
    duration: 0.8
  });

  // ===== 核心逻辑结束 =====

  loadingEl.classList.add('hide');

})();
</script>
</body>
</html>