cesium 相机学习记录

文档学习

摄像机由位置(position)，方向(direction)和视锥台定义。
方向与视图形成正交基准，上和右=视图x上单位矢量。
视锥由6个平面定义。每个平面都由 Cartesian4对象表示，其中x，y和z分量定义垂直于平面的单位矢量，w分量是从原点/相机位置开始的平面。

方法

1. flyTo

flyTo文档

官方demo

如果想在自己项目中运行sandcastle上的demo的话,需要引入sandCastle. 步骤如下:

1. 在官网上下载源码

2. 将源码文件夹(Apps)放在项目里, public下也行, assets下也行,我最终放在了assets下面.

   
   image.png

3. 在页面中引用.

import "@/assets/cesium/Apps/Sandcastle/Sandcastle-header";

demo中的所有效果

image.png

挑一些经典demo贴上来.

1.flyInACity

效果: 飞入到一个城市上空, 然后在城市上空旋转一圈

知识点:

1. flyTo destination:xx, 飞入到指定地点
2. complete, 飞到指定地点后的回调
3. orientation 相机视角的左右方向与上下方向的指定
4. easingFunction 控制在飞行过程中如何插值时间

实现: 利用flyTo实现视角飞行效果, destionation先飞入一个定位,再在complete中实现飞入后的效果, 通过修改orientation实现旋转, easingFunction放慢旋转时间.

    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);
      },
    });

2.flyToRectangle

Rectangle 类

在地图上标记一个 rectangle,并飞入到该长方形

  function flyToRectangle() {
    const west = -90.0;
    const south = 38.0;
    const east = -87.0;
    const north = 40.0;
    const rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

    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,
      },
    });
  }

3. setReferenceFrame

• DebugModelMatrixPrimitive 生成一个模型, 但是没啥用 仅供调试;
• lookAtTransform (transform, offset ) 使用目标和变换矩阵设置相机的位置和方向。偏移可以是笛卡尔坐标或航向/俯仰/范围。

这个demo没看太懂,不知道offset是怎么弄的.

  function setReferenceFrame() {

    const center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
    const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

    // View in east-north-up frame
    camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
    camera.lookAtTransform(
      transform,
      new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0)
    );

    // Show reference frame.  Not required.
    referenceFramePrimitive = scene.primitives.add(
      new Cesium.DebugModelMatrixPrimitive({
        modelMatrix: transform,
        length: 100000.0,
      })
    );
  }

实用方法

1. 固定相机高度视角

 /* 设置相机最小高度 */
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000;
 /* 设置相机最大高度 */
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000;