8、Cesium学习之配置视窗

1、实例

var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var clock = viewer.clock;
var referenceFramePrimitive;

function flyToSanDiego() {
  Sandcastle.declare(flyToSanDiego);
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
  });
}

function flyToHeadingPitchRoll() {
  Sandcastle.declare(flyToHeadingPitchRoll);
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
    orientation: {
      heading: Cesium.Math.toRadians(20.0),
      pitch: Cesium.Math.toRadians(-35.0),
      roll: 0.0,
    },
  });
}

function flyToLocation() {
  Sandcastle.declare(flyToLocation);

  // Create callback for browser's geolocation
  function fly(position) {
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        position.coords.longitude,
        position.coords.latitude,
        1000.0
      ),
    });
  }

  // Ask browser for location, and fly there.
  navigator.geolocation.getCurrentPosition(fly);
}

function viewRectangle() {
  Sandcastle.declare(viewRectangle);

  var west = -77.0;
  var south = 38.0;
  var east = -72.0;
  var north = 42.0;

  var rectangle = Cesium.Rectangle.fromDegrees(
    west,
    south,
    east,
    north
  );
  //setView(options)
  //设置相机位置、方向和变换
  //1、destination:Cartesian3或Rectangle类型，可选，相机在WGS84（世界）坐标系中的最终位置，或从自顶向下视图中可见的矩形
  //2、orientation：Object类型，可选，包含方向和向上属性或航向、俯仰和滚动属性的对象。默认情况下，该方向将指向3D中帧的中心，并指向Columbus视图中的负z方向。向上方向将指向3D中的局部北方，并在哥伦布视图中指向正y方向。在无限滚动模式下，二维中不使用方向
  //3、endTransform：Matrix4类型，可选,表示相机参考帧的变换矩阵。
  //4、convert:bool类型，可选，是否将目标从世界坐标转换为场景坐标（仅在不使用3D时相关）。默认为true
  viewer.camera.setView({
    destination: rectangle,
  });

  // Show the rectangle.  Not required; just for show.
  viewer.entities.add({
    rectangle: {
      coordinates: rectangle,
      fill: false,
      outline: true,
      outlineColor: Cesium.Color.WHITE,
    },
  });
}

function flyToRectangle() {
  Sandcastle.declare(flyToRectangle);

  var west = -90.0;
  var south = 38.0;
  var east = -87.0;
  var north = 40.0;
  var rectangle = Cesium.Rectangle.fromDegrees(
    west,
    south,
    east,
    north
  );

  viewer.camera.flyTo({
    destination: rectangle,
  });

  // Show the rectangle.  Not required; just for show.
  viewer.entities.add({
    rectangle: {
      coordinates: rectangle,
      fill: false,
      outline: true,
      outlineColor: Cesium.Color.WHITE,
    },
  });
}

function setReferenceFrame() {
  Sandcastle.declare(setReferenceFrame);

  var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
  //Cesium.Transforms.eastNorthUpToFixedFrame(origin, ellipsoid, result)
  //算一个4x4变换矩阵，该矩阵从一个以提供的原点为中心的东北向上轴的参考坐标系到提供的椭球体的固定参考坐标系。局部轴定义为：
//x轴指向本地的东方向。
//y轴指向本地北向。
//z轴指向穿过该位置的椭球面法线方
//origin:Cartesian3类型，局部参照系的中心点。
//ellipsoid
//result
  var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

  // View in east-north-up frame
  var camera = viewer.camera;
  //不可变的Cartesian3实例初始化为（0.0，0.0，1.0）
  camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
  camera.lookAtTransform(
    transform,
    new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0)
  );

  //add(primitive, index)
  //这个还没看懂
  referenceFramePrimitive = scene.primitives.add(
    new Cesium.DebugModelMatrixPrimitive({
      modelMatrix: transform,
      length: 100000.0,
    })
  );
}

function setHeadingPitchRoll() {
  Sandcastle.declare(setHeadingPitchRoll);

  var camera = viewer.camera;
  camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      -75.5847,
      40.0397,
      1000.0
    ),
    orientation: {
      heading: -Cesium.Math.PI_OVER_TWO,
      pitch: -Cesium.Math.PI_OVER_FOUR,
      roll: 0.0,
    },
  });
}

function icrf(scene, time) {
  if (scene.mode !== Cesium.SceneMode.SCENE3D) {
    return;
  }
//Cesium.Transforms.computeIcrfToFixedMatrix(date, result) 
//计算旋转矩阵，以在给定时间将点或矢量从国际天文参考系（GCRF/ICRF）惯性系轴转换为地球固定系轴（ITRF）。如果尚未加载进行转换所需的数据，则此函数可能返回undefined
//date:JulianDate类型，计算旋转矩阵的时间
//result:Matrix3类型，可选，存储结果的对象。如果未指定此参数，将创建并返回一个新实例
  var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
  if (Cesium.defined(icrfToFixed)) {
    var camera = viewer.camera;
    var offset = Cesium.Cartesian3.clone(camera.position);
    //Cesium.Matrix4.fromRotationTranslation(rotation, translation, result)
    //从表示旋转的矩阵3和表示平移的笛卡尔3计算矩阵4实例
    //rotation:Matrix3类型，表示旋转的矩阵的左上部分
    //translation:Cartesian3类型，默认值Cartesian3.ZERO，可选，表示转换的矩阵的右上部分
    //result
    var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
    camera.lookAtTransform(transform, offset);
  }
}

function viewInICRF() {
  Sandcastle.declare(viewInICRF);

  viewer.camera.flyHome(0);

  clock.multiplier = 3 * 60 * 60;
  //postUpdate
  //获取在更新场景之后和渲染场景之前立即引发的事件。
  scene.postUpdate.addEventListener(icrf);
  scene.globe.enableLighting = true;
}

var viewChanged = document.getElementById("viewChanged");

var removeStart;
var removeEnd;

function cameraEvents() {
  Sandcastle.declare(cameraEvents);

  var camera = viewer.camera;
  removeStart = camera.moveStart.addEventListener(function () {
    viewChanged.style.display = "block";
  });
  removeEnd = camera.moveEnd.addEventListener(function () {
    viewChanged.style.display = "none";
  });
}

var cameraChanged = document.getElementById("cameraChanged");

var removeChanged;

function cameraChanges() {
  Sandcastle.declare(cameraChanges);

  var i = 0;
  removeChanged = viewer.camera.changed.addEventListener(function (
    percentage
  ) {
    ++i;
    cameraChanged.innerText =
      "Camera Changed: " + i + ", " + percentage.toFixed(6);
    cameraChanged.style.display = "block";
  });
}

function flyInACity() {
  Sandcastle.declare(flyInACity);

  var camera = scene.camera;
  camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
      -73.98580932617188,
      40.74843406689482,
      363.34038727246224
    ),
    complete: function () {
      setTimeout(function () {
        camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            -73.98585975679403,
            40.75759944127251,
            186.50838555841779
          ),
          orientation: {
            heading: Cesium.Math.toRadians(200.0),
            pitch: Cesium.Math.toRadians(-50.0),
          },
          easingFunction: Cesium.EasingFunction.LINEAR_NONE,
        });
      }, 1000);
    },
  });
}

function losAngelesToTokyo(adjustPitch) {
  var camera = scene.camera;

  var tokyoOptions = {
    destination: Cesium.Cartesian3.fromDegrees(
      139.8148,
      35.7142,
      20000.0
    ),
    orientation: {
      heading: Cesium.Math.toRadians(15.0),
      pitch: Cesium.Math.toRadians(-60),
      roll: 0.0,
    },
    duration: 20,
    flyOverLongitude: Cesium.Math.toRadians(60.0),
  };

  var laOptions = {
    destination: Cesium.Cartesian3.fromDegrees(
      -117.729,
      34.457,
      10000.0
    ),
    duration: 5,
    orientation: {
      heading: Cesium.Math.toRadians(-15.0),
      pitch: -Cesium.Math.PI_OVER_FOUR,
      roll: 0.0,
    },
  };

  laOptions.complete = function () {
    setTimeout(function () {
      camera.flyTo(tokyoOptions);
    }, 1000);
  };

  if (adjustPitch) {
    tokyoOptions.pitchAdjustHeight = 1000;
    laOptions.pitchAdjustHeight = 1000;
  }

  camera.flyTo(laOptions);
}

function flyOverLongitude(adjustPitch) {
  Sandcastle.declare(flyOverLongitude);
  losAngelesToTokyo();
}

function flyOverLongitudeWithPitch() {
3  Sandcastle.declare(flyOverLongitudeWithPitch);
  losAngelesToTokyo(true);
}

Sandcastle.addToolbarMenu([
  {
    text: "Camera Options",
  },
  {
    text: "Fly in a city",
    onselect: function () {
      reset();
      flyInACity();
      Sandcastle.highlight(flyInACity);
    },
  },
  {
    text: "Fly to San Diego",
    onselect: function () {
      reset();
      flyToSanDiego();
      Sandcastle.highlight(flyToSanDiego);
    },
  },
  {
    text: "Fly to Location with heading, pitch and roll",
    onselect: function () {
      reset();
      flyToHeadingPitchRoll();
      Sandcastle.highlight(flyToHeadingPitchRoll);
    },
  },
  {
    text: "Fly to My Location",
    onselect: function () {
      reset();
      flyToLocation();
      Sandcastle.highlight(flyToLocation);
    },
  },
  {
    text: "Fly to Rectangle",
    onselect: function () {
      reset();
      flyToRectangle();
      Sandcastle.highlight(flyToRectangle);
    },
  },
  {
    text: "View a Rectangle",
    onselect: function () {
      reset();
      viewRectangle();
      Sandcastle.highlight(viewRectangle);
    },
  },
  {
    text: "Set camera reference frame",
    onselect: function () {
      reset();
      setReferenceFrame();
      Sandcastle.highlight(setReferenceFrame);
    },
  },
  {
    text: "Set camera with heading, pitch, and roll",
    onselect: function () {
      reset();
      setHeadingPitchRoll();
      Sandcastle.highlight(setHeadingPitchRoll);
    },
  },
  {
    text: "View in ICRF",
    onselect: function () {
      reset();
      viewInICRF();
      Sandcastle.highlight(viewInICRF);
    },
  },
  {
    text: "Move events",
    onselect: function () {
      reset();
      cameraEvents();
      Sandcastle.highlight(cameraEvents);
    },
  },
  {
    text: "Camera changed event",
    onselect: function () {
      reset();
      cameraChanges();
      Sandcastle.highlight(cameraChanges);
    },
  },
  {
    text: "Fly from Los Angeles to Tokyo via Europe",
    onselect: function () {
      reset();
      flyOverLongitude();
      Sandcastle.highlight(flyOverLongitude);
    },
  },
  {
    text: "Look down during exaggerated flight",
    onselect: function () {
      reset();
      flyOverLongitudeWithPitch();
      Sandcastle.highlight(flyOverLongitudeWithPitch);
    },
  },
]);

Sandcastle.addToolbarButton("Complete Flight", function () {
  scene.camera.completeFlight();
});

Sandcastle.addToolbarButton("Cancel Flight", function () {
  scene.camera.cancelFlight();
});

function reset() {
  scene.completeMorph();
  viewer.entities.removeAll();
  scene.primitives.remove(referenceFramePrimitive);
  scene.tweens.removeAll();

  if (Cesium.defined(removeStart)) {
    removeStart();
    removeEnd();

    viewChanged.style.display = "none";

    removeStart = undefined;
    removeEnd = undefined;
  }

  if (Cesium.defined(removeChanged)) {
    removeChanged();
    removeChanged = undefined;

    cameraChanged.style.display = "none";
  }

  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

  clock.multiplier = 1.0;
  scene.postUpdate.removeEventListener(icrf);
  scene.globe.enableLighting = false;
}

scene.morphComplete.addEventListener(function () {
  reset();
});