cesiumdemo
/
index10.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>Cesium App</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>旋转？</span></div>
    <div id="test">测试 overlay</div>
    <div id="cesiumContainer" style="width: 100%"></div>
    <script>
      const geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata(
        "http://www.earthenterprise.org/3d"
      );
      const gee = new Cesium.GoogleEarthEnterpriseImageryProvider({
        metadata: geeMetadata,
      });

      var guge = new Cesium.UrlTemplateImageryProvider({
        url: "http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        minimumLevel: 1,
        maximumLevel: 20,
      });

      const guge2 = new Cesium.UrlTemplateImageryProvider({
        url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
      });

      const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false,
        navigationHelpButton: false,
        sceneModePicker: false,
        imageryProvider: guge2,
      });

      viewer.camera.setView({
        destination: new Cesium.Cartesian3.fromDegrees(116.39, 39.9, 15000.0),
        orientation: {
          heading: Cesium.Math.toRadians(45.0), // east, default value is 0.0 (north)
          pitch: Cesium.Math.toRadians(-45), // default value (looking down)
          roll: 0.0, // default value
        },
      });

      //       setTimeout(() => {
      //         viewer.camera.flyTo({
      //           destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
      //           orientation: {
      //             heading: 0.6, // east, default value is 0.0 (north)
      //             pitch: -0.66, // default value (looking down)
      //             roll: 0.0, // default value
      //           },
      //         });
      //       }, 3000);

      function startUp(Cesium) {
        const czml = [
          {
            id: "document",
            name: "CZML Model",
            version: "1.0",
            clock: {
              interval: "2019-06-01T16:00:00Z/2019-06-01T16:10:00Z",
              currentTime: "2019-06-01T16:00:00Z",
              multiplier: 60,
              range: "LOOP_STOP",
              step: "SYSTEM_CLOCK_MULTIPLIER",
            },
          },
          {
            id: "test model",
            name: "Cesium Air",
            position: {
              //cartographicDegrees: [1332761, -4662399, 4137888],
              cartographicDegrees: [-77, 37, 100],
            },
            model: {
              //gltf: "https://assets.agi.com/models/launchvehicle.glb",
              gltf: "./assets/redCar.glb",
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
            },
          },
        ];

        const dataSourcePromise = viewer.dataSources.add(
          Cesium.CzmlDataSource.load(czml)
        );

        dataSourcePromise
          .then(function (dataSource) {
            viewer.trackedEntity = dataSource.entities.getById("test model");

            console.log(viewer.trackedEntity, "99999");
            //viewer.trackedEntity.position = new Cesium.Cartesian3( 1332761, -4662399, 5137888 );

            var position = new Cesium.Cartesian3(
              1332761.6511167218,
              -4662399.080096612,
              4137888.449865087
            );
            var heading = Cesium.Math.toRadians(90);
            var pitch = Cesium.Math.toRadians(90);
            var roll = Cesium.Math.toRadians(-6);
            var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

            //   var orientation = Cesium.Transforms.headingPitchRollQuaternion(
            //     position,
            //     hpr
            //   );

            //   viewer.trackedEntity.position = position;
          })
          .otherwise(function (error) {
            console.error(error);
          });
      }
      console.log(Cesium, "111");
      startUp(Cesium);

      function addListener() {
        var htmlOverlay = document.getElementById("test");
        var scratch = new Cesium.Cartesian2();
        viewer.scene.preRender.addEventListener(function () {
          var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
          var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
            position,
            scratch
          );
          if (Cesium.defined(canvasPosition)) {
            htmlOverlay.style.top = canvasPosition.y + "px";
            htmlOverlay.style.left = canvasPosition.x + "px";
          }
        });
      }
      addListener();
    </script>
  </body>
</html>