『Cesium 基础』Entity API
webgis 2020-01-02
cesium
三维
# Cesium 提供绘制 Entity 的 API 接口如下,详情参看[1][2]
//api使用如下：添加一个点
let option = {
position: Cesium.Cartesian3.fromDegrees(this.defaultPoint[0], this.defaultPoint[1]),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW,
},
};
this.viewer.entities.add(option);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 更多 entity 使用
// BillboardGraphics
billboard : {
image : '../images/Cesium_Logo_overlay.png', // default: undefined
show : true, // default
pixelOffset : new Cesium.Cartesian2(0, -50), // default: (0, 0)
eyeOffset : new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin : Cesium.HorizontalOrigin.CENTER, // default
verticalOrigin : Cesium.VerticalOrigin.BOTTOM, // default: CENTER
scale : 2.0, // default: 1.0
color : Cesium.Color.LIME, // default: WHITE
rotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0
alignedAxis : Cesium.Cartesian3.ZERO, // default
width : 100, // default: undefined
height : 25 // default: undefined
}
// BoxGraphics
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
// CorridorGraphics
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
100.0,
40.0,
105.0,
40.0,
105.0,
35.0
]),
width: 200000.0,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
// CylinderGraphics
cylinder: {
length: 400000.0,
topRadius: 200000.0,
bottomRadius: 200000.0,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.DARK_GREEN
}
// EllipseGraphics
// circle
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 300000.0,
height: 200000.0,
material: Cesium.Color.GREEN
}
// ellipse
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
// EllipsoidGraphics
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
material: Cesium.Color.BLUE
}
// LabelGraphics
label: {
id: "my label",
text: "זה טקסט בעברית \n ועכשיו יורדים שורה"
}
// ModelGraphics
model: {
uri: "/data/gltf/Spider.gltf",
minimumPixelSize: 28,
maximumScale: 200
}
// PathGraphics
// PolygonGraphics
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
}
// PolylineGraphics
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([75, 35, 125, 35]),
width: 5,
material: Cesium.Color.RED
}
// PolylineVolumeGraphics
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
85.0,
32.0,
85.0,
36.0,
89.0,
36.0
]),
shape: this.computeCircle(60000.0),
material: Cesium.Color.RED
}
// RectangleGraphics
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(80.0, 20.0, 110.0, 25.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
// WallGraphics
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
}
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
# Entity 中 Property 使用,参看[3][4]
# SampledProperty
//
//修改boxEntity 高度
var property = new Cesium.SampledProperty(Cesium.Cartesian3);
property.addSample(this.starttime, new Cesium.Cartesian3(100000.0, 100000.0, 200000.0));
property.addSample(this.stoptime, new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));
blueBox.box.dimensions = property;
//修改颜色
var colorProperty = new Cesium.SampledProperty(Cesium.Color);
colorProperty.addSample(this.starttime, new Cesium.Color(0, 1, 0));
colorProperty.addSample(this.stoptime, new Cesium.Color(0, 0, 1));
blueBox.box.material = new Cesium.ColorMaterialProperty(colorProperty);
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# SampledPositionProperty 修改位置
var property = new Cesium.SampledPositionProperty();
property.addSample(this.starttime, Cesium.Cartesian3.fromDegrees(this.defaultPoint[0], this.defaultPoint[1], 300000.0));
property.addSample(
this.stoptime,
Cesium.Cartesian3.fromDegrees(this.defaultPoint[0] + 5, this.defaultPoint[1] + 5, 300000.0)
);
blueBox.position = property;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# CompositeProperty 多属性组合
var sampledProperty = new Cesium.SampledProperty(Cesium.Cartesian3);
sampledProperty.addSample(
Cesium.JulianDate.fromIso8601('2019-03-01T00:00:00.00Z'),
new Cesium.Cartesian3(400000.0, 300000.0, 200000.0)
);
sampledProperty.addSample(
Cesium.JulianDate.fromIso8601('2019-03-02T00:00:00.00Z'),
new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
);
var ticProperty = new Cesium.TimeIntervalCollectionProperty();
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: '2019-03-02T00:00:00.00Z/2019-03-02T06:00:00.00Z',
isStartIncluded: true,
isStopIncluded: false,
data: new Cesium.Cartesian3(400000.0, 300000.0, 400000.0),
})
);
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: '2019-03-02T06:00:00.00Z/2019-03-04T12:00:00.00Z',
isStartIncluded: true,
isStopIncluded: false,
data: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
})
);
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: '2019-03-04T12:00:00.00Z/2019-03-04T18:00:00.00Z',
isStartIncluded: true,
isStopIncluded: false,
data: new Cesium.Cartesian3(400000.0, 300000.0, 600000.0),
})
);
ticProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: '2019-03-04T18:00:00.00Z/2019-03-05T23:00:00.00Z',
isStartIncluded: true,
isStopIncluded: true,
data: new Cesium.Cartesian3(400000.0, 300000.0, 700000.0),
})
);
var compositeProperty = new Cesium.CompositeProperty();
compositeProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: '2019-03-01T00:00:00.00Z/2019-03-02T00:00:00.00Z',
data: sampledProperty,
})
);
compositeProperty.intervals.addInterval(
Cesium.TimeInterval.fromIso8601({
iso8601: '2019-03-02T00:00:00.00Z/2019-03-05T00:00:00.00Z',
isStartIncluded: false,
isStopIncluded: false,
data: ticProperty,
})
);
blueBox.box.dimensions = compositeProperty;
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
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
参考资料
[1]https://cesiumjs.org/Cesium/Build/Documentation/Entity.html?classFilter=entity
[2]http://blog.sina.com.cn/s/blog_15e866bbe0102xqsx.html > [3]https://zhuanlan.zhihu.com/p/50534090 > [4]http://cesium.xin/wordpress/archives/108.html
更多内容，欢迎关注公众号
