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