当前位置：首页 > news >正文

三维GIS开发cesium智慧地铁教程（4）城市白模加载与样式控制

news 来源：原创 2025/6/7 11:03:41

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