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

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