Cesium 页面设置漫游路径上篇（键盘控制视图）

思路：Cesium的漫游，就是根据已定的视点来控制相机的移动，形成动态的漫游效果。

视点的选取是通过键盘控制的相机的移动，来扒去关键点。

function roamAction(){
    startRoam = true;
   viewer.scene.debugShowFramesPerSecond = true;
   viewer.scene.hdrEnabled = false;
   var canvas = viewer.canvas;
    canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
    canvas.onclick = function () {
        canvas.focus();
    };
    var itemPosition = getRoamPosition();
    actionRoamArr.push(itemPosition);
    ellipsoid = viewer.scene.globe.ellipsoid;
   //按下
    document.addEventListener('keydown', function (e) {
        var flagName = getFlagForKeyCode(e.keyCode);
        if(actionArr.indexOf(flagName)<0){
            actionArr.push(flagName);
            if(actionArr.length>1){
                var itemPosition = getRoamPosition();
                actionRoamArr.push(itemPosition);
            }
      }
        if (typeof flagName !== 'undefined') {
            flags[flagName] = true;
        }
    }, false);

    //抬起
    document.addEventListener('keyup', function (e) {
        var flagName = getFlagForKeyCode(e.keyCode);
        console.log(actionArr);
        actionArr = actionArr.filter(function(item){
           return item != flagName;
      });
        console.log(actionArr);
        if(startRoam&&actionFlag!=flagName){
            var itemPosition = getRoamPosition();
            actionRoamArr.push(itemPosition);
        }
        actionFlag = flagName;
        if (typeof flagName !== 'undefined') {
            flags[flagName] = false;
        }
    }, false);
   
   roamListener = function (clock) {
           var camera = viewer.camera;

           // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
           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);
           }
           if (flags.rotateLeft) {
              //获取当前坐标，以此为中间轴，进行旋转
              var post = viewer.camera.position;
              var axis = new Cesium.Cartesian3(Number(post.x),Number(post.y),Number(post.z))
              camera.rotate(axis,-0.01);
           }
           if (flags.rotateRight) {
              //获取当前坐标，以此为中间轴，进行旋转
              var post = viewer.camera.position;
              var axis = new Cesium.Cartesian3(Number(post.x),Number(post.y),Number(post.z))
              camera.rotate(axis,0.01);
           }
       }
   viewer.clock.onTick.addEventListener(roamListener);
}

 

function getRoamPosition(){
   var pos = viewer.scene.camera.position;
   //将笛卡尔坐标转化为经纬度坐标
   var heading = viewer.camera.heading;
   var pitch = viewer.camera.pitch;
   var roll = viewer.camera.roll;
    flyArr.push({"x":pos.x,"y":pos.y,"z":pos.z,"heading":heading,"pitch":pitch,"roll":roll});
   return {"x":pos.x,"y":pos.y,"z":pos.z,"heading":heading,"pitch":pitch,"roll":roll};
}

 

//判断 按键 值对应的操作
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';//左移
        case 'X'.charCodeAt(0):
           return 'rotateRight';//右转
        case 'Z'.charCodeAt(0):
           return 'rotateLeft';//左转
        default:
            return undefined;
    }
}