作為一個剛開始學習 mapvthree 的小白，今天要學習加載 Cesium 數據了！聽説這個功能可以加載真實的地形數據，還能使用 Cesium 的影像服務！想想就期待！

第一次聽説 Cesium 數據加載

今天在文檔裏看到了"Cesium"這個詞。文檔説 Cesium 數據加載可以：

• 加載真實的地形數據
• 使用 Cesium 的影像服務
• 支持 Cesium Ion 服務
• 需要配置 AccessToken

我的理解：簡單説就是"用 Cesium 的地形和影像服務"，讓場景有真實的地形起伏！

第一步：配置 Cesium Ion AccessToken

作為一個初學者，我習慣先看看需要什麼配置。文檔説使用 Cesium 服務需要配置 Cesium Ion AccessToken！

我的發現：Cesium 需要 AccessToken 才能使用，這是必須的配置！

獲取 Cesium Ion AccessToken

1. 訪問 Cesium ion 獲取 accessToken
2. 在項目中配置

全局配置 AccessToken

獲取 AccessToken 後，在項目的入口處進行配置，全局執行一次即可：

import * as mapvthree from '@baidumap/mapv-three';

// 配置 Cesium accessToken
mapvthree.CesiumConfig.accessToken = '您的accessToken';

我的理解：全局配置後，使用 Cesium 的所有服務都不需要再配置了！

臨時配置 AccessToken

如果沒有全局配置，可以在構造函數參數中臨時配置：

const mapView = engine.add(new mapvthree.MapView({
    terrainProvider: new mapvthree.CesiumTerrainTileProvider({
        accessToken: '您的accessToken', // 臨時配置 Cesium accessToken
    }),
}));

我的發現：可以全局配置，也可以臨時配置，根據需求選擇！

第二步：加載 Cesium 地形

看到需要配置 AccessToken 後，我想：怎麼加載地形？

文檔説可以用 CesiumTerrainTileProvider 來加載 Cesium 地形！

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [94.09, 30.64],
        range: 50000,
        pitch: 50,
        provider: null, // 設置為 null，稍後手動添加
    },
});

// 添加 Cesium 地形
const mapView = engine.add(new mapvthree.MapView({
    terrainProvider: new mapvthree.CesiumTerrainTileProvider({
        // accessToken: '您的accessToken', // 如果沒有全局配置，可以在這裏直接傳入
    }),
    imageryProvider: new mapvthree.BingImageryTileProvider(),
}));

我的發現：地形數據會讓場景有真實的起伏，看起來更真實！

我的理解：

• 優點：真實的地形數據，場景更立體
• 缺點：需要網絡請求，加載時間較長
• 適用場景：需要真實地形展示的場景

自定義地形服務

如果不提供 url 自定義地形服務，默認使用 Cesium 官方服務。如果需要使用自定義地形服務：

const mapView = engine.add(new mapvthree.MapView({
    terrainProvider: new mapvthree.CesiumTerrainTileProvider({
        url: '您的自定義地形服務地址',
        accessToken: '您的accessToken',
    }),
}));

我的發現：可以使用自定義地形服務，也可以使用 Cesium 官方服務！

第三步：配合影像圖層使用

看到可以加載地形後，我想：地形是灰色的，能不能加上影像？

文檔説可以配合影像圖層使用，比如 BingImageryTileProvider！

const mapView = engine.add(new mapvthree.MapView({
    terrainProvider: new mapvthree.CesiumTerrainTileProvider({
        // 地形數據
    }),
    imageryProvider: new mapvthree.BingImageryTileProvider({
        // 影像數據
    }),
}));

我的發現：地形提供高度信息，影像提供顏色信息，兩者配合才能看到完整的地圖！

我的理解：

• terrainProvider：提供地形高度數據
• imageryProvider：提供影像顏色數據
• 兩者配合使用，效果最好

第四步：理解 MapView 結構

看到可以加載地形和影像後，我想：它們是怎麼組織的？

文檔説 MapView 是引擎中底圖的容器，包含 RasterSurface 和 VectorSurface。

我的理解：

• terrainProvider：地形數據，屬於 RasterSurface
• imageryProvider：影像數據，屬於 RasterSurface
• 多個 ImageryTileProvider 可以疊加渲染

我的發現：

• RasterSurface 能保證圖層之間疊加順序的正確性
• 適合二維地圖的渲染
• 多個影像圖層可以疊加，並分層設置透明度

第五步：完整示例

我想寫一個完整的示例，把學到的都用上：

import * as mapvthree from '@baidumap/mapv-three';

// 全局配置 Cesium accessToken
mapvthree.CesiumConfig.accessToken = '您的accessToken';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [94.09, 30.64],
        range: 50000,
        pitch: 50,
        provider: null, // 設置為 null，稍後手動添加
    },
});

// 添加 Cesium 地形和影像
const mapView = engine.add(new mapvthree.MapView({
    terrainProvider: new mapvthree.CesiumTerrainTileProvider({
        // 使用默認的 Cesium 官方服務
    }),
    imageryProvider: new mapvthree.BingImageryTileProvider({
        // 使用 Bing 影像服務
    }),
}));

我的感受：寫一個完整的示例，把學到的都用上，感覺很有成就感！

第六步：踩過的坑

作為一個初學者，我踩了不少坑，記錄下來避免再犯：

坑 1：地形不顯示

原因：沒有配置 Cesium Ion AccessToken，或者 AccessToken 配置錯誤。

解決：確保正確配置了 Cesium Ion AccessToken，可以全局配置或臨時配置。

坑 2：地形顯示為灰色

原因：只加載了地形，沒有加載影像圖層。

解決：同時配置 terrainProvider 和 imageryProvider。

坑 3：地形加載很慢

原因：地形數據量大，網絡請求需要時間。

解決：這是正常現象，地形數據需要從服務器加載，請耐心等待。

坑 4：AccessToken 過期

原因：Cesium Ion AccessToken 可能過期。

解決：重新獲取 AccessToken 並更新配置。

坑 5：自定義地形服務不工作

原因：地形服務地址錯誤，或者格式不對。

解決：確保地形服務地址正確，格式符合 Cesium Terrain 規範。

我的學習總結

經過這一天的學習，我掌握了：

1. 配置 Cesium Ion AccessToken：全局配置或臨時配置
2. 加載 Cesium 地形：使用 CesiumTerrainTileProvider
3. 配合影像圖層：使用 imageryProvider 提供影像數據
4. 自定義地形服務：可以使用自定義地形服務地址
5. MapView 結構：理解地形和影像在 MapView 中的組織方式

我的感受：Cesium 數據加載功能真的很強大！雖然配置有點複雜，但是用起來其實不難。關鍵是要理解地形和影像的關係，然後正確配置 AccessToken！

下一步計劃：

1. 學習更多地形和影像的配置選項
2. 嘗試使用自定義地形服務
3. 做一個完整的地形展示項目

學習筆記就到這裏啦！作為一個初學者，我覺得 Cesium 數據加載雖然配置有點複雜，但是用起來其實不難。關鍵是要理解地形和影像的關係，然後正確配置 AccessToken！希望我的筆記能幫到其他初學者！大家一起加油！