作為一個剛開始學習 mapvthree 的小白，今天要學習加載天地圖了！聽説這個功能可以加載天地圖的影像服務，作為場景的底圖！想想就期待！
第一次聽説天地圖加載
今天在文檔裏看到了"天地圖"這個詞，一開始我還以為是某個地圖庫，結果查了一下才知道，原來這是國家基礎地理信息中心提供的地圖服務！
文檔説天地圖加載可以：
- 加載天地圖影像服務
- 需要配置 token
- 可以作為場景的底圖
我的理解：簡單説就是"用天地圖的影像服務"，讓場景有天地圖風格的地圖底圖！
第一步：配置天地圖 Token
作為一個初學者，我習慣先看看需要什麼配置。文檔説使用天地圖服務需要配置天地圖 token！
我的發現：天地圖需要 token 才能使用，這是必須的配置！
獲取天地圖 Token
- 訪問 天地圖控制枱 獲取 token
- 在項目中配置
全局配置 Token
獲取 token 後，在項目的入口處進行配置，全局執行一次即可：
import * as mapvthree from '@baidumap/mapv-three';
// 配置天地圖 token
mapvthree.TiandituConfig.tk = '您的token';
我的理解：全局配置後，使用天地圖的所有服務都不需要再配置了！
臨時配置 Token
如果沒有全局配置，可以在構造函數參數中臨時配置：
const mapView = engine.add(new mapvthree.MapView({
imageryProvider: new mapvthree.TiandituImageryTileProvider({
tk: '您的token', // 臨時配置天地圖 token
}),
}));
我的發現：可以全局配置，也可以臨時配置，根據需求選擇！
第二步：加載天地圖
看到需要配置 token 後，我想：怎麼加載天地圖？
文檔説可以用 TiandituImageryTileProvider 來加載天地圖！
import * as mapvthree from '@baidumap/mapv-three';
const container = document.getElementById('container');
const engine = new mapvthree.Engine(container, {
map: {
center: [120.628, 27.786],
range: 500000,
provider: null, // 設置為 null，稍後手動添加
projection: 'EPSG:3857',
},
});
// 添加天地圖
const mapView = engine.add(new mapvthree.MapView({
imageryProvider: new mapvthree.TiandituImageryTileProvider({
// tk: '您的token', // 如果沒有全局配置，可以在這裏直接傳入
}),
}));
我的發現：天地圖通過 imageryProvider 添加，作為影像圖層使用！
我的理解：
- 優點：國家官方地圖服務，數據權威
- 缺點：需要 token
- 適用場景：需要國家官方地圖數據的場景
第三步：理解 MapView 結構
看到可以加載天地圖後，我想：天地圖是怎麼組織的？
文檔説 MapView 是引擎中底圖的容器，天地圖使用 RasterSurface 渲染。
我的理解：
TiandituImageryTileProvider是ImageryTileProvider- 通過
imageryProvider添加到RasterSurface RasterSurface能保證圖層之間疊加順序的正確性
我的發現：
RasterSurface適合二維地圖的渲染- 多個
ImageryTileProvider可以疊加渲染，並分層設置透明度 - 如果不設置地形，引擎內部會自動創建一個平面地形層
多個影像圖層疊加
文檔説可以同時加載多個影像圖層：
const mapView = engine.add(new mapvthree.MapView({
imageryProviders: [
new mapvthree.TiandituImageryTileProvider({
opacity: 1,
}),
// 可以添加其他影像圖層
],
}));
我的發現：可以同時加載多個影像圖層，通過 opacity 控制透明度！
第四步：完整示例
我想寫一個完整的示例，把學到的都用上：
import * as mapvthree from '@baidumap/mapv-three';
// 全局配置天地圖 token
mapvthree.TiandituConfig.tk = '您的token';
const container = document.getElementById('container');
const engine = new mapvthree.Engine(container, {
map: {
center: [120.628, 27.786],
range: 500000,
provider: null, // 設置為 null，稍後手動添加
projection: 'EPSG:3857',
},
});
// 添加天地圖
const mapView = engine.add(new mapvthree.MapView({
imageryProvider: new mapvthree.TiandituImageryTileProvider({
// 使用全局配置的 token
}),
}));
我的感受：寫一個完整的示例，把學到的都用上，感覺很有成就感！
第五步：踩過的坑
作為一個初學者，我踩了不少坑，記錄下來避免再犯：
坑 1：地圖不顯示
原因：沒有配置天地圖 token，或者 token 配置錯誤。
解決：確保正確配置了天地圖 token，可以全局配置或臨時配置。
坑 2：地圖顯示空白
原因：在引擎初始化時設置了 provider，但沒有正確配置。
解決：如果手動添加 MapView，需要將 provider 設置為 null。
坑 3：token 過期
原因：天地圖 token 可能過期。
解決：重新獲取 token 並更新配置。
坑 4：性能問題
原因：創建了多個 MapView 實例。
解決：MapView 性能開銷較大，儘可能少創建 MapView 實例，儘量在一個 MapView 中疊加多個圖層。
我的學習總結
經過這一天的學習，我掌握了：
- 配置天地圖 Token：全局配置或臨時配置
- 加載天地圖：使用
TiandituImageryTileProvider - MapView 結構：理解天地圖在 MapView 中的組織方式
- 圖層疊加：可以同時加載多個影像圖層
我的感受：天地圖加載功能很實用！雖然配置有點複雜，但是用起來其實不難。關鍵是要理解 MapView 的結構，然後正確配置 token！
下一步計劃：
- 學習更多影像圖層的配置選項
- 嘗試創建複雜的圖層疊加效果
- 做一個完整的地圖展示項目
學習筆記就到這裏啦！作為一個初學者，我覺得天地圖加載雖然配置有點複雜，但是用起來其實不難。關鍵是要理解 MapView 的結構，然後正確配置 token！希望我的筆記能幫到其他初學者！大家一起加油！
