View Bookmark

<!--
  示例：保存与切换视角书签
  要点：把 positionCartographic 与 heading/pitch/roll 存成普通对象，恢复时交给 setView
  依赖：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>视角书签</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,.9);
       border:1px solid #2a313b;border-radius:6px;padding:9px 12px;font-size:12px;
       color:#a2a9b6;max-width:268px}
  .hud b{color:#e6e8ec;font-weight:600}
  .hud .row{margin-top:6px}
  .hud .cur{font-family:Consolas,Menlo,monospace;font-size:11px;color:#8fb7ff}
  .hud button{font:inherit;font-size:12px;padding:3px 9px;border-radius:4px;cursor:pointer;
       border:1px solid #343b46;background:#1d232b;color:#cfd6e2}
  .hud button:hover{background:#262d37}
  .bm{display:flex;align-items:center;gap:6px;margin-top:5px}
  .bm a{flex:1 1 auto;color:#cfe4ff;font-size:12px;cursor:pointer;text-decoration:none}
  .bm a:hover{text-decoration:underline}
  .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 cur" id="cur">正在读取相机…</div>
  <div class="row"><button id="save">保存当前视角</button></div>
  <div id="list"></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 bookmarks = [
    { name: '全球视角', lng: 18, lat: 14, height: 24000000, heading: 0, pitch: -90, roll: 0 },
    { name: '北京城区', lng: 116.391263, lat: 39.907359, height: 2600, heading: 28, pitch: -52, roll: 0 },
    { name: '珠穆朗玛峰', lng: 86.925, lat: 27.988, height: 46000, heading: 18, pitch: -32, roll: 0 },
    { name: '长江入海口', lng: 121.90, lat: 31.35, height: 62000, heading: 0, pitch: -58, roll: 0 }
  ];

  var listEl = document.getElementById('list');
  var curEl = document.getElementById('cur');

  function radians(deg) { return Cesium.Math.toRadians(deg); }

  function apply(bm) {
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(bm.lng, bm.lat, bm.height),
      orientation: {
        heading: radians(bm.heading),
        pitch: radians(bm.pitch),
        roll: radians(bm.roll)
      },
      duration: 1.6
    });
  }

  function render() {
    listEl.innerHTML = '';
    bookmarks.forEach(function (bm, index) {
      var row = document.createElement('div');
      row.className = 'bm';

      var a = document.createElement('a');
      a.textContent = bm.name;
      a.addEventListener('click', function () { apply(bm); });
      row.appendChild(a);

      var del = document.createElement('button');
      del.textContent = '删除';
      del.addEventListener('click', function () {
        bookmarks.splice(index, 1);
        render();
      });
      row.appendChild(del);

      listEl.appendChild(row);
    });
  }

  document.getElementById('save').addEventListener('click', function () {
    var c = viewer.camera;
    var carto = c.positionCartographic;
    var name = '视角 ' + (bookmarks.length + 1);
    bookmarks.push({
      name: name,
      lng: Cesium.Math.toDegrees(carto.longitude),
      lat: Cesium.Math.toDegrees(carto.latitude),
      height: carto.height,
      heading: Cesium.Math.toDegrees(c.heading),
      pitch: Cesium.Math.toDegrees(c.pitch),
      roll: Cesium.Math.toDegrees(c.roll)
    });
    render();
  });

  /* 相机变化后刷新读数，节流到 200 毫秒一次 */
  var last = 0;
  scene.postRender.addEventListener(function () {
    var now = Date.now();
    if (now - last < 200) return;
    last = now;

    var c = viewer.camera;
    var carto = c.positionCartographic;
    curEl.textContent =
      Cesium.Math.toDegrees(carto.longitude).toFixed(3) + ', ' +
      Cesium.Math.toDegrees(carto.latitude).toFixed(3) + ' · ' +
      Math.round(carto.height / 1000) + ' km · 俯仰 ' +
      Cesium.Math.toDegrees(c.pitch).toFixed(0) + '°';
  });

  render();

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(18, 14, 24000000),
    orientation: { heading: 0, pitch: radians(-90), roll: 0 }
  });
})();
</script>
</body>
</html>