网站响应式技术,无锡网站商城建设,互联网电商是干什么的,官网推广方法有哪些1.效果 2.思路 在项目开发的时候#xff0c;有一个需求是限制相机倾斜角#xff0c;也就是鼠标中键调整视图俯角时#xff0c;不能过大#xff0c;一般 pitch 角度范围在 0 至 -90之间#xff0c;-90刚好为正俯视。 在网上查阅了很多资料#xff0c;发现并没有一个合适的…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);},})}} 4.最后 这里的方法还是有局限性需要时刻监听相机变化非常影响性能。不知道还有没有其他办法欢迎各位大佬在评论区指正。
ps:如果文章对你有帮助可以点个赞鼓励下博主噢
