Cesium用wsad进行场景漫游(九)

2023-01-14
先看效果，wsadqe控制方向升降，鼠标拖动屏幕也可以控制方向

 
 整理下思路：
1. 使用movement变量控制是否进行漫游
2.1 进行漫游则先将enableRotate等全部取消
2.2 绑定Cesium.ScreenSpaceEventType.LEFT_DOWN等事件，用于计算鼠标移动并改变镜头方向，同时根据鼠标是否按下判断鼠标移动是否可以改变镜头方向
2.3 document.addEventListener监听按下的键盘按钮，进行相应的camera.moveForward等方法
3. 不进行漫游则恢复enableRotate等
 
代码如下：在vue中将其包装为一个Ismovement方法

1.     //是否<el-button @click="Ismovement" >漫游模式</el-button>
2.     Ismovement(){
3.       var that = this;
4.       this.movement = !this.movement;
6.       //如果进行漫游
7.       if(this.movement){
8.         var ellipsoid = this.viewer.scene.globe.ellipsoid;
10.         //先将鼠标控制事件全部取消
11.         this.viewer.scene.screenSpaceCameraController.enableRotate = false;
12.         this.viewer.scene.screenSpaceCameraController.enableTranslate = false;
13.         this.viewer.scene.screenSpaceCameraController.enableZoom = false;
14.         this.viewer.scene.screenSpaceCameraController.enableTilt = false;
15.         this.viewer.scene.screenSpaceCameraController.enableLook = false;
17.         var startMousePosition;
18.         var mousePosition;
20.         //控制方向
21.         var flags = {
22.           looking : false,
23.           moveForward : false,
24.           moveBackward : false,
25.           moveUp : false,
26.           moveDown : false,
27.           moveLeft : false,
28.           moveRight : false
29.         };
31.         //按下左键的同时克隆一个鼠标点击的位置
32.         this.viewer.screenSpaceEventHandler.setInputAction(function(movement) {
33.           flags.looking = true;
34.           mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
35.         }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
37.         //记录鼠标移动的终点
38.         this.viewer.screenSpaceEventHandler.setInputAction(function(movement) {
39.           mousePosition = movement.endPosition;
40.         }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
42.         //looking改为false，意思是此时鼠标移动不会改变镜头方向
43.         this.viewer.screenSpaceEventHandler.setInputAction(function(position) {
44.           flags.looking = false;
45.         }, Cesium.ScreenSpaceEventType.LEFT_UP);
47.         //获得按下的哪个按钮
48.         function getFlagForKeyCode(keyCode) {
49.           switch (keyCode) {
50.           case 'W'.charCodeAt(0):
51.             return 'moveForward';
52.           case 'S'.charCodeAt(0):
53.             return 'moveBackward';
54.           case 'Q'.charCodeAt(0):
55.             return 'moveUp';
56.           case 'E'.charCodeAt(0):
57.             return 'moveDown';
58.           case 'D'.charCodeAt(0):
59.             return 'moveRight';
60.           case 'A'.charCodeAt(0):
61.             return 'moveLeft';
62.           default:
63.             return undefined;
64.           }
65.         }
67.         //keydown如果长时间按下某个键，则重复触发按键按下事件。
68.         document.addEventListener('keydown', this.down = function(e){
69.           var flagName = getFlagForKeyCode(e.keyCode);
70.           if (typeof flagName !== 'undefined') {
71.             flags[flagName] = true;
72.           }
73.         }, false);
75.         document.addEventListener('keyup', this.up =(e)=>{
76.           var flagName = getFlagForKeyCode(e.keyCode);
77.           if (typeof flagName !== 'undefined') {
78.             flags[flagName] = false;
79.           }
80.         }, false);
82.         //实时获取cesium clock的tick每一帧的时间,十分常用的功能
83.         this.viewer.clock.onTick.addEventListener(function(clock) {
84.          
85.           var camera = that.viewer.camera;
87.           // 镜头旋转
88.           if (flags.looking) {
89.             //获取画布的高度宽度
90.             var width = that.viewer.canvas.clientWidth;
91.             var height = that.viewer.canvas.clientHeight;
93.             //相当于转动灵敏度,越大转动越快
94.             var lookFactor =0.06;
96.             //x和y是鼠标按下后移动的xy距离与画布长宽的比例
97.             var x = (mousePosition.x - startMousePosition.x) / width;
98.             var y = -(mousePosition.y - startMousePosition.y) / height;
99.             
100.             camera.setView({
101.               //根据摄像头现在的朝向和刚才移动的比例进行方向更新
102.               orientation: {
103.                   heading : camera.heading + x*lookFactor,
104.                   pitch : camera.pitch + y*lookFactor,   
105.                   roll : 0.0                             
106.               }
107.             })
108.           }
110.           // 根据高度来决定镜头移动的速度
111.           var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
112.           var moveRate = cameraHeight / 100.0;
114.           if (flags.moveForward) {
115.             camera.moveForward(moveRate);
116.           }
117.           if (flags.moveBackward) {
118.             camera.moveBackward(moveRate);
119.           }
120.           if (flags.moveUp) {
121.             camera.moveUp(moveRate);
122.           }
123.           if (flags.moveDown) {
124.             camera.moveDown(moveRate);
125.           }
126.           if (flags.moveLeft) {
127.             camera.moveLeft(moveRate);
128.           }
129.           if (flags.moveRight) {
130.             camera.moveRight(moveRate);
131.           }
132.         });
133.       }else{
134.         //取消漫游
135.         this.viewer.scene.screenSpaceCameraController.enableRotate = true;
136.         this.viewer.scene.screenSpaceCameraController.enableTranslate = true;
137.         this.viewer.scene.screenSpaceCameraController.enableZoom = true;
138.         this.viewer.scene.screenSpaceCameraController.enableTilt = true;
139.         this.viewer.scene.screenSpaceCameraController.enableLook = true;
140.         this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
141.         this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
142.         this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
143.         document.removeEventListener('keydown',this.down,false)
144.         document.removeEventListener('keyup',this.up,false)
145.    
146.       }
147.     },

复制代码

 
 
为了方便测试，这里用一个button进行控制是否漫游

1. <el-button @click="Ismovement" >漫游模式</el-button>

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！