Cesium FlyTo詳解

一、FlyTo概述

Cesium是一款基於WebGL開源JavaScript庫，用於構建3D地球、地圖及其他視覺化場景。它提供了許多常用的地圖功能，如場景切換、相機控制、基礎地圖功能、衛星影像、地形調整、3D建築物、KML/KMZ支持等等。其中，FlyTo是Cesium中的一個重要組件，負責將相機飛行到指定的位置、方向和高度，具有非常好的視覺效果。

官方文檔中對FlyTo的概括如下：

flyTo(destination, options)

destination表示要飛行到的目標位置，可以是一個Entity、Cartographic、Rectangle、BoundingSphere等Cesium內置對象，也可以是一個笛卡爾坐標系下的三維坐標數組。options表示飛行參數，包括飛行時長、視角、朝向、縮放等選項。另外，Cesium還提供了可鏈式調用的Camera.flyTo()接口，用起來更加簡潔方便。

二、使用方法

1、簡單飛行

以下代碼展示了如何飛到經度為120，緯度為30，高度為1000米的位置：

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(120, 30, 1000)
});

上述代碼中，我們首先通過Cesium.Cartesian3.fromDegrees()將經緯度轉換為笛卡爾坐標系下的三維坐標，然後傳入Camera.flyTo()中的desination參數即可完成飛行。Cesium基於慣性滾動和相機動畫，實現了相機的平滑過渡並使飛行變得更加自然流暢。

2、定製化飛行

2.1、飛行參數

飛行參數可以控制飛行時長、視角、朝向、縮放等選項，以下是一個完整的範例：

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(120, 30, 5000),
    orientation: {
        heading: Cesium.Math.toRadians(-50),
        pitch: Cesium.Math.toRadians(-20),
        roll: 0.0
    },
    duration: 3,
    complete: function() {
        console.log('Fly to complete!');
    }
});

其中，orientation對象用於控制相機的方向，包括heading、pitch、roll三個角度分量，單位為弧度；duration表示飛行時間，單位為秒；complete是一個回調函數，飛行結束後會自動調用該函數。

2.2、多段飛行

我們也可以實現多段飛行，將相機分別飛到多個位置。以下是一個飛行軌跡的範例：

var positions = [
    Cesium.Cartesian3.fromDegrees(120, 30, 5000),
    Cesium.Cartesian3.fromDegrees(122, 32, 5000),
    Cesium.Cartesian3.fromDegrees(125, 35, 5000),
];

viewer.camera.flyTo({
    duration: 3,
    orientation: {
        heading: Cesium.Math.toRadians(-50),
        pitch: Cesium.Math.toRadians(-20),
        roll: 0.0
    },
    destination: positions[0],
    complete: function() {
        viewer.camera.flyTo({
            duration: 3,
            orientation: {
                heading: Cesium.Math.toRadians(-50),
                pitch: Cesium.Math.toRadians(-20),
                roll: 0.0
            },
            destination: positions[1],
        });
    }
});

viewer.clock.onTick.addEventListener(function() {
    var distance = Cesium.Cartesian3.distance(viewer.camera.position, positions[1]);
    if(distance < 10000) {
        viewer.camera.flyTo({
            duration: 3,
            orientation: {
                heading: Cesium.Math.toRadians(-50),
                pitch: Cesium.Math.toRadians(-20),
                roll: 0.0
            },
            destination: positions[2],
        });
    }
});

以上代碼中，我們首先定義了三個目標位置，並使用一次flyTo()將相機飛到第一個位置。並在flyTo()的complete回調函數中，再次調用flyTo()將相機飛到第二個位置。由於Cesium的飛行是基於慣性滾動和相機動畫的，我們無法直接判斷相機是否到達目標位置。因此，我們需要通過監聽Cesium的Clock軌跡事件，計算相機與目標位置之間的距離，並在距離小於閾值時，再次調用flyTo()將相機飛到第三個位置。

三、FlyTo實現原理

FlyTo的實現主要涉及以下兩個方面：

1、攝像機運動學

對於3D場景中的相機視角，我們通常使用歐拉角來描述相機的方向。歐拉角包括航向角（Heading）、俯仰角（Pitch）和滾轉角（Roll）。Cesium在內部維護了相機的歐拉角、位置、速度等狀態信息，並使用時間戳來控制場景的更新。

2、插值和動畫

Cesium的FlyTo是通過插值和動畫來實現的。具體而言，FlyTo使用了漸進式插值和Cubic Hermite樣條插值（CHAI）算法，將用戶指定的相機位置和方向與當前相機位置和方向進行插值，瞬間跳躍到一個新的位置和方向。同時，為了避免躍變造成的視覺不適，FlyTo使用了漸進過渡和緩動函數，在一定時間內平滑過渡到新的位置、方向和縮放比例。

四、總結

通過上述分析，我們可以看到，Cesium FlyTo在3D場景中是非常重要且常用的一個組件，其基於慣性滾動和相機動畫，實現了相機的平滑過渡並使飛行變得更加自然流暢。同時，FlyTo通過插值和動畫，將用戶指定的相機位置和方向與當前相機位置和方向進行插值，在一定時間內平滑過渡到新的位置、朝向和縮放比例。這種實現方式，使得相機的運動軌跡更加自然、流暢，同時也對視覺體驗產生了積極的影響。