cesiumdemo
/
index13.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./script/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./script/Cesium/Widgets/widgets.css" />

    <style>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>点的移动，来自官网0 100 200 300 秒 分别移动到不同的位置</span>
    </div>
    <div id="cesiumContainer" style="width: 100%"></div>
    <script>
      const viewer = new Cesium.Viewer("cesiumContainer", {
        // baseLayerPicker: false,
        // navigationHelpButton: false,
        // sceneModePicker: false,
        terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: false,
        shouldAnimate: true,
      });

      function getCzml() {
        var czml = [
          {
            id: "document",
            name: "CZML Point - Time Dynamic",
            version: "1.0",
          },
          {
            id: "point",
            availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
            position: {
              epoch: "2012-08-04T16:00:00Z",
              cartographicDegrees: [
                0,
                -70,
                20,
                150000,
                100,
                -80,
                44,
                150000,
                200,
                -90,
                18,
                150000,
                300,
                -98,
                52,
                150000,
              ],
            },
            point: {
              color: {
                rgba: [255, 255, 255, 128],
              },
              outlineColor: {
                rgba: [255, 0, 0, 128],
              },
              outlineWidth: 3,
              pixelSize: 15,
            },
          },
        ];
        return czml;
      }

      function startUp() {
        const czml = getCzml();
        viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
      }

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