【收藏】Cesium 限制相机倾斜角(pitch)滑动范围

server/2024/12/18 20:02:29/

1.效果

2.思路

在项目开发的时候，有一个需求是限制相机倾斜角，也就是鼠标中键调整视图俯角时，不能过大，一般 pitch 角度范围在 0 至 -90之间，-90刚好为正俯视。

在网上查阅了很多资料，发现并没有一个合适的解决方案，于是自个研究了半天，终于实现了，下面是我的解决方案。

（1）首先是 viewer.camera.changed.addEventListener 监听相机移动，同时不断获取相机状态，例如 pitch、heading、roll 参数等，后面会用到。

（2）设置最大容许角度，我这里设置了 -10 度，在相机监听中，判断相机 pitch 是否超过最大容许角度。

（3）当相机 pitch 大于 -10度时，停止相机监听（这是关键），同时先禁止鼠标中键移动改变视图倾斜角。最后就是视角修复，前面获取的相机参数这里就用到了，使用 viewer.camera.flyTo() 进行视角修正。

（4）在 viewer.camera.flyTo() 方法的成功回调中（complete）再次开启相机监听，当然不要忘记恢复鼠标中键移动改变视图。

3.代码

javascript">      _this.viewer.camera.changed.addEventListener(cameraChanged); //监听相机移动function cameraChanged() {// 获取当前相机的状态var camera = _this.viewer.camera;var pitch = camera.pitch;var minPitch = Cesium.Math.toRadians(-10); //角度只能再-10 至 -90之间var heading = camera.heading;var roll = camera.roll;// 当俯角超出设定角度if (pitch >= minPitch) {_this.viewer.camera.changed.removeEventListener(cameraChanged) // 先取消监听// 先静止鼠标中键对相机倾斜角的移动_this.viewer.scene.screenSpaceCameraController.enableTilt = false; // 使用该方法修正一点点视角_this.viewer.camera.flyTo({destination: _this.viewer.camera.position,orientation: {heading: heading,pitch: Cesium.Math.toRadians(-12),roll: roll},duration: 0.5,// 当视角修正完成，再次开启监听complete: function () {_this.viewer.scene.screenSpaceCameraController.enableTilt = true;_this.viewer.camera.changed.addEventListener(cameraChanged);},})}}