三维GIS开发cesium智慧地铁教程（6）添加模型
一、项目初始化引导
1. 创建基础场景
- 在HTML中创建
<font style="color:rgb(38, 38, 38);"><div id="cesiumContainer"></font>容器 - 引入Cesium库文件（注意路径正确性）
const viewer = new Cesium.Viewer('cesiumContainer')
2. 安全认证配置
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYzhiZTM4ZC0yN2NiLTQ5MjQtOWRjMS1hOGY2Y2ZhMGQ3MzAiLCJpZCI6MTE1MTg3LCJpYXQiOjE2OTIzNDczMzh9.Ealj0HH4x_WU4fG5dI2XvnBNeNNhq5rXjBFsmDgt-mg'
二、模型加载
1. 空间坐标转换
const position = Cesium.Cartesian3.fromDegrees(114, 30, 300);
- 理解WGS84坐标系的组成：
- 经度114°（武汉大致经度）
- 纬度30°（武汉大致纬度）
- 高度300米（模型海拔）
- 坐标转换数学原理：
其中N为基准椭球体的曲率半径
2. 模型姿态控制
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0)
);
3. 实体创建与参数配置
const entity = viewer.entities.add({position,orientation,model: {uri: './Cesium_Air.glb',minimumPixelSize: 20}
});
深度配置指南：
| 参数 | 作用 | 推荐值 | 注意事项 |
|---|---|---|---|
| uri | 模型路径 | 相对路径 | 需确认文件实际存在 |
| minimumPixelSize | 最小渲染尺寸 | 20-100px | 影响性能 |
| maximumScale | 最大缩放比例 | 2.0 | 防止模型过大 |
| show | 显示开关 | true | 动态控制显示 |
三、场景控制
1. 镜头飞行控制
viewer.zoomTo(entity);
四、智慧城市
- 动态路径规划：
// 创建模型移动路径
const path = new Cesium.SampledPositionProperty();
// 添加路径关键点...
entity.position = path;- 数据驱动可视化：
// 根据数据动态更新模型
function updateModel(status) {entity.model.color = status === 'alert' ? Cesium.Color.RED : Cesium.Color.GREEN;
}
- 交互事件处理：
viewer.screenSpaceEventHandler.setInputAction(function(movement) {const picked = viewer.scene.pick(movement.endPosition);if (picked && picked.id === entity) {// 显示信息框...}},Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
完整代码：
<!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 position = Cesium.Cartesian3.fromDegrees(114, 30, 300)const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0))const entity = viewer.entities.add({position,orientation,model: {uri: './Cesium_Air.glb',minimumPixelSize: 20 //模型最小像素尺寸}})viewer.zoomTo(entity)</script></html>
