Install
-
git clone https://github.com/CesiumGS/cesium.git
[FROM: https://github.com/CesiumGS/cesium] sudo yarn add
package.json 中 workspaces后追加：
"workspaces":[...], "private":true
yarn build-docs // 创建帮助文档
yarn start // 启动项目
初始化
// 少UI初始化
var widget = new Cesium.CesiumWidget("id")
scene
Scene中有一些内置的图元对象：地球（globe）、无空盒（skyBox）、太阳（sun）、moon（月亮）等；另外还有2个用来由用户自行控制存放对象的数据 ，即primitives 和 groundPrimitives. (图元 和 贴地图元)
primitives（图元）
图元类 对应 一个三维渲染对象
图元是Cesium用来绘制三维对象的一个独立的结构。图元类有：Globe（地球）、Model（模形）、Primitive、BillboardCollection、ViewportQuad等。
Globe绘制的是全球地形，它需要2个东西：
- 地形高程信息（只能有一个）
- 影像图层（地球表皮-Appearance，其可叠加多个）
整个地形的绘制也是渐进式的，即视线看到的地方才会去调度想着的地形高程信息，找到对应位置的地形影像贴上。然而Globe只是一个图元。同此可见一个图元可以相当复杂。
注：图元没有基类，但是所有的图元都会有update函数；Primitives类不是基类，只是图元的一种，起作用是用来绘制各种几何体；3. 图元是一类对象绘制的集合，可以包含多个WebGL在drawcall.
Model
hpr
Billboard
function createModel(url, height, heading, pitch, roll) {
height = Cesium.defaultValue(height,0.0);
heading = Cesium.defaultValue(heading, 0.0);
pitch = Cesium.defaultValue(pitch,0.0);
roll = Cesium.defaultValue(roll,0.0);
var hpr = new Cesium.HeadingPitchRoll(heading,pitch,roll);
var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
scene.primitives.removeAll(); // 清除之前的model
model = scene.primitives.add(Cesium.Model.fromGltf({url, modelMatrix, minimumPixelSzie: 128});
// minimumPixedSize 最小尺寸，地球缩小时，model尺寸不会小于128像素。
model.readPromise.then(function(model) {
model.color = Cesium.Color.fromAlpha(getColor(viewModel.color), Number(viewModel......);
model.colorBlenMode = getColorBlendMode(viewModel.colorBlendMode);
model.colorBlendAmount = viewModel.colorBlendAmount;
// Play and loop animations at half-speed
});
}
Model图元的使用
- Heading( 左>右，正数值表示）
- Pitch( 下>上（抬头），正数值表示，-90代表面朝下看地球）
- Roll-以自身为轴。（）
- origin 是地球空间直角坐标系中的位置（以地球为圆心，x朝向欧洲，y朝向亚洲，z朝向北极）
Add Billboard by reference frame
scene.camera.lookAt(target, offset)
// 相机目标点的位置，一般为物体的正中心
var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere);
// 以center为中心，以什么姿态和距离去看
var hpr = new Cesium.HeadingPitchRange(heading, pitch, r*2.0);
scene.camera.lookAt(center, hpr);
注：如果不想以center为中心围绕，则使用
lookAtTransform(transform,offset)
scene.camera.lookAtTransform(transform, offset)
使用目标和变换矩阵设置摄影机的位置和方向。
camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
注：画多个批次个Model时，使用ModelInstanceCollenction
var collection = scene.primitives.add( new Cesium.ModelInstanceCollenction({url, instances}) )
UI交互面板用的knockout.js-一个脚本库
billboard
http://localhost:8080/Apps/Sandcastle/index.html?src=Billboards.html&label=All
polylines
http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FPolylines.html&label=Development
注：SimplePolyline 简版Polyline, 不带position.
GroundPolyline 贴地线. 其只能加到scene.groundPrimitives.add(new Cesium.GroundPolylinePrimitive({...})
地形加载 terrainProvider
http://localhost:8080/Apps/Sandcastle/index.html?src=Imagery%20Layers.html&label=Development
影像的加载
http://localhost:8080/Apps/Sandcastle/index.html?src=Imagery%20Cutout.html&label=Development
Primitive图元
http://localhost:8080/Apps/Sandcastle/gallery/development%2FBox.html
http://localhost:8080/Apps/Sandcastle/gallery/development%2FCircle.html
结构图解
localhost:8080/Apps/Sandcastle/gallery/development%2FPolyline.html
3DTiles
new Cesium.Cesium3DTileset(options)也是图元的一种。
Appearance&Material
-
new Cesium.PerInstanceColorAppearance(options)
具有颜色属性的GeometryInstance实例的外观。这允许使用相同的Primitive绘制多个几何体实例，每个实例都具有不同的颜色.
e.g. new Cesium.MaterialAppearance(options)
任意几何体的外观（例如，与 EllipsoidSurfaceAppearance相反），支持使用材质着色。
Camera和Scene中的其他函数的使用
http://localhost:8080/Apps/Sandcastle/index.html?src=Camera%20Tutorial.html&label=Tutorials
viewer.camera === viewer.scene.camera
lookXXX 相机的朝向
- look(axis, angle) 按angle(角度)围绕axis(轴), 旋转相机的每个方向矢量
- lookAt(target, offset)
- lookAtTransform(transform, offset)
- lookLeft(amount) / lookRight(amount) / lookUp(amount) / lookDown(amount) amount为角度
camera.lookRight(option), 参数amount为正值camera向右看， 为负值camera向左看。
camera.lookUp(option)，参数amount为正值camera向上看，为负值camera向下看。
const lookFactor = 0.05;
camera.lookRight(x * lookFactor);
camera.lookUp(y * lookFactor);
move(direction, amount) 沿direaction(方向), 按amount平移摄影机的位置
move(direction, amount)
moveBackward(amount)
moveDown(amount)
moveForward(amount) / moveLeft(amount) / moveRight(amount) / moveUp(amount) / moveDown(amount)
flyTo(options)
Viewer/Entities组合的使用
Viewer/Entities 是 Cesium推荐的组合方式。
Entities下可add的几何体有：
Cesium/Viewer核心组件：
- dataSourceDisplay管理加载dataSources数据集
cesiumWidget管理所有的三维窗口对象
其他UI组件（定制好的UI组件）
Viewer/Entities的作用：
- 方便创建真观的对象，同时做到性能优化(billboard、point等）
- 提供一些方便使用的函数：flyTo/zooTo
- 赋予Entity对象时间这个属性，对象有动态特性(Primitive没有）
- 提供一些UI组件
- 大量的快捷方式，camera等未必是好事儿。
- Datasource模式来加载大规模数据, 如: geojson.
写primitives图元创建方式相比，Entities.add方式创建几何体会更方便。Primitives类似于webGL的创建思路构建模型，而Entities简化了Primitives的复杂性，以对象的方式创建，使用上更加灵活。Entities创建的对象其内部最终还是会生成[scene.]Primitives组合和渲染。
primitives添加几何体的方式
var modelMatrix = Cesium.Matrix4.multiplyByTranslation(...);
var cylinderGeometry = new Cesium.CylinderGeometry({
length, ..., topRadius: xxx, bottomRadius: xxx, vertexFormat: xxx
})
var greenCylinder = new Cesium.GeometryInstance({
geometry: cylinderGeometry,
modelMatrix: modelMatrix,
attributes: ...
});
var redCone = new Cesium.GeometryInstance({
geometry: cylinderGeometry,
modelMatrix: ...,
attributes: ...
})
scene.primitives.add(new Cesium.Primitive({
geometryInstances: [greenCylinder, redCone],
appearance: ...
}))
// 使用 new Cesium.Viewer()创建带有时间进度条、地图搜索、显示模式切换等小组合的初始化viewer的方式
var viewer = new Cesium.Viewer("xxx");
viewer.entities集合，用于存放几何体。
viewer.entities 的类型是 new Cesium.EntityCollection(owner)
EntityCollection其下有add(entity/object)方法（返回Entity）
add(new Entity(...))也可简写add({....})
e.g.
// 蓝色盒子
var boxBlue = viewer.entities.add({
name: "box1",
box: {
dimensions: new Cesium.Cartesian3(...),
materail: Cesium.Color.BLUE
}
});
// 圆柱体
var Cylinder = viewer.entities.add({
name: "cylinder",
cylinder: {
length: 400000.0, // 圆柱体的高度
topRadius: 200000.0, bottomRadius: 200000.0, // 上下圆的半径
material: Cesium.Color.GREEE.withAlpha(0.5), // 加透明
outline: true, outlineColor: Cesium.Color.DARK_GREEN, // 轮廓线及颜色
}
});
注：圆椎体设置
toRadius: 0或bottomRadius: 0
// 绿色圆
var greenCircle = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(x,x,x),
name: "Green Circle",
ellipse: {
semiMinorAxis: 30000.0,
semiMajorAxis: 30000.0,
material: Cesium.Color.GREEN,
height: 200000.0,
outline: true, // 外轮廓线，有height此属性才生效
}
});
Datasource
dataSources加载数据后会帮我们创建entities
dataSource有多种格式，如Czml、GeoJSON、KML、自定义(entities: EntityCollection)等
Viewer.entities 等同于 Viewer.dataSourceDisplay.defaultDataSource，前者 是 后者 的简写形式。
var viewer = new Cesium.Viewer("xxx");
Sandcastle.addDefaultTOolbarButton("Default styling", function(){
// 加载几何体数据集文件(.topjson)（多个几何体对象)
viewer.dataSources.add(Cesium.GeoJsonDataSource.load("../../SampleData/xxx.topojson")
});
Cesium/Viewer核心组件
- dataSourceDisplay管理加载dataSources数据集
- cesiumWidget管理所有的三维窗口对象
- 其他UI组件（定制好的UI组件）
Viewer.flyTo & Viewer.zoomTo
- Camera.flyTo(options) - 需要指定相当的源、目标位置信息
-
Viewer.flyTo(target, options) - 需要指定对象，如：Entity对象，比Camera.flyTo(options)更方便。
property的使用 -- Cesium的Property机制总结
https://www.jianshu.com/p/e57c6a7cb5e4
Property最大的特点是和时间相互关联，在不同的时间可以动态地返回不同的属性值。而Entity则可以感知这些Property的变化，在不同的时间驱动物体进行动态展示。
Cesium宣称自己是数据驱动和time-dynamic visualization，这些可都是仰仗Property系统来实现的。
