cesium学习(相机)

飞到一个地方

如果你知道位置的经纬度和高度,你可以使用相机的flyTo功能直接飞到CesiumJS中的那个位置。

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

更改相机的方向

flyTo要在完成后更改相机的方向,请添加一个orientation选项:

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
    orientation: {
      // 航向:相对于东
      heading: Cesium.Math.toRadians(20.0),
      // 俯仰:相对于北
      pitch: Cesium.Math.toRadians(-35.0),
      // 翻滚:相对于上
      roll: 0.0,
    },
});

获取一个点位置

如果您知道要飞往的地点的名称但不确定该地点的坐标是什么,您可以使用pickPosition来查找。
以下代码片段将在点击时打印出某个点的位置Cartesian3:

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
  var pickedPosition = viewer.scene.pickPosition(event.position);
  if (Cesium.defined(pickedPosition)) {
    console.log(pickedPosition);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

cesium学习(相机)_第1张图片

飞往已添加资源

如果你已经将资源添加到场景,并希望将相机聚焦在它上面。
viewer.flyTo 函数接受 Entity、 EntityCollection、 DataSource、 Cesium3DTilset等等。

// 添加一个矩形到场景
var rectangle = viewer.entities.add({
  rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(-90.0, 38.0, -87.0, 40.0),
  },
});
// 将相机飞往这个矩形
viewer.flyTo(rectangle);

控制相机飞行运动

相机的一个选项camera.flyTo功能easingFunction。
以下代码示例将缓动函数设置为QUADRATIC_IN_OUT从东京晴空塔飞到西雅图太空针塔

viewer.camera.flyTo({
  destination: new Cesium.Cartesian3(
    -3961951.575572026,
    3346492.0945766014,
    3702340.5336036095
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.8982074415844437,
      -0.4393530288745287,
      0.013867512433959908
    ),
    up: new Cesium.Cartesian3(
      0.12793638617798253,
      0.29147314437764565,
      0.9479850669701113
    ),
  },
  complete: function () {
    setTimeout(function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          -2304817.2435183465,
          -3639113.128132953,
          4688495.013644141
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            0.3760550186878076,
            0.9007147395506565,
            0.21747547189489164
          ),
          up: new Cesium.Cartesian3(
            -0.20364591529594356,
            -0.14862471084230877,
            0.9676978022659334
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
        duration: 5,
      });
    }, 1000);
  },
});

锁定相机

将相机锁定到一个点,将摄像机的移动限制在某个区域或资源。
使用相机的 lookAtTransform 功能。以下代码片段将相机锁定在日本富士山:

const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 4, 2900)
);

围绕一个点运行

将相机锁定到一个点后,您可以创建一个相机轨道来展示您的资源。这可以通过使用带有事件侦听器的相机功能来实现: lookAtTransform

// Lock camera to a point
const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);

// Orbit this point
viewer.clock.onTick.addEventListener(function (clock) {
  viewer.scene.camera.rotateRight(0.005);
});

screenSpaceCameraController(屏幕空间相机控制器)

将 ScreenSpaceCameraController 用户输入(例如鼠标和触摸)从窗口坐标转换为相机运动。它包含用于启用和禁用不同类型的输入、修改惯性量以及最小和最大缩放距离的属性。
例如,你可以使用 来 ScreenSpaceCameraController 控制是否允许摄像头进入地下:

// Disable camera collision to allow it to go underground
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;

你可能感兴趣的:(动画与可视化,javascript,cesium)