Cesium快速上手-学习

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")

cesium-widget.png

scene

Scene中有一些内置的图元对象：地球（globe）、无空盒（skyBox）、太阳（sun）、moon（月亮）等；另外还有2个用来由用户自行控制存放对象的数据 ，即primitives 和 groundPrimitives. (图元 和 贴地图元)

---

primitives（图元）

primitives.png

图元类 对应 一个三维渲染对象

图元是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

image.png

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-一个脚本库

UI交互面板

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=Terrain.html&label=Development

http://localhost:8080/Apps/Sandcastle/index.html?src=Imagery%20Layers.html&label=Development

影像的加载

http://localhost:8080/Apps/Sandcastle/index.html?src=Cartographic%20Limit%20Rectangle.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相反），支持使用材质着色。

e.g.

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的作用：

1. 方便创建真观的对象，同时做到性能优化(billboard、point等）
2. 提供一些方便使用的函数：flyTo/zooTo
3. 赋予Entity对象时间这个属性，对象有动态特性(Primitive没有）
4. 提供一些UI组件
5. 大量的快捷方式，camera等未必是好事儿。
6. 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组件）

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系统来实现的。

image.png

image.png