文檔學(xué)習(xí)

攝像機(jī)由位置(position)，方向(direction)和視錐臺(tái)定義。
方向與視圖形成正交基準(zhǔn)，上和右=視圖x上單位矢量。
視錐由6個(gè)平面定義。每個(gè)平面都由 Cartesian4對(duì)象表示，其中x，y和z分量定義垂直于平面的單位矢量，w分量是從原點(diǎn)/相機(jī)位置開始的平面。

方法

1. flyTo

flyTo文檔

官方demo

如果想在自己項(xiàng)目中運(yùn)行sandcastle上的demo的話,需要引入sandCastle. 步驟如下:

1. 在官網(wǎng)上下載源碼

2. 將源碼文件夾(Apps)放在項(xiàng)目里, public下也行, assets下也行,我最終放在了assets下面.

   
   
   image.png

3. 在頁(yè)面中引用.

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

demo中的所有效果

image.png

挑一些經(jīng)典demo貼上來(lái).

1.flyInACity

效果: 飛入到一個(gè)城市上空, 然后在城市上空旋轉(zhuǎn)一圈

知識(shí)點(diǎn):

1. flyTo destination:xx, 飛入到指定地點(diǎn)
2. complete, 飛到指定地點(diǎn)后的回調(diào)
3. orientation 相機(jī)視角的左右方向與上下方向的指定
4. easingFunction 控制在飛行過程中如何插值時(shí)間

實(shí)現(xiàn): 利用flyTo實(shí)現(xiàn)視角飛行效果, destionation先飛入一個(gè)定位,再在complete中實(shí)現(xiàn)飛入后的效果, 通過修改orientation實(shí)現(xiàn)旋轉(zhuǎn), easingFunction放慢旋轉(zhuǎn)時(shí)間.

    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 類

在地圖上標(biāo)記一個(gè) rectangle,并飛入到該長(zhǎng)方形

  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 生成一個(gè)模型, 但是沒啥用 僅供調(diào)試;
• lookAtTransform (transform, offset ) 使用目標(biāo)和變換矩陣設(shè)置相機(jī)的位置和方向。偏移可以是笛卡爾坐標(biāo)或航向/俯仰/范圍。

這個(gè)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,
      })
    );
  }

實(shí)用方法

1. 固定相機(jī)高度視角

 /* 設(shè)置相機(jī)最小高度 */
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000;
 /* 設(shè)置相機(jī)最大高度 */
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000;