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/