用MapV-Three渲染傾斜攝影，就這麼簡單
傾斜攝影技術現在越來越常見了。什麼園區三維建模、城市三維重建、地形可視化，背後用的基本都是這玩意兒。而在實際開發中，傾斜攝影數據一般都是以3D Tiles格式存儲的。
好消息是，MapV-Three框架把3D Tiles的加載渲染封裝得非常簡單。今天我們就來看看怎麼用 Default3DTiles 這個組件快速實現傾斜攝影的渲染。
一、3D Tiles是什麼？
在正式開始之前，先簡單科普一下。
3D Tiles 是Cesium推出的一種用於傳輸大規模三維地理空間數據的開放標準。説人話就是：把海量的三維模型數據切成小塊（瓦片），然後根據視角和距離按需加載，這樣既能保證顯示效果，又不會卡到爆炸。
常見的傾斜攝影、BIM模型、點雲數據，都可以轉成3D Tiles格式。
在MapV-Three中，加載3D Tiles數據主要用到Default3DTiles這個通用的3D Tiles加載器，適用於大部分場景
二、最簡單的例子：加載傾斜攝影
廢話不多説，直接上代碼。
基礎加載
import {useRef} from 'react';
import * as mapvthree from '@baidu/mapv-three';
const ref = useRef();
async function callback(engine) {
const tile = engine.add(new mapvthree.Default3DTiles({
url: 'data/3dtiles/tileset.json',
}));
return engine;
}
<App ref={ref} initConfig={{
map: {
center: [105.931684, 29.349367, 280],
range: 2000,
pitch: 75,
provider: null,
}
}} callback={callback} />就這麼幾行代碼，搞定！
核心就是：
new mapvthree.Default3DTiles()創建實例- 傳入
url參數，指向3D Tiles的入口文件（通常是tileset.json） engine.add()添加到場景中
運行後，地圖上就會顯示出三維建模了。
關鍵配置説明
地圖初始化配置：
center：地圖中心點座標，格式是[經度, 緯度, 高度]。高度這個參數很重要，直接影響初始視角range：相機距離地面的高度（米）pitch：俯仰角，0是平視，90是俯視。傾斜攝影一般設置60-80度比較合適provider: null：不加載底圖，因為我們要看的是三維模型本身
tileset.json 是什麼：
這是3D Tiles數據的元數據文件，裏面定義了瓦片的組織結構、座標系、細節層級等信息。只要有這個文件，引擎就知道該怎麼加載整個數據集。
三、常見問題與解決方案
雖然代碼很簡單，但實際開發中還是會遇到一些問題。
問題1：模型加載不出來
可能的原因：
tileset.json路徑不對- 數據文件的座標系和地圖座標系不匹配
- 初始視角離模型太遠或太近
排查方法：
- 打開瀏覽器控制枱，看有沒有404錯誤（路徑問題）
- 檢查
tileset.json文件中的region或boundingVolume字段，確認模型的地理位置 - 調整
center和range參數，試着飛到模型附近
問題2：模型顯示很卡
可能的原因：
- 數據量太大，沒有做LOD優化
- 顯卡性能不夠
- 同時加載了太多瓦片
優化建議：
- 確保3D Tiles數據是分層級切片的（LOD）
- 適當調整相機視角，減少可見瓦片數量
- 關閉不必要的後處理效果（如果開了的話）
問題3：模型位置偏移
原因：座標系不一致。
傾斜攝影數據可能是WGS84、GCJ02或其他座標系，而MapV-Three可以使用多種座標系。如果不匹配，模型會跑偏。
解決方法：
- 在生成3D Tiles數據時，統一使用ECEF座標系
- 如果數據已經生成了，可以通過變換矩陣進行校正（這個比較複雜，一般不推薦）
四、性能優化建議
傾斜攝影數據通常都很大（幾個GB甚至幾十GB），加載和渲染都是性能瓶頸。以下是一些優化建議：
1. 數據層面
- 生成3D Tiles時，確保做了LOD分層
- 瓦片大小控制在2-5MB比較合適，太大會卡
- 壓縮紋理貼圖，減少傳輸量
2. 代碼層面
- 不要在短時間內頻繁切換視角，會導致大量瓦片加載
- 合理設置相機
range，不要離模型太近（太近會加載高精度瓦片，很吃性能） - 如果有多個3D Tiles數據，按需加載，不要一次性全加進來
3. 環境層面
- 建議用支持WebGL 2.0的瀏覽器
- 顯卡性能要跟得上（集成顯卡可能帶不動）
六、總結
用MapV-Three加載傾斜攝影數據，核心就是 Default3DTiles 這個組件。
基礎用法：
const tile = engine.add(new mapvthree.Default3DTiles({
url: 'tileset.json',
}));注意事項：
- 檢查數據路徑和座標系
- 合理設置初始視角（
center、range、pitch） - 關注性能，做好數據優化
基本上，只要數據準備好了，代碼就是這麼幾行的事兒。傾斜攝影聽起來高大上，但用起來其實挺簡單的。
