快速上手
在 github 或 gitee 上下载 cesium 源码
npm i
npm run build
后在 Source 下可以看到 Cesium.js 文件,此时 npm start
后起个本地服务,浏览器打开就可以看到 cesium。
Sandcastle (built version) 是官方例子
如果需要获取文档npm run generateDocumentation
cesium 核心解构
cesiumWidget
clock
ccontainer
canvas
screenSpaceEventHandler
sccene(场景*)
globe
primitives
groundPrimitives
环境对象
skyBox
skyAtmosphere
sum
sumBloom
moon
backgroundColor
-地球
-太空盒
-太阳
-月亮
-自定义
-自定义贴地
启动项目
加载地形
设置视角
Cesium 所有设置视角都是在 Cesium.Camera 类里
F12控制台可以快速获取当前位置角度
viewer.camera.heading | pitch | position
viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 150),
destination: new Cesium.Cartesian3(1333291.6306206975, -4660639.789958816, 4139655.987529932),
orientation: {
heading: 0.6024435512104862, // 0 正北
pitch: -0.9321030084365565, // 俯视角度
roll: 0.0 //
}
})
model = scene.primitives.add(
Cesium.Model.fromGltf({
url: url, // 模型文件
modelMatrix: modelMatrix, // 模型位置大小旋转角等配置
minimumPixelSize: 128, // 模型最小固定像素
})
);
Cesium
cesiumWidget
- DOM 容器
- canvas 区域
- screenSpaceEventHandler cesium 针对鼠标键盘事件的封装,类似 addEventListner
- clock
- scene
每个三维对象都是通过这个
scene
- 全局地球 globel
- 环境对象
1. skyBox 天空
2. sun 太阳
3. moon 月亮
- primitives 普通 3D 对象
cesium 渲染所有东西都是一起渲染的,没有先后区分。这样绘制越少性能越好
1. Model (glTF 渲染)
2. Primitive
1. Geometry 抽象的几何体
2. Appearance 材质
3. Billboards 电子标牌(图片) 始终面向屏幕
Labels 3D 文字 会模糊
Points 点位
4. ViewportQuad -> 类似 DIV 的 canvas(不常用)
- groundPrimitives 贴地