基本概念
Entity
javascript
// 创建一个实体
const entity_1 = viewer.entities.add({
position: new Cesium.Cartesian3(0, 0, 10000000),
point: {
pixelSize: 10,
color: Cesium.Color.BLUE
}
});
javascript
// 通过经纬度创建实体
const position = Cesium.Cartesian3.fromDegrees(180.0, 0.0);
// 创建一个恒星实体
let entity_2 = viewer.entities.add({
name: 'entity_2',
position: position,
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2
}
});
javascript
// 创建PolylineVolume实体
const positions = Cesium.Cartesian3.fromDegreesArrayHeights([
0, 0, 11742000,
20, 0, 11742000,
40, 0., 11742000,
60, 0, 11742000,
80, 0., 11742000,
100, 0, 11742000,
120, 0., 11742000,
]);
const polyline = viewer.entities.add({
polyline: {
width: 4,
positions: positions, // 路径点数组
material: Cesium.Color.RED.withAlpha(0.5) // 设置半透明的红色材质
}
});
Cesium.Cartesian3代表固连在地球上的笛卡尔坐标系(大地坐标系)上的点。
大地坐标系x轴正方向为从地心指向经纬度(0,0)点方向,y轴从地心指向(90,0)方向,z轴从地心指向(0,90)方向。
Cesium提供(经度,纬度,高度)转大地坐标的方法Cesium.Cartographic.fromCartesian
,和大地坐标转经纬高坐标的方法Cesium.Cartesian3.fromDegrees
DataSource
javascript
const czml = [
{
id: "document",
name: "CZML Point",
version: "1.0",
clock: {
"interval": "2012-03-15T10:00:00Z/2012-03-15T15:00:00Z",
"currentTime": "2012-03-15T10:00:00Z",
"multiplier": 60,
"range": "LOOP_STOP",
"step": "SYSTEM_CLOCK_MULTIPLIER"
}
},
{
id: "point 1",
name: "point",
label: {
fillColor: {
rgba: [255, 255, 255, 255],
},
font: "13pt Lucida Console",
horizontalOrigin: "LEFT",
pixelOffset: {
cartesian2: [20, 0],
},
style: "FILL",
text: "referencing fillColor",
},
position: {
"interpolationAlgorithm": "LAGRANGE",
"interpolationDegree": 5,
"referenceFrame": "INERTIAL",
"epoch": "2012-03-15T10:00:00Z",
cartographicDegrees: [
0, .0, .0, 12742000,
2000, 20.0, .0, 12742000,
4000, 40.0, .0, 12742000,
6000, 60.0, .0, 12742000,
8000, 80.0, .0, 12742000,
10000, 100.0, .0, 12742000,
12000, 120.0, .0, 12742000,
14000, 140.0, .0, 12742000,
16000, 160.0, .0, 12742000,
18000, 180.0, .0, 12742000,
],
},
point: {
color: {
rgba: [255, 255, 255, 255],
},
pixelSize: 5,
},
path: {
"show": [
{
"interval": "2012-03-15T10:00:00Z/2012-03-16T10:00:00Z",
"boolean": true
}
],
"width": 1,
"material": {
"solidColor": {
"color": {
"rgba": [
255, 255, 255, 100
]
}
}
},
"resolution": 120,
leadTime: 0,
trailTime: 1e10
}
];
javascript
const dataSourcePromise = Cesium.CzmlDataSource.load(czml)
viewer.dataSources.add(dataSourcePromise)
dataSourcePromise.then(() => {
viewer.zoomTo(dataSourcePromise)
})
czml中,第一个元素为描述信息,从第二个元素开始为实体。
其中path
属性表示运动轨迹,可以通过leadTime
和trailTime
控制前后长度。
相机控制
采用以下方式控制相机绕地球自转
center
为地心向z轴偏移1个单位的点,viewer.camera.lookAt(center, offfset)
offset参数为以center为原点的局部坐标系,z轴正方向为地心到center的方向。
javascript
let distance = 50000000
let height = 10000000
let a = 0
let lastTime: number | undefined = undefined
viewer.scene.preRender.addEventListener(() => {
// 抵消地球自转
let currentTime = viewer.clock.currentTime
let days = currentTime.dayNumber + currentTime.secondsOfDay / 24 / 3600
if (lastTime != undefined) {
a += (days - lastTime) * 2 * Math.PI
}
lastTime = days
if (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
viewer.camera.lookAt(center,
new Cesium.Cartesian3(distance * Math.sin(a), distance * Math.cos(a), height))
}
})