cesiumdemo
/
index9.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 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,
      });

      const cartographicDegrees1 = [
        0.0,
        -6668447.2211117,
        1201886.45913705,
        146789.427467256,
        60.0,
        -6511432.84684144,
        919677.673492462,
        -214047.552431458,
        90.0,
        -6721319.92231553,
        776899.784034099,
        -394198.837519575,
        150.0,
        -6717826.447064,
        488820.628328182,
        -752924.980158179,
        180.0,
        -6504450.41462847,
        343851.784836767,
        -931084.800346031,
        240.0,
        -6654518.44949696,
        52891.726433174,
        -1283967.69137678,
      ];

      const cartographicDegrees = [];

      cartographicDegrees1.forEach((item, index) => {
        if (index % 4 == 0) {
          //item = item * 10;
        }
        if (index % 4 == 3) {
          //item = item * 1000;
        }
        cartographicDegrees.push(item);
      });

      console.log(cartographicDegrees, "00000000");

      function getCzml() {
        var czml = [
          {
            id: "document",
            name: "CZML Path",
            version: "1.0",
            clock: {
              interval: "2012-08-04T10:00:00Z/2012-08-04T10:04:00Z",
              currentTime: "2012-08-04T10:00:00Z",
              multiplier: 10,
            },
          },
          {
            id: "path",
            name: "path with GPS flight data",
            description:
              "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
            availability: "2012-08-04T10:00:00Z/2012-08-04T10:0400Z",
            path: {
              material: {
                polylineOutline: {
                  color: {
                    rgba: [80, 80, 255, 255],
                  },
                  outlineColor: {
                    rgba: [0, 255, 255, 255],
                  },
                  outlineWidth: 5,
                },
              },
              width: 8,
              leadTime: 10,
              trailTime: 1000,
              resolution: 5,
            },
            point: {
              color: {
                rgba: [255, 0, 0, 255],
              },
              outlineColor: {
                rgba: [255, 0, 0, 255],
              },
              outlineWidth: 2,
              pixelSize: 20,
            },
            position: {
              epoch: "2012-08-04T10:00:00Z",
              //cartographicDegrees: cartographicDegrees,
              cartesian: cartographicDegrees,
              interpolationAlgorithm: "LAGRANGE",
              interpolationDegree: 5,
            },
          },
        ];
        return czml;
      }

      function startUp2() {
        console.log("x");
        const czml = getCzml();
        // czml[1].position.cartographicDegrees.forEach((item, index) => {
        //   if (index % 4 == 3) {
        //     item = item + 30000;
        //   }
        // });

        console.log(czml);

        const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        dataSourcePromise.then((dataSource) => {
          const entity = dataSource.entities.getById("launchvehicle");

          console.log(entity);

          viewer.trackedEntity = ds.entities.getById("path");

          //setRotate(entity, { rotateX: 100, rotateY: 100, rotateZ: 100 });
          //update3dtilesMaxtrix(entity);
        });
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);

        setTimeout(() => {
          viewer.camera.setView({
            destination: new Cesium.Cartesian3(
              -16458617.941072896,
              5107179.844358844,
              -4565389.818112487
            ),
          });
        }, 2000);
      }

      startUp2();

      function startUp() {
        const czml = getCzml();

        viewer.dataSources
          .add(Cesium.CzmlDataSource.load(czml))
          .then(function (ds) {
            //viewer.trackedEntity = ds.entities.getById("path");
          });
      }

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