Cesium 限制相机倾斜角(pitch)滑动范围

news2025/1/16 1:12:39

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.代码

      _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);

            },
          })
        }
      }