Cesium基础知识-键盘鼠标事件

2023-10-18 23:23:10

  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();
上一篇：树莓派ARM64系统中如何设置opencv-python读取高清摄像头画面


下一篇：Jmeter之Bean shell使用(一)