Cesium相機移動操作

Cesium攝像機的移動有兩種方式，一種就是單純設定其移動屬性，比如前進後退，一種就是設定聚焦到某一模型。

1：Cesium設定攝像機聚焦

（1）viewer.flyTo

使用方法viewer.flyTo(target, options)

可以看到上一結有一個window.viewer.flyTo，其實flyto就是聚焦模型的方式之一。

將攝像機飛到提供的實體、實體或資料來源。 如果資料來源仍在載入過程中，或者視覺化仍在載入， 此方法在執行飛行之前等待資料準備就緒。

偏移是位於邊界球體中心的區域性東北向上參考系中的航向/俯仰/範圍。 航向和俯仰角在區域性的東北偏上參考系中定義。 航向是從 y 軸開始向 x 軸遞增的角度。俯仰是從 xy 平面開始的旋轉。正音高 角度在平面上方。負俯仰角位於平面下方。範圍是與中心的距離。如果範圍是 零，將計算一個範圍，以使整個邊界球體可見。

for一個exemple（this.tilesetModel是要飛去聚焦的模型位置）

window.viewer.flyTo(this.tilesetModel, {
    offset : {
        heading : Cesium.Math.toRadians(-198 * (Math.PI/180)),//方向,以弧度為單位的航向角。
        pitch : Cesium.Math.toRadians(-180 * (Math.PI/180)),//傾斜角度,以弧度為單位的俯仰角。
        range : 450,	//	距離市中心的距離（米）。
    }
});

（2）camera.flyTo

使用方法camera.flyTo(options)

將攝像機從當前位置飛到新位置。

（3）camera.lookAt

使用目標和偏移設定相機位置和方向。目標必須在世界座標。偏移可以是笛卡爾或以目標為中心的區域性東北向上參考系中的航向/俯仰/範圍。 如果偏移量是笛卡爾，則它是與變換矩陣定義的參考系中心的偏移量。如果偏移量是航向/俯仰/範圍，則航向和俯仰角在變換矩陣定義的參考系中定義。 航向是從 y 軸開始向 x 軸遞增的角度。俯仰是從 xy 平面開始的旋轉。正音高 角度位於平面下方。負俯仰角位於平面上方。範圍是與中心的距離。 在 2D 中，必須有一個自上而下的檢視。相機將放置在目標上方向下看。高於 目標將是偏移量的大小。標題將從偏移量確定。如果標題不能 根據偏移量確定，航向將為北。

使用方式lookAt(target, offset)

引數解釋

1. target：笛卡爾3（Cartesian3）——世界座標中的目標位置。
2. offset：笛卡爾3（Cartesian3）/航向間距範圍（HeadingPitchRange）——以目標為中心的區域性-北向上參考系中與目標的偏移。

關於笛卡爾3參加笛卡爾3 - 銫文件 (cesium.com)

關於航向間距範圍參見標題間距範圍 - 銫文件 (cesium.com)

使用HeadingPitchRange設定相機偏移量，其中range引數表示相機的偏移距離。

例如聚焦到某一車輛（變數lon就是經緯度，angle就是車輛轉向角，(0, -50, 25)表示攝像機飛到車輛的後面50m上面25m的位置，也就是俯檢視。

let positions = new Cesium.Cartesian3.fromDegrees(lon, lat, 0)
let headingPitchRolls = new Cesium.HeadingPitchRoll(angle,0,0)
let orientations = Cesium.Transforms.headingPitchRollQuaternion(positions,headingPitchRolls)

let transform = Cesium.Transforms.eastNorthUpToFixedFrame(positions);
transform = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientations), positions);
window.viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(0, -50, 25))

（4）trackedEntity跟隨

id為要跟隨的車輛編號

let entity = window.viewer.entities.getById(id)
window.viewer.trackedEntity = entity

ps: 該方法簡單，但是會出現兩個問題：
1、偏航角度無法更隨
2、移動物體可能會出現抖動現象

（5）解除聚焦跟隨

通過使用setView或lookAt設定視角後，視角將鎖定，滑鼠無法拖動畫面
需要再次呼叫如下方向，可解除視角鎖定。

window.viewer.trackedEntity = undefined;
window.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

2：攝像機移動

CesiumJS中的Camera控制場景的檢視。有很多方法可以操作Camera，如旋轉（rotate）、縮放（zoom）、平移（pan）和飛到目的地（flyTo）。CesiumJS有滑鼠和觸控事件用來處理與Camrea的互動，還有API來以程式設計方式操作攝像機。

在初始狀態下Cesium的滑鼠就已經註冊瞭如下操作

平移pan

moveRate為移動距離

// 向前
camera.moveForward(moveRate);
// 向後
camera.moveBackward(moveRate);
// 向上
camera.moveUp(moveRate);
// 向下
camera.moveDown(moveRate);
// 向左
camera.moveLeft(moveRate);
// 向右
camera.moveRight(moveRate);

Camera給定範圍或位置

函式設定Camera給定範圍或位置和目標的Camera位置和方向。例如：

var west = Cesium.Math.toRadians(-77.0);
var south = Cesium.Math.toRadians(38.0);
var east = Cesium.Math.toRadians(-72.0);
var north = Cesium.Math.toRadians(42.0);
var extent = new Cesium.Extent(west, south, east, north);
camera.viewExtent(extent, Cesium.Ellipsoid.WGS84);

常用的方法

Camera一些最常用的方法如下：

Camera.setView(options):在特定位置和方向立即設定相機。
Camera.zoomIn(amount): 沿著視角向量移動攝像機。
Camera.zoomOut(amount)]: 沿視角向量向後移動攝像機。
Camera.flyTo(options): 建立從當前相機位置到新位置的動畫相機飛行。
Camera.lookAt(target, offset): 定位並定位攝像機以給定偏移量瞄準目標點。
Camera.move(direction, amount): 朝任何方向移動攝像機。
Camera.rotate(axis, angle): 繞任意軸旋轉相機。
置的動畫相機飛行。
Camera.lookAt(target, offset): 定位並定位攝像機以給定偏移量瞄準目標點。
Camera.move(direction, amount): 朝任何方向移動攝像機。
Camera.rotate(axis, angle): 繞任意軸旋轉相機。

本文轉自 https://blog.csdn.net/m0_55534317/article/details/127960492，如有侵權，請聯絡刪除。