标签：canvas false 鼠标 基础知识 var camera flags Cesium

1. viewer = new Cesium.Viewer('cesiumContainer');
3. //操作1
4. function oneMouse() {
5.     camera.setView({
6.         destination: new Cesium.Cartesian3(x, y, z),
7.         orientation: {
8.             heading: headingAngle,
9.             pitch: pitchAngle,
10.             roll: rollAngle
11.         }
12.     });
13. }
14. //oneMouse();
16. //操作2
17. function twoMouse() {
18.     viewer.camera.setView({
19.         destination: Cesium.Rectangle.fromDegrees(west, south, east, north),
20.         orientation: {
21.             heading: headingAngle,
22.             pitch: pitchAngle,
23.             roll: rollAngle
24.         }
25.     });
26. }
27. //twoMouse();
29. //使用键盘,禁用默认控制
30. function useKeyboard() {
31.     // viewer = new Cesium.Viewer('cesiumContainer');
32.     var scene = viewer.scene;
33.     var canvas = viewer.canvas;
34.     canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
35.     canvas.onclick = function () {
36.         canvas.focus();
37.     };
38.     var ellipsoid = viewer.scene.globe.ellipsoid;
40.     //禁用默认控制
41.     scene.screenSpaceCameraController.enableRotate = false;
42.     scene.screenSpaceCameraController.enableTranslate = false;
43.     scene.screenSpaceCameraController.enableZoom = false;
44.     scene.screenSpaceCameraController.enableTilt = false;
45.     scene.screenSpaceCameraController.enableLook = false;
47.     //记录当前鼠标位置，标记相机移动轨迹
48.     var startMousePosition;
49.     var mousePosition;
50.     var flags = {
51.         looking: false,
52.         moveForward: false,
53.         moveBackward: false,
54.         moveUp: false,
55.         moveDown: false,
56.         moveLeft: false,
57.         moveRight: false
58.     };
59. 
     
60.     //添加事件控制相机的标记
61.     var handler = new Cesium.ScreenSpaceEventHandler(canvas);
63.     handler.setInputAction(function (movement) {
64.         flags.looking = true;
65.         mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
66.     }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
68.     handler.setInputAction(function (movement) {
69.         mousePosition = movement.endPosition;
70.     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
72.     handler.setInputAction(function (position) {
73.         flags.looking = false;
74.     }, Cesium.ScreenSpaceEventType.LEFT_UP);
75. 
     
76.     //键盘事件
77.     function getFlagForKeyCode(keyCode) {
78.         switch (keyCode) {
79.             case 'W'.charCodeAt(0):
80.                 return 'moveForward';
81.             case 'S'.charCodeAt(0):
82.                 return 'moveBackward';
83.             case 'Q'.charCodeAt(0):
84.                 return 'moveUp';
85.             case 'E'.charCodeAt(0):
86.                 return 'moveDown';
87.             case 'D'.charCodeAt(0):
88.                 return 'moveRight';
89.             case 'A'.charCodeAt(0):
90.                 return 'moveLeft';
91.             default:
92.                 return undefined;
93.         }
94.     }
96.     document.addEventListener('keydown', function (e) {
97.         var flagName = getFlagForKeyCode(e.keyCode);
98.         if (typeof flagName !== 'undefined') {
99.             flags[flagName] = true;
100.         }
101.     }, false);
103.     document.addEventListener('keyup', function (e) {
104.         var flagName = getFlagForKeyCode(e.keyCode);
105.         if (typeof flagName !== 'undefined') {
106.             flags[flagName] = false;
107.         }
108.     }, false);
110.     //更新相机位置
111.     viewer.clock.onTick.addEventListener(function (clock) {
112.         var camera = viewer.camera;
114.         //相机指向鼠标指向的方形
115.         if (flags.looking) {
116.             var width = canvas.clientWidth;
117.             var height = canvas.clientHeight;
119.             // Coordinate (0.0, 0.0) will be where the mouse was clicked.
120.             var x = (mousePosition.x - startMousePosition.x) / width;
121.             var y = -(mousePosition.y - startMousePosition.y) / height;
123.             var lookFactor = 0.05;
124.             camera.lookRight(x * lookFactor);
125.             camera.lookUp(y * lookFactor);
126.         }
127.         // 相机移动
128.         var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
129.         var moveRate = cameraHeight / 100.0;
131.         if (flags.moveForward) {
132.             camera.moveForward(moveRate);
133.         }
134.         if (flags.moveBackward) {
135.             camera.moveBackward(moveRate);
136.         }
137.         if (flags.moveUp) {
138.             camera.moveUp(moveRate);
139.         }
140.         if (flags.moveDown) {
141.             camera.moveDown(moveRate);
142.         }
143.         if (flags.moveLeft) {
144.             camera.moveLeft(moveRate);
145.         }
146.         if (flags.moveRight) {
147.             camera.moveRight(moveRate);
148.         }
150.         //参数限制
151.         //var west = Cesium.Math.toRadians(-77.0);
152.         //var south = Cesium.Math.toRadians(38.0);
153.         //var east = Cesium.Math.toRadians(-72.0);
154.         //var north = Cesium.Math.toRadians(42.0);
155.         //var extent = new Cesium.Extent(west, south, east, north);
156.         //camera.viewExtent(extent, Cesium.Ellipsoid.WGS84);
157. 
      
158.         // find intersection of the pixel picked and an ellipsoid
159.         var ray = camera.getPickRay(mousePosition);
160.         var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, Cesium.Ellipsoid.WGS84);
161.     });
163.     
164. }
165. useKeyboard();

标签：canvas,false,鼠标,基础知识,var,camera,flags,Cesium
来源： https://blog.csdn.net/QQhelphelp/article/details/122580957

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。