Cesium Learning Notes (iv): Camera (camera)

The camera can control our vision in the scene, the default, camera operation is this:Left-click and drag-move the entire map right-click and drag-zoom in and zoom out on the camera. Wheel scrolling-You can also zoom in and out of the camera. Click and drag in the middle-rotate the camera around the point of the Earth's surface. we can set the position for the camera ourselves .

var point = Cesium.Cartesian3.fromDegrees ( -117.16, 32.71, 15000.0);
Camera.setview ({
    destination:point,
    orientation: {
        Heading:Cesium.Math.toRadians (0.0),//default value
        Pitch:Cesium.Math.toRadians (-90.0),///default value
        roll:0.0//default value
    }
};

As you can see, we're loading a point, and this vision is also viewed from this point, and we can also load a rectangle, which is the entire field of vision .

He needs West, south, east, and north four degrees to form
var rectangle = Cesium.Rectangle.fromDegrees (0.0, 20.0, 10.0, 30.0);
Camera.setview ({
    destination:point,
    orientation: {
        Heading:Cesium.Math.toRadians (0.0),//default value
        Pitch:Cesium.Math.toRadians (-90.0),///default value
        roll:0.0//default value
    }
};

The area you're seeing now is the rectangle we're loading . now, let's try to overwrite the lens movement ourselves. First of all, it must be the first to ban the original

var viewer = new Cesium.viewer ("Cesiumcontainer");
var scene = Viewer.scene;
var canvas = Viewer.canvas;
Canvas.setattribute (' TabIndex ', ' 0 '); You need to focus on the canvas
Canvas.onclick = function () {
    canvas.focus ();
};
This ellipsoid is the earth.
var ellipsoid = viewer.scene.globe.ellipsoid;

Disables the default event
scene.screenSpaceCameraController.enableRotate = false;
Scene.screenSpaceCameraController.enableTranslate = false;
Scene.screenSpaceCameraController.enableZoom = false;
Scene.screenSpaceCameraController.enableTilt = false;
Scene.screenSpaceCameraController.enableLook = false;

and then create the variables we use to record the mouse position and keyboard clicks.

The variable that stores the mouse position
var startmouseposition;
var mouseposition;

var flags = {
    //log whether the map is being viewed, that is, whether the mouse or keyboard looking:false is clicked
    ,
    //recording the keyboard before and after the top and bottom around
    moveforward:false,
    Movebackward:false,
    Moveup:false,
    movedown:false,
    moveleft:false,
    moveright:false
};

continue to set the camera movement effect for the keyboard wasdqe several keys

To determine the input function of the keyboard
Getflagforkeycode (keycode) {
    switch (keycode) {case
    ' W '. charCodeAt (0): Return
        ' MoveUp ';
    Case of ' S '. charCodeAt (0): Return
        ' MoveDown ';
    Case ' Q '. charCodeAt (0): Return
        ' Moveforward ';
    Case ' E '-charcodeat (0): Return
        ' Movebackward ';
    Case ' D ', charCodeAt (0): Return
        ' MoveRight ';
    Case ' A '-charcodeat (0): Return
        ' MoveLeft ';
    Default: Return
        undefined
    }
}
Gets the keyboard KeyDown event
document.addeventlistener (' KeyDown ', function (e) {
    var flagname = Getflagforkeycode ( E.keycode);
    if (typeof flagname!== ' undefined ') {
        flags[flagname] = true;
    }
}, false);
Gets the keyboard KeyUp event
document.addeventlistener (' KeyUp ', function (e) {
    var flagname = Getflagforkeycode (e.keycode );
    if (typeof flagname!== ' undefined ') {
        flags[flagname] = false;
    }
}, False);

don't forget, there's a mouse.

Listens for user input
var handler = new Cesium.screenspaceeventhandler (canvas);
Executes when the left mouse button is pressed (where the mouse is pressed)
handler.setinputaction (function (movement) {
    flags.looking = true;
    MousePosition = Startmouseposition = Cesium.Cartesian3.clone (movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
Executes when the mouse is moved (the position where the mouse is lifted)
handler.setinputaction (function (movement) {
    mouseposition = movement.endposition;
} , Cesium.ScreenSpaceEventType.MOUSE_MOVE);
Executes handler.setinputaction when the left mouse button is raised
(function (position) {
    flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

Finally, according to the mouse and keyboard input we receive to achieve real camera movement

Update Camera Viewer.clock.onTick.addEventListener (function (clock) {var camera = Viewer.camera;
        When the left mouse button is pressed if (flags.looking) {var width = canvas.clientwidth;

        var height = canvas.clientheight;
        Mouse sliding distance of x or y/Web page visible area of wide or high var x = (mouseposition.x-startmouseposition.x)/width;
        var y =-(MOUSEPOSITION.Y-STARTMOUSEPOSITION.Y)/height;
        This is the parameter that determines the camera's moving speed var lookfactor = 0.05;
        Camera Mobile Camera.lookright (x * lookfactor);
    Camera.lookup (y * lookfactor);
    The rate of camera movement is based on the height of the lens from the earth. 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); }
});

Here we're loading the listening event on the clock Ontick, which is a millisecond callback that will ensure that our lenses move smoothly. The complete code is as follows

The camera sets the var viewer = new Cesium.viewer ("Cesiumcontainer");
var scene = Viewer.scene;
var canvas = Viewer.canvas; Canvas.setattribute (' TabIndex ', ' 0 ');
You need to focus on the canvas Canvas.onclick = function () {Canvas.focus ();};

This ellipsoid is the earth. var ellipsoid = viewer.scene.globe.ellipsoid;
Disables the default event Scene.screenSpaceCameraController.enableRotate = FALSE;
Scene.screenSpaceCameraController.enableTranslate = false;
Scene.screenSpaceCameraController.enableZoom = false;
Scene.screenSpaceCameraController.enableTilt = false;

Scene.screenSpaceCameraController.enableLook = false;
The variable that stores the mouse position var startmouseposition;

var mouseposition; var flags = {//log whether the map is being viewed, that is, whether the mouse or keyboard looking:false is clicked,//recording the keyboard around the top and bottom moveforward:false, moveback

Ward:false, Moveup:false, Movedown:false, Moveleft:false, moveright:false};
Listens for user input var handler = new Cesium.screenspaceeventhandler (canvas); Executes when the left mouse button is pressed (where the mouse is pressed) handler.setinputaction (function (movement) {Flags.lookiNg = true;
MousePosition = Startmouseposition = Cesium.Cartesian3.clone (movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN); Executes when the mouse is moved (gets the position of the mouse when it is lifted) handler.setinputaction (function (movement) {mouseposition = movement.endposition;}, Cesium.sc
Reenspaceeventtype.mouse_move); Executes handler.setinputaction when the left mouse button is raised (function (position) {flags.looking = false;}, Cesium.ScreenSpaceEventType.LEFT_U

P); To determine the input function of the keyboard Getflagforkeycode (keycode) {switch (keycode) {case ' W '. charCodeAt (0): Return ' moveUp '
    ;
    Case of ' S '. charCodeAt (0): return ' MoveDown ';
    Case ' Q '. charCodeAt (0): return ' Moveforward ';
    Case ' E '-charcodeat (0): return ' Movebackward ';
    Case ' D ', charCodeAt (0): return ' MoveRight ';
    Case ' A '-charcodeat (0): return ' moveLeft ';
    Default:return undefined;
    }//Get keyboard KeyDown event Document.addeventlistener (' KeyDown ', function (e) {var flagname = Getflagforkeycode (E.keycode); if (typeof FlagName!== ' undefined ') {flags[flagname] = true;
}}, False);
    Gets the keyboard KeyUp event Document.addeventlistener (' KeyUp ', function (e) {var flagname = Getflagforkeycode (E.keycode);
    if (typeof flagname!== ' undefined ') {flags[flagname] = false;

}}, False);
    Update Camera Viewer.clock.onTick.addEventListener (function (clock) {Console.log ("Dida");
    var camera = Viewer.camera;
        When the left mouse button is pressed if (flags.looking) {var width = canvas.clientwidth;

        var height = canvas.clientheight;
        Mouse sliding distance of x or y/Web page visible area of wide or high var x = (mouseposition.x-startmouseposition.x)/width;
        var y =-(MOUSEPOSITION.Y-STARTMOUSEPOSITION.Y)/height;
        This is the parameter that determines the camera's moving speed var lookfactor = 0.05;
        Camera Mobile Camera.lookright (x * lookfactor);
    Camera.lookup (y * lookfactor);
    The speed of the lens movement is based on the height of the lens from the earth. 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); }
});

References: Official website tutorials, the offical API