cesium从入门到精通
时间: 2025-02-08 16:00:48 浏览: 48
### Cesium 入门到精通教程
#### 了解 Cesium 的基本概念
Cesium 是一款用于创建三维地球和地图的开源 JavaScript 库。它能够处理全球地理空间数据并提供交互式的可视化效果。
#### 安装与配置 Cesium
为了开始使用 Cesium,在项目中安装依赖项是必要的操作之一。通过 Yarn 或者 npm 可以轻松完成这一过程[^1]:
```bash
yarn add cesium
```
接着,需将 `cesium` 目录下的 `Build/Cesium` 文件夹中的四个子文件夹复制至项目的 `public` 路径下,并把 `widgets` 复制到 `src` 下面以便后续调用组件样式表。
在 Vue 组件内部初始化 Cesium 和加载默认样式同样重要:
```javascript
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
export default {
setup() {
onMounted(() => {
// 初始化 viewer 实例...
});
return {};
}
}
```
#### 创建 Viewer 查看器实例
Viewer 对象作为应用程序的核心部分负责管理场景、相机和其他资源。下面是一个简单的例子来展示如何构建一个基础的地图查看器[^2]:
```javascript
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: new Cesium.CesiumTerrainProvider({
url : 'https://assets.agi.com/stk-terrain/world'
})
});
```
这段代码会渲染出带有地形支持的基础世界地图视图。
#### 添加实体对象 (Entities)
利用 Entities API 用户可以向场景内添加各种类型的几何图形或模型。这里给出了一段关于怎样加入一个名为 “Airplane” 的3D 模型的具体实现方式[^3]:
```javascript
const airplane = viewer.entities.add({
name: "Airplane",
position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1500),
model: {
uri: "./model/Air.glb",
minimumPixelSize: 128,
silhouetteSize: 5,
silhouetteColor: Cesium.Color.WHITE,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
},
});
// 执行刷新命令使更改生效
viewer.trackedEntity = airplane;
```
此片段展示了如何指定位置参数以及应用一些视觉属性给导入的对象。
---
阅读全文
相关推荐



















