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方法

    //是否漫游模式
    Ismovement(){
      var that = this;
      this.movement = !this.movement;

      //如果進行漫游
      if(this.movement){
        var ellipsoid = this.viewer.scene.globe.ellipsoid;

        //先將滑鼠控制事件全部取消
        this.viewer.scene.screenSpaceCameraController.enableRotate = false;
        this.viewer.scene.screenSpaceCameraController.enableTranslate = false;
        this.viewer.scene.screenSpaceCameraController.enableZoom = false;
        this.viewer.scene.screenSpaceCameraController.enableTilt = false;
        this.viewer.scene.screenSpaceCameraController.enableLook = false;

        var startMousePosition;
        var mousePosition;

        //控制方向
        var flags = {
          looking : false,
          moveForward : false,
          moveBackward : false,
          moveUp : false,
          moveDown : false,
          moveLeft : false,
          moveRight : false
        };

        //按下左鍵的同時克隆一個滑鼠點擊的位置
        this.viewer.screenSpaceEventHandler.setInputAction(function(movement) {
          flags.looking = true;
          mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

        //記錄滑鼠移動的終點
        this.viewer.screenSpaceEventHandler.setInputAction(function(movement) {
          mousePosition = movement.endPosition;
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        //looking改為false，意思是此時滑鼠移動不會改變鏡頭方向
        this.viewer.screenSpaceEventHandler.setInputAction(function(position) {
          flags.looking = false;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);

        //獲得按下的哪個按鈕
        function getFlagForKeyCode(keyCode) {
          switch (keyCode) {
          case 'W'.charCodeAt(0):
            return 'moveForward';
          case 'S'.charCodeAt(0):
            return 'moveBackward';
          case 'Q'.charCodeAt(0):
            return 'moveUp';
          case 'E'.charCodeAt(0):
            return 'moveDown';
          case 'D'.charCodeAt(0):
            return 'moveRight';
          case 'A'.charCodeAt(0):
            return 'moveLeft';
          default:
            return undefined;
          }
        }

        //keydown如果長時間按下某個鍵，則重復觸發按鍵按下事件，
        document.addEventListener('keydown', this.down = function(e){
          var flagName = getFlagForKeyCode(e.keyCode);
          if (typeof flagName !== 'undefined') {
            flags[flagName] = true;
          }
        }, false);

        document.addEventListener('keyup', this.up =(e)=>{
          var flagName = getFlagForKeyCode(e.keyCode);
          if (typeof flagName !== 'undefined') {
            flags[flagName] = false;
          }
        }, false);

        //實時獲取cesium clock的tick每一幀的時間,十分常用的功能
        this.viewer.clock.onTick.addEventListener(function(clock) {
          
          var camera = that.viewer.camera;

          // 鏡頭旋轉
          if (flags.looking) {
            //獲取畫布的高度寬度
            var width = that.viewer.canvas.clientWidth;
            var height = that.viewer.canvas.clientHeight;

            //相當于轉動靈敏度,越大轉動越快
            var lookFactor =0.06;

            //x和y是滑鼠按下后移動的xy距離與畫布長寬的比例
            var x = (mousePosition.x - startMousePosition.x) / width;
            var y = -(mousePosition.y - startMousePosition.y) / height;
            
            camera.setView({
              //根據攝像頭現在的朝向和剛才移動的比例進行方向更新
              orientation: {
                  heading : camera.heading + x*lookFactor, 
                  pitch : camera.pitch + y*lookFactor,    
                  roll : 0.0                             
              }
            })
          }

          // 根據高度來決定鏡頭移動的速度
          var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
          var moveRate = cameraHeight / 100.0;

          if (flags.moveForward) {
            camera.moveForward(moveRate);
          }
          if (flags.moveBackward) {
            camera.moveBackward(moveRate);
          }
          if (flags.moveUp) {
            camera.moveUp(moveRate);
          }
          if (flags.moveDown) {
            camera.moveDown(moveRate);
          }
          if (flags.moveLeft) {
            camera.moveLeft(moveRate);
          }
          if (flags.moveRight) {
            camera.moveRight(moveRate);
          }
        });
      }else{
        //取消漫游
        this.viewer.scene.screenSpaceCameraController.enableRotate = true;
        this.viewer.scene.screenSpaceCameraController.enableTranslate = true;
        this.viewer.scene.screenSpaceCameraController.enableZoom = true;
        this.viewer.scene.screenSpaceCameraController.enableTilt = true;
        this.viewer.scene.screenSpaceCameraController.enableLook = true;
        this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
        this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
        document.removeEventListener('keydown',this.down,false)
        document.removeEventListener('keyup',this.up,false)
    
      }
    },

為了方便測驗，這里用一個button進行控制是否漫游

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

標籤：其他

上一篇：SAP 交貨單與HU指派關系資料不一致問題的解決方案

下一篇：網頁DOM編程方法（API總結與應用）