cesium鼠标控制键盘_Cesium实现键盘控制镜头效果

1 var viewer = new Cesium.Viewer('cesiumContainer');2

3 var scene =viewer.scene;4 var canvas =viewer.canvas;5 canvas.setAttribute('tabindex', '0'); //needed to put focus on the canvas

6 canvas.onclick = function() {7 canvas.focus();8 };9 var ellipsoid =scene.globe.ellipsoid;10

11 //disable the default event handlers

12 scene.screenSpaceCameraController.enableRotate = false;13 scene.screenSpaceCameraController.enableTranslate = false;14 scene.screenSpaceCameraController.enableZoom = false;15 scene.screenSpaceCameraController.enableTilt = false;16 scene.screenSpaceCameraController.enableLook = false;17

18 varstartMousePosition;19 varmousePosition;20 var flags ={21 looking : false,22 moveForward : false,23 moveBackward : false,24 moveUp : false,25 moveDown : false,26 moveLeft : false,27 moveRight : false

28 };29

30 var handler = newCesium.ScreenSpaceEventHandler(canvas);31

32 handler.setInputAction(function(movement) {33 flags.looking = true;34 mousePosition = startMousePosition =Cesium.Cartesian3.clone(movement.position);35 }, Cesium.ScreenSpaceEventType.LEFT_DOWN);36

37 handler.setInputAction(function(movement) {38 mousePosition =movement.endPosition;39 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);40

41 handler.setInputAction(function(position) {42 flags.looking = false;43 }, Cesium.ScreenSpaceEventType.LEFT_UP);44

45 functiongetFlagForKeyCode(keyCode) {46 switch(keyCode) {47 case 'W'.charCodeAt(0):48 return 'moveForward';49 case 'S'.charCodeAt(0):50 return 'moveBackward';51 case 'Q'.charCodeAt(0):52 return 'moveUp';53 case 'E'.charCodeAt(0):54 return 'moveDown';55 case 'D'.charCodeAt(0):56 return 'moveRight';57 case 'A'.charCodeAt(0):58 return 'moveLeft';59 default:60 returnundefined;61 }62 }63

64 document.addEventListener('keydown', function(e) {65 var flagName =getFlagForKeyCode(e.keyCode);66 if (typeof flagName !== 'undefined') {67 flags[flagName] = true;68 }69 }, false);70

71 document.addEventListener('keyup', function(e) {72 var flagName =getFlagForKeyCode(e.keyCode);73 if (typeof flagName !== 'undefined') {74 flags[flagName] = false;75 }76 }, false);77

78 viewer.clock.onTick.addEventListener(function(clock) {79 var camera =viewer.camera;80

81 if(flags.looking) {82 var width =canvas.clientWidth;83 var height =canvas.clientHeight;84

85 //Coordinate (0.0, 0.0) will be where the mouse was clicked.

86 var x = (mousePosition.x - startMousePosition.x) /width;87 var y = -(mousePosition.y - startMousePosition.y) /height;88

89 var lookFactor = 0.05;90 camera.lookRight(x *lookFactor);91 camera.lookUp(y *lookFactor);92 }93

94 //Change movement speed based on the distance of the camera to the surface of the ellipsoid.

95 var cameraHeight =ellipsoid.cartesianToCartographic(camera.position).height;96 var moveRate = cameraHeight / 100.0;97

98 if(flags.moveForward) {99 camera.moveForward(moveRate);100 }101 if(flags.moveBackward) {102 camera.moveBackward(moveRate);103 }104 if(flags.moveUp) {105 camera.moveUp(moveRate);106 }107 if(flags.moveDown) {108 camera.moveDown(moveRate);109 }110 if(flags.moveLeft) {111 camera.moveLeft(moveRate);112 }113 if(flags.moveRight) {114 camera.moveRight(moveRate);115 }116 });