Cesium相机移动操作_Addam Holmes的博客

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，如有侵权，请联系删除。