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/