一、添加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>
)
