cesium加载
时间: 2025-05-15 17:52:04 浏览: 21
### 如何在Cesium中加载数据或资源
#### 使用 `Cartographic` 和 `boundingSphere` 定位模型
通过使用 Cesium 的 `Cartographic.fromCartesian()` 方法可以将笛卡尔坐标转换为地理坐标(经度、纬度和高度),从而实现对模型的位置调整。例如,在加载一个 Tileset 后,可以通过其边界球 (`boundingSphere`) 获取其中心位置并计算偏移量[^1]。
```javascript
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
```
---
#### 从 Ion 平台加载 3D Tiles 模型
Cesium 提供了一个名为 **Ion** 的在线平台,用于托管和分发 3D 数据集。通过调用 `Cesium.Cesium3DTileset.fromIonAssetId()` 可以轻松加载预定义的资产 ID 对应的数据集。以下是一个完整的示例代码片段:
```javascript
const tileset = viewer.scene.primitives.add(
await Cesium.Cesium3DTileset.fromIonAssetId(75343) // 替换为实际 AssetID
);
// 移动视角到目标区域
viewer.zoomTo(tileset);
```
此方法适用于快速加载公共可用的三维城市建筑或其他复杂几何结构[^2]。
---
#### 动态添加自定义模型至场景
如果希望动态响应用户的交互行为(如点击地图某处放置标记物),则需监听屏幕上的输入事件,并利用 `entities.add()` 或者直接操作 primitives 集合完成任务。下面展示了一种基于鼠标双击触发的方式创建新实体实例的方法[^3]:
```javascript
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(async function (click) {
var cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
if (!Cesium.defined(cartesian)) return;
var position = Cesium.Cartesian3.clone(cartesian);
var entity = viewer.entities.add({
name : 'Custom Model',
position : position,
model : {
uri : './path/to/model.glb', // 自己上传或者指定路径下的GLB文件地址
scale : 0.5
}
});
viewer.flyTo(entity);
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
```
注意替换 `'./path/to/model.glb'` 成真实有效的网络链接或者是本地服务器暴露出来的静态资源URL。
---
#### 处理地形深度测试冲突问题
当渲染带有地面依附效果的对象时,可能遇到由于地球表面起伏引起的遮挡现象。此时可通过启用全局选项 `depthTestAgainstTerrain=true` 来解决此类视觉误差;另外还可以考虑适当增加 groundOffset 参数值作为额外缓冲距离[^4].
```javascript
viewer.scene.globe.depthTestAgainstTerrain = true;
```
以上就是关于如何在 cesium 中加载各种形式的数据与资源的主要介绍内容啦!
阅读全文
相关推荐


















