Cesium中的实体Entity

包括Boxes、

1
2
3
4
5
6
//这两行函数针对每一个代码块的代码都需要加上才能运行成功;分别放置在首尾位置

var viewer = new Cesium.Viewer('cesiumContainer');
//viewer.entities可以替换为每个entity的名字,例如blueBox、redBox
viewer.zoomTo(viewer.entities);

Boxes

蓝色的立方体

1
2
3
4
5
6
7
8
9
10
//添加一个蓝色的立方体
var blueBox = viewer.entities.add({
name: "Blue box",
position: Cesium.Cartesian3.fromDegrees(-114.0, 35.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE,
},
});
viewer.zoomTo(blueBox);

具有黑色边框的立方体

1
2
3
4
5
6
7
8
9
10
11
12
13
//具有黑色边界的红色立方体   
var redBox = viewer.entities.add({
name: "Red box with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 35.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 3.0
},
});
viewer.zoomTo(redBox);

黄色立体边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//黄色立方体边界
var outlineOnly = viewer.entities.add({
name: "Yellow box outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 35.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
},
});
//把所有的entity显示出来
viewer.zoomTo(OutlineOnly);

Circles and Ellipses

带有边界的绿色圆

1
2
3
4
5
6
7
8
9
10
11
12
13
//Green circle at height with outline
//带有边界的绿色圆
var greenCircle = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-114.0, 30.0, 150000.0),
name: "Green circle at height with outline",
ellipse: {
semiMinorAxis: 300000.0, //半短轴
semiMajorAxis: 300000.0, //半长轴
height: 200000.0, //距离地面高度
material: Cesium.Color.GREEN, //填充材料
outline: true, // height must be set for outline to display
},
});

位于地球表面的红色椭圆

1
2
3
4
5
6
7
8
9
10
11
//Red ellipse on surface
//位于地球表面的红色椭圆
var redEllipse = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-107.0, 30.0),
name: "Red ellipse on surface",
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
material: Cesium.Color.RED.withAlpha(0.5),
},
});

蓝色柱体,旋转45°

1
2
3
4
5
6
7
8
9
10
11
12
var blueEllipse = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-100.0, 30.0, 100000.0),
name: "Blue translucent, rotated, and extruded ellipse with outline",
ellipse: {
semiMinorAxis: 150000.0,
semiMajorAxis: 300000.0,
extrudedHeight: 200000.0, //延伸高度
rotation: Cesium.Math.toRadians(45), //旋转角度
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
},
});

corridor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var redCorridor = viewer.entities.add({
name: "Red corridor on surface with rounded corners",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-90.0,
46.0,
-95.0,
46.0,
-95.0,
41.0,
]),
width: 200000.0,
material: Cesium.Color.RED.withAlpha(0.5),
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var greenCorridor = viewer.entities.add({
name: "Green corridor at height with mitered corners and outline",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-90.0,
40.0,
-95.0,
40.0,
-95.0,
35.0,
]),
height: 100000.0,
width: 200000.0,
cornerType: Cesium.CornerType.MITERED,
material: Cesium.Color.GREEN,
outline: true, // height required for outlines to display
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var blueCorridor = viewer.entities.add({
name: "Blue extruded corridor with beveled corners and outline",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-80.0,
40.0,
-85.0,
40.0,
-85.0,
35.0,
]),
height: 200000.0,
extrudedHeight: 100000.0,
width: 200000.0,
cornerType: Cesium.CornerType.BEVELED,
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true, // height or extrudedHeight must be set for outlines to display
outlineColor: Cesium.Color.WHITE,
},
});

Cylinder and Cones

1
2
3
4
5
6
7
8
9
10
11
12
var greenCylinder = viewer.entities.add({
name: "Green cylinder with black outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
cylinder: {
length: 400000.0, //高度(长度)
topRadius: 200000.0, //上半径
bottomRadius: 200000.0, //下半径
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.DARK_GREEN,
},
});
1
2
3
4
5
6
7
8
9
10
var redCone = viewer.entities.add({
name: "Red cone",
position: Cesium.Cartesian3.fromDegrees(-100.0, 46.0, 200000.0),
cylinder: {
length: 400000.0,
topRadius: 0.0,
bottomRadius: 200000.0,
material: Cesium.Color.RED,
},
});

Polygon

红色多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var redPolygon = viewer.entities.add({
name: "Red polygon on surface",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-115.0,
37.0,
-115.0,
32.0,
-107.0,
33.0,
-102.0,
31.0,
-102.0,
35.0,
]),
material: Cesium.Color.RED,
},
});

绿色延伸多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var greenPolygon = viewer.entities.add({
name: "Green extruded polygon",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-108.0,
42.0,
-100.0,
42.0,
-104.0,
40.0,
]),
extrudedHeight: 500000.0,
material: Cesium.Color.GREEN,
closeTop: true, //布尔值,指定是否包含多边形的顶部
closeBottom: true, //布尔值,指定是否包含多边形的底部
},
});

带有每个位置高度和轮廓的橙色多边形

每个点的高度不一样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var orangePolygon = viewer.entities.add({
name: "Orange polygon with per-position heights and outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-108.0,
25.0,
100000, //该点的高度
-100.0,
25.0,
100000,
-100.0,
30.0,
100000,
-108.0,
30.0,
300000,
]),
extrudedHeight: 0,
perPositionHeight: true,
material: Cesium.Color.ORANGE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});

中空的蓝色多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var bluePolygon = viewer.entities.add({
name: "Blue polygon with holes",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
-99.0,
30.0,
-85.0,
30.0,
-85.0,
40.0,
-99.0,
40.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-97.0,
31.0,
-97.0,
39.0,
-87.0,
39.0,
-87.0,
31.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-95.0,
33.0,
-89.0,
33.0,
-89.0,
37.0,
-95.0,
37.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-93.0,
34.0,
-91.0,
34.0,
-91.0,
36.0,
-93.0,
36.0,
]),
},
],
},
],
},
],
},
material: Cesium.Color.BLUE.withAlpha(0.5),
height: 0,
outline: true, // height is required for outline to display
},
});

带有每个位置高度和轮廓的青色垂直多边形

每个点的参数有三个(分别是经度、纬度、高度)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var cyanPolygon = viewer.entities.add({
name: "Cyan vertical polygon with per-position heights and outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,
41.0,
0.0,
-85.0,
41.0,
500000.0,
-80.0,
41.0,
0.0,
]),
perPositionHeight: true,
material: Cesium.Color.CYAN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});

有轮廓的菱形线的紫色多边形

outline边框线的类型是虚线,而非实线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var purplePolygonUsingRhumbLines = viewer.entities.add({
name: "Purple polygon using rhumb lines with outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-80.0,
45.0,
-80.0,
55.0,
-120.0,
55.0,
]),
extrudedHeight: 50000,
material: Cesium.Color.PURPLE,
outline: true,
outlineColor: Cesium.Color.MAGENTA,
arcType: Cesium.ArcType.RHUMB,
},
});

PolyLines

  • arcType:获取或设置ArcType属性,该属性指定线段应该是大圆弧、直角线还是线性连接的,ArcType定义连接顶点应采用的路径。

    • 有三个路径NONE、GEODESIC、RHUMB。
    • RHUMB:恒向线是始终与经线保持相同的角度;
  • clampToGround:获取或设置布尔属性,该布尔属性指定是否应将折线固定在地面上。默认为false。

  • position:位置

  • width:宽度

  • material:这个参数可以通过调用函数来丰富内容,函数的种类包括多种,可以是虚线、发光的线等等

    • 函数名的例子:PolylineGlowMaterialProperty,Glow替换掉其他的即可;

在地形上的红色线

1
2
3
4
5
6
7
8
9
var redLine = viewer.entities.add({
name: "Red line on terrain",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
},
});

绿色恒向线

1
2
3
4
5
6
7
8
9
var greenRhumbLine = viewer.entities.add({
name: "Green rhumb line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
arcType: Cesium.ArcType.RHUMB,
material: Cesium.Color.GREEN,
},
});

在表面发光的蓝线

  • PolylineGlowMaterialProperty该函数有三个参数,分别是
  • color:颜色
  • glowPower:用于指定发光强度
  • taperPower:指定渐缩效果的强度,以占总线长的百分比表示。如果为1.0或更高,则不使用锥度效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var glowingLine = viewer.entities.add({
name: "Glowing blue line on the surface",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
width: 10,
material: new Cesium.PolylineGlowMaterialProperty({
//PolylineGlowMaterialProperty该函数有三个参数,分别是
//color:颜色
//glowPower:用于指定发光强度
//taperPower:指定渐缩效果的强度,以占总线长的百分比表示。如果为1.0或更高,则不使用锥度效果。
glowPower: 0.2,
taperPower: 0.5,
color: Cesium.Color.CORNFLOWERBLUE,
}),
},
});

带有黑色轮廓的橙色线,具有一定的高度并且沿着表面

  • PolylineOutlineMaterialProperty函数有三个参数:color颜色、outlineColor轮廓颜色、outlineWidth轮廓宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var orangeOutlined = viewer.entities.add({
name:
"Orange line with black outline at height and following the surface",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
39,
250000,
-125,
39,
250000,
]),
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
//PolylineOutlineMaterialProperty函数有三个参数:color、outlineColor、outlineWidth
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
},
});

具有一定高度的紫色的直箭头

  • PolylineArrowMaterialProperty只有一个color函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var purpleArrow = viewer.entities.add({
name: "Purple straight arrow at height",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
43,
500000,
-125,
43,
500000,
]),
width: 10,
arcType: Cesium.ArcType.NONE,
material: new Cesium.PolylineArrowMaterialProperty(
//PolylineArrowMaterialProperty只有一个color函数
Cesium.Color.PURPLE
),
},
});

蓝色虚线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var dashedLine = viewer.entities.add({
name: "Blue dashed line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
45,
500000,
-125,
45,
500000,
]),
width: 4,
material: new Cesium.PolylineDashMaterialProperty({
//PolylineDashMaterialProperty函数有四个参数,分别是:
//color
//gapColor:间隙的颜色
//dashLength:虚线图案的长度(像素)
//dashPattern:指定破折号的16位模式
color: Cesium.Color.CYAN,
}),
},
});

Polyline Volumes

待定

Rectangle

红色矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
var redRectangle = viewer.entities.add({
name: "Red translucent rectangle",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
//只需要给出两点参数即可,两点为对角线的点
-110.0,
20.0,
-80.0,
25.0
),
material: Cesium.Color.RED.withAlpha(0.5),
},
});

绿色半透明,旋转,和挤压矩形具有高度和轮廓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var greenRectangle = viewer.entities.add({
name:
"Green translucent, rotated, and extruded rectangle at height with outline",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
30.0,
-100.0,
40.0
),
material: Cesium.Color.GREEN.withAlpha(0.5),
rotation: Cesium.Math.toRadians(45),
extrudedHeight: 300000.0,
height: 100000.0,
outline: true, // height must be set for outline to display
outlineColor: Cesium.Color.BLACK,
},
});
1
2
3
4
5
6
7
var rotation = Cesium.Math.toRadians(30);

function getRotationValue() {
//旋转角度每次增加0.05
rotation += 0.005;
return rotation;
}

旋转矩形

1
2
3
4
5
6
7
8
9
10
viewer.entities.add({
name: "Rotating rectangle with rotating texture coordinate",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
material: Cesium.Color.RED,
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),
classificationType: Cesium.ClassificationType.TERRAIN,
},
});

Spheres and Ellipsoids

  • 确定一个位置,然后增加一个半径
1
2
3
4
5
6
7
8
9
var blueEllipsoid = viewer.entities.add({
name: "Blue ellipsoid",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
ellipsoid: {
//半径
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
material: Cesium.Color.BLUE,
},
});
1
2
3
4
5
6
7
8
9
10
var redSphere = viewer.entities.add({
name: "Red sphere with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
1
2
3
4
5
6
7
8
9
10
11
12
var outlineOnly = viewer.entities.add({
name: "Yellow ellipsoid outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
slicePartitions: 24,
stackPartitions: 36,
},
});

Walls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var redWall = viewer.entities.add({
name: "Red wall at height",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-115.0,
44.0,
200000.0,
-90.0,
44.0,
200000.0,
]),
minimumHeights: [100000.0, 100000.0],
material: Cesium.Color.RED,
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var greenWall = viewer.entities.add({
name: "Green wall from surface with outline",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-107.0,
43.0,
100000.0,
-97.0,
43.0,
100000.0,
-97.0,
40.0,
100000.0,
-107.0,
40.0,
100000.0,
-107.0,
43.0,
100000.0,
]),
material: Cesium.Color.GREEN,
outline: true,
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var blueWall = viewer.entities.add({
name: "Blue wall with sawtooth heights and outline",
wall: {
positions: Cesium.Cartesian3.fromDegreesArray([
-115.0,
50.0,
-112.5,
50.0,
-110.0,
50.0,
-107.5,
50.0,
-105.0,
50.0,
-102.5,
50.0,
-100.0,
50.0,
-97.5,
50.0,
-95.0,
50.0,
-92.5,
50.0,
-90.0,
50.0,
]),
maximumHeights: [
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
],
minimumHeights: [
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
],
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});