Cesium学习笔记（四）可视化图像&地形

可视化图像

快速开始

使用Bing地图的带标签图像：

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

添加夜景并调整夜景图层的透明度和亮度：

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));
//调节透明度
blackMarble.alpha = 0.5; // 透明度， 0.0是透明.  1.0不透明.
//增加亮度
blackMarble.brightness = 2.0; // > 1.0：增加亮度.  < 1.0：减少亮度.

More imagery providers

像上面使用的前两层那样的高分辨率图像太大，无法装入内存，甚至无法装入单个磁盘，因此图像被划分为称为tiles的更小的图像，这些图像可以根据视图根据需要流到客户机。Cesium支持多种不同的标准来使用imagery providers请求tiles，大多数imagery providers使用REST interface来请求tiles。imagery provider根据请求的格式和tiles的组织形式而有所不同。Cesium有以下多种imagery provider：

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

Imagery Providers和layer的区别

imagery provider使用特定服务请求图块，而layer则代表展示来自imagery provider的tiles。

可视化3D地形

快速开始

在Cesium.Viewer()中指定terrainProvider属性

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

然后调整视角到一个特殊的雪山地形上：

显示地形光线和水面效果

Cesium World Terrain也包含光线和水面效果的数据，只是这些数据默认不使用。
为了使用地形光线，修改requestVertexNormals并且点亮地球光线：

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

可以看到上图已经有了光线的差别，白天和黑夜分隔开。
开启水面效果也很简单：

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

水面有了波浪涌动的效果。波浪随时间变化，明亮的镜面反射高亮显示太阳和月亮的反射。波浪效果也可以通过指定不同的地图来定制。Globe.oceanNormalMapUrl。改变图像提供商也能修改水面效果，因为水的颜色和底层图像有关。

Camera

CesiumJS中的摄像机控制着场景的视图。有许多方法可以操作相机，比如旋转、缩放、平移和飞到目的地。CesiumJS有用于与摄像机交互的鼠标和触摸事件处理程序，以及用于以编程方式操纵摄像机的API。学习如何使用相机API和自定义相机控件。
使用setView()函数来设置镜头默认位置和朝向。这个函数有几个选项，其中destination可以是三维坐标或是一个矩形；orientation可以定义heading / pitch / roll / direction / up等，单位为度。

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

定制鼠标或键盘触发事件时镜头动作

让我们创建我们自己的事件处理程序，使摄像机朝着鼠标的方向，并在按键按下时向前、向后、左、右、上、下移动。首先禁用默认的事件处理程序。

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;

创建变量来记录当前鼠标的位置，以及标记来跟踪摄像机的移动:

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

添加一个事件处理程序，以在单击鼠标左键时设置标志，并记录当前鼠标位置：

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

创建键盘事件处理程序来切换相机移动的标志。我们将为以下键和行为设置标志:

• w：前进
• s：后退
• a：左移
• d：右移
• q：抬高镜头
• e：下降镜头

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

现在，我们想在指示事件发生的标志为真时更新摄像机。我们可以为时钟上的onTick事件添加一个侦听器，其中包含以下代码:

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

接下来，让相机朝鼠标光标的方向看。在变量声明下面的事件监听器函数中添加以下代码:

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

关于camera部分就暂时不过多深入了，等用到了再细看。