Cesium入门12 - Camera Modes - 相机模式

Cesium入门12 - Camera Modes - 相机模式

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

为了展示咱们的无人机飞行，让咱们用相机模式进行实验。咱们将保持简单的两个基本的相机模式，用户能够切换之间。

• Free Mode : 默认相机控制。
• Drone Mode : 让相机跟随无人机经过飞行在一个固定的距离。

自由模式不须要代码，由于它使用默认控件。至于无人机跟随模式，咱们能够使用摄像机的内置实体跟踪功能来定位摄像机，并用偏移量定位无人机。这就使得相机即便在移动时也能从指定的实体中获得固定的偏移量。为了跟踪一个实体，咱们简单地设置viewer.trackedEntity。

要切换到自由相机模式，咱们能够将viewer.trackedEntity实体设置为未定义，而后使用**camera.flyTo()**返回到咱们的Home视角。

如下是相机模式的函数：

// Create a follow camera by tracking the drone entity
function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

为了把这个附加到HTML输入，咱们能够附加这个函数来change事件到适当的元素上：

var freeModeElement = document.getElementById('freeMode');
var droneModeElement = document.getElementById('droneMode');

// Create a follow camera by tracking the drone entity
function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

freeModeElement.addEventListener('change', setCameraMode);
droneModeElement.addEventListener('change', setCameraMode);

最后，当用户双击实体时，实体会被自动跟踪。若是用户经过单击开始跟踪无人机，咱们能够添加一些处理来自动更新UI。

viewer.trackedEntityChanged.addEventListener(function() {
    if (viewer.trackedEntity === drone) {
        freeModeElement.checked = false;
        droneModeElement.checked = true;
    }
});

这是咱们的两个相机模式-咱们如今能够自由切换到无人机相机视角，看起来像这样：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/