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);},})}}
4.最后
这里的方法还是有局限性,需要时刻监听相机变化,非常影响性能。不知道还有没有其他办法,欢迎各位大佬在评论区指正。
(ps:如果文章对你有帮助,可以点个赞鼓励下博主噢!)