一、添加3D瓦片
<!-- 核心依賴引入 -->
<script src="../cesium1.99/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css"><!-- 模型數據路徑 -->
url: '../wuhan3/tileset.json'二、3D Tiles技術棧
1. 3D Tiles規范
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({...})
)- 數據分塊：LOD層級劃分的瓦片結構
- 格式特點：支持glTF、b3dm等三維格式
- 空間索引：四叉樹空間索引機制
模型加載流程：
三、核心代碼
1. 模型加載模塊
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: '../wuhan3/tileset.json' // 模型入口文件})
)技術要點：
primitives與entities的區別：Primitives用于高性能渲染，Entities用于交互式實體- 模型坐標系：自動匹配WGS84坐標系
2. 異步加載控制
tileset.readyPromise.then(function () {// 樣式設置代碼
})3. 條件著色系統
tileset.style = new Cesium.Cesium3DTileStyle({color: {conditions: [["Number(${Elevation})<20", "color('rgb(0, 0, 0)',0.0)"],["Number(${Elevation})>20", "color('rgb(74, 79, 19)',0.4)"],]}
})${Elevation}：模型自帶的元數據屬性Number()：類型轉換函數color()：顏色構造函數，參數格式為(CSS顏色, 透明度)
4. 場景定位控制
viewer.flyTo(tileset)鏡頭運動參數：
- 默認飛行時間：3秒
- 自動計算最佳視距
- 平滑的相機路徑規劃
四、模型調試技巧
1. 屬性查看方法
// 在控制臺查看模型屬性
console.log(tileset.properties);2. 樣式調試工具
// 實時更新樣式
tileset.style = new Cesium.Cesium3DTileStyle({show: '${Elevation} > 50' // 顯示過濾條件
});五、智慧地鐵項目銜接
數據對接準備
| 數據類型 | 對接方式 | 應用場景 |
| 地鐵線路規劃 | GeoJSON路徑導入 | 線路可視化 |
| 站點信息 | CZML時序數據 | 運營狀態動態展示 |
| 客流數據 | 熱力圖著色 | 擁擠度可視化 |
| 設備信息 | 自定義Billboard圖標 | 設備定位 |
完整代碼：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../cesium1.99/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css"><style>* {margin: 0;padding: 0;}#cesiumContainer {width: 100vw;height: 100vh;overflow: hidden;}</style></head><body><div id="cesiumContainer"></div>
</body><script>Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYzhiZTM4ZC0yN2NiLTQ5MjQtOWRjMS1hOGY2Y2ZhMGQ3MzAiLCJpZCI6MTE1MTg3LCJpYXQiOjE2OTIzNDczMzh9.Ealj0HH4x_WU4fG5dI2XvnBNeNNhq5rXjBFsmDgt-mg'const viewer = new Cesium.Viewer('cesiumContainer')const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: '../wuhan3/tileset.json'}))tileset.readyPromise.then(function () {// 處理模型著色tileset.style = new Cesium.Cesium3DTileStyle({color: {conditions: [["Number(${Elevation})<20", "color('rgb(0, 0, 0)',0.0)"],["Number(${Elevation})>20", "color('rgb(74, 79, 19)',0.4)"],],show: false,},});});viewer.flyTo(tileset)
</script></html>
)
