Czml Multi Object

<!--
  示例：一份 CZML 同时描述面、线、点、盒子
  要点：CzmlDataSource.load 接受对象数组，各图形属性用 CZML 的键值写法
  依赖：CesiumJS 1.121 · jsDelivr CDN，CZML 直接写在页面里
-->
<!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>CZML 多对象</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:250px}
  .hud b{color:#e6e8ec;font-weight:600}
  .hud .row{margin-top:6px}
  .hud button{font:inherit;font-size:12px;padding:3px 9px;border-radius:4px;cursor:pointer;
       border:1px solid #343b46;background:#1d232b;color:#cfd6e2}
  .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>CZML 多对象</b></div>
  <div class="row" id="info">正在加载 CZML…</div>
  <div class="row"><button id="toggle">只显示线</button></div>
  <div class="row">面、线、点、盒同批载入</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 czml = [
    {
      id: 'document',
      version: '1.0',
      clock: {
        interval: '2026-01-01T00:00:00Z/2026-01-01T00:30:00Z',
        currentTime: '2026-01-01T00:00:00Z',
        multiplier: 1,
        range: 'LOOP_STOP',
        step: 'SYSTEM_CLOCK_MULTIPLIER'
      }
    },
    {
      id: 'area',
      name: '作业区',
      polygon: {
        positions: {
          cartographicDegrees: [
            116.372, 39.900, 0,
            116.402, 39.900, 0,
            116.402, 39.918, 0,
            116.372, 39.918, 0
          ]
        },
        height: 0,
        extrudedHeight: 60,
        material: { solidColor: { color: { rgba: [77, 155, 255, 70] } } },
        outline: true,
        outlineColor: { rgba: [207, 228, 255, 255] }
      }
    },
    {
      id: 'route',
      name: '巡线',
      polyline: {
        positions: {
          cartographicDegrees: [
            116.358, 39.936, 260,
            116.378, 39.930, 420,
            116.402, 39.926, 320,
            116.428, 39.902, 180
          ]
        },
        width: 4,
        material: {
          polylineGlow: {
            color: { rgba: [255, 177, 61, 255] },
            glowPower: 0.28
          }
        }
      }
    },
    {
      id: 'marker',
      name: '测站',
      position: { cartographicDegrees: [116.389, 39.909, 70] },
      point: {
        pixelSize: 12,
        color: { rgba: [255, 255, 255, 255] },
        outlineColor: { rgba: [77, 155, 255, 255] },
        outlineWidth: 2
      },
      label: {
        text: '测站 A',
        font: '600 13px sans-serif',
        fillColor: { rgba: [255, 255, 255, 255] },
        pixelOffset: { cartesian2: [0, -24] }
      }
    },
    {
      id: 'tower',
      name: '观察塔',
      position: { cartographicDegrees: [116.399, 39.904, 130] },
      box: {
        dimensions: { cartesian: [90, 90, 260] },
        material: { solidColor: { color: { rgba: [95, 208, 168, 200] } } },
        outline: true,
        outlineColor: { rgba: [216, 255, 240, 255] }
      }
    }
  ];

  var dataSource = null;

  Cesium.CzmlDataSource.load(czml).then(function (ds) {
    dataSource = ds;
    viewer.dataSources.add(ds);
    document.getElementById('info').textContent = '5 个 CZML 对象已加载';
  });

  /* 只保留折线可见，用来验证 CZML 里的 id 可以被单独取用 */
  var onlyLine = false;
  document.getElementById('toggle').addEventListener('click', function () {
    if (!dataSource) return;
    onlyLine = !onlyLine;
    ['area', 'marker', 'tower'].forEach(function (id) {
      var e = dataSource.entities.getById(id);
      if (e) e.show = !onlyLine;
    });
    this.textContent = onlyLine ? '显示全部' : '只显示线';
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.352, 39.884, 3400),
    orientation: {
      heading: Cesium.Math.toRadians(24),
      pitch: Cesium.Math.toRadians(-26),
      roll: 0
    },
    duration: 0
  });
})();
</script>
</body>
</html>