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/