Cesium learning notes (IV) visual image & Terrain

Visual images

Quick start

Use Bing Tagged image of map ：

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYTgyZmMzMC0xM2UzLTQyZjYtODVkYi0yNGYyNjk2ZDk4YmIiLCJpZCI6Mzc2MDYsImlhdCI6MTYwNTI0OTMwM30._tGGnG1gO-9KO6oRm3yFeGQ6l3E-ragZG0Wv5hmzRtM';
var viewer = new Cesium.Viewer('cesiumContainer', {
    
    imageryProvider : Cesium.createWorldImagery({
    
        style : Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
    }),
    baseLayerPicker : false
});

Add the night scene and adjust the transparency and brightness of the night scene layer ：

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.IonImageryProvider({
     assetId: 3812 }));
// Adjust transparency 
blackMarble.alpha = 0.5; //  transparency , 0.0 It's transparency . 1.0 Opaque .
// Increase brightness 
blackMarble.brightness = 2.0; // > 1.0： Increase brightness . < 1.0： Reduce brightness .

More imagery providers

High resolution images like the first two layers used above are too large , Unable to load memory , You can't even mount a single disk , Therefore, the image is divided into two parts called tiles Smaller image of , These images can be streamed to the client according to the view .Cesium Support a variety of different standards to use imagery providers request tiles, majority imagery providers Use REST interface To request tiles.imagery provider According to the format of the request and tiles Different from the organization form of .Cesium There are many kinds of imagery provider：

• WebMapServiceImageryProvider
• TileMapServiceImageryProvider
• WebMapTileServiceImageryProvider
• OpenStreetMapImageryProvider
• BingMapsImageryProvider
• ArcGisMapServerImageryProvider
• GoogleEarthEnterpriseMapsProvider
• MapboxImageryProvider
• SingleTileImageryProvider
• UrlTemplateImageryProvider
• TileCoordiantesImageryProvider

Imagery Providers and layer The difference between

imagery provider Use a specific service request block , and layer It means that the exhibition is from imagery provider Of tiles.

visualization 3D terrain

Quick start

stay Cesium.Viewer() It is specified in terrainProvider attribute

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYTgyZmMzMC0xM2UzLTQyZjYtODVkYi0yNGYyNjk2ZDk4YmIiLCJpZCI6Mzc2MDYsImlhdCI6MTYwNTI0OTMwM30._tGGnG1gO-9KO6oRm3yFeGQ6l3E-ragZG0Wv5hmzRtM';
var viewer = new Cesium.Viewer('cesiumContainer', {
    
    terrainProvider : Cesium.createWorldTerrain()
});

Then adjust the viewing angle to a special snow mountain terrain ：

Display terrain light and water surface effect

Cesium World Terrain It also contains data on the effects of light and water , But these data are not used by default .
To use terrain lighting , modify requestVertexNormals And light up the earth ：

var viewer = new Cesium.Viewer('cesiumContainer', {
    
    terrainProvider : Cesium.createWorldTerrain({
    
        requestVertexNormals: true
    })
});
viewer.scene.globe.enableLighting = true;

You can see the difference of light in the above figure , Day and night are separated .
The effect of opening the water surface is also very simple ：

var viewer = new Cesium.Viewer('cesiumContainer', {
    
    terrainProvider : Cesium.createWorldTerrain({
    
        requestWaterMask: true
    })
});

The surface of the water has the effect of surging waves . Waves change with time , Bright specular reflections highlight the reflections of the sun and moon . The wave effect can also be customized by specifying different maps .Globe.oceanNormalMapUrl. Changing the image provider can also modify the water surface effect , Because the color of water is related to the underlying image .

Camera

CesiumJS The camera in controls the view of the scene . There are many ways to operate the camera , Like rotation 、 The zoom 、 Pan and fly to the destination .CesiumJS There are mouse and touch event handlers for interacting with the camera , And for programmatically manipulating the camera API. Learn how to use the camera API And custom camera controls .
Use setView() Function to set the default position and orientation of the lens . This function has several options , among destination It can be a three-dimensional coordinate or a rectangle ;orientation Can define heading / pitch / roll / direction / up etc. , Unit degree .

camera.setView({
    
    destination : new Cesium.Cartesian3(x, y, z),
    orientation: {
    
        heading : headingAngle,
        pitch : pitchAngle,
        roll : rollAngle
    }
});

viewer.camera.setView({
    
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north),
    orientation: {
    
        heading : headingAngle,
        pitch : pitchAngle,
        roll : rollAngle
    }
});

Customize the action of the camera when the mouse or keyboard triggers an event

Let's create our own event handlers , Make the camera point in the direction of the mouse , And forward when the key is pressed 、 backward 、 Left 、 Right 、 On 、 Move down . First disable the default event handler .

var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
    
    canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

Create a variable to record the current mouse position , And markers to track camera movement :

var startMousePosition;
var mousePosition;
var flags = {
    
    looking : false,
    moveForward : false,
    moveBackward : false,
    moveUp : false,
    moveDown : false,
    moveLeft : false,
    moveRight : false
};

Add an event handler , To set the flag when you click the left mouse button , And record the current mouse position ：

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

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

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

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

Create a keyboard event handler to toggle the camera movement flag . We will flag the following keys and behaviors :

• w： Forward
• s： back off
• a： Move left
• d： Move right
• q： Raise the lens
• e： Down shot

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;
    }
}

document.addEventListener('keydown', function(e) {
    
    var flagName = getFlagForKeyCode(e.keyCode);
    if (typeof flagName !== 'undefined') {
    
        flags[flagName] = true;
    }
}, false);

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

Now? , We want to update the camera when the flag indicating the occurrence of the event is true . We can be on the clock onTick Event to add a listener , It contains the following code :

viewer.clock.onTick.addEventListener(function(clock) {
    
    var camera = viewer.camera;
});

Next , Let the camera look in the direction of the mouse cursor . Add the following code to the event listener function under the variable declaration :

if (flags.looking) {
    
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;

    // Coordinate (0.0, 0.0) will be where the mouse was clicked.
    var x = (mousePosition.x - startMousePosition.x) / width;
    var y = -(mousePosition.y - startMousePosition.y) / height;

    var lookFactor = 0.05;
    camera.lookRight(x * lookFactor);
    camera.lookUp(y * lookFactor);
}

About camera For the time being, the part is not much deeper , Wait until you use it .