提示:Cesium中提供两类API:
(1)面向图形开发人员的底层API,通常称为“Primitive API”。该API暴露最小限度的抽象,使用图形学术语,具有很大的灵活性,需要具有图形学编程的知识;
(2)高级别的数据驱动的API,称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象,其底层使用Primitive API;
Entity API简介
Cesium提供Entity API来绘制空间数据,例如点、标记、标签、线、3D模型、形状、立体形状(volume)。下面是Entity API的简单例子,用红色半透明区域标记出美国怀俄明州:
1. var viewer = new Cesium.Viewer('cesiumContainer'); //创建一个查看器(Viewer widget)
2. var wyoming = viewer.entities.add({ //添加一个实体,仅需要传递一个简单JSON对象,返回值是一个Entity对象
3. name : 'Wyoming',
4. polygon : {
5. hierarchy : Cesium.Cartesian3.fromDegreesArray([//一组地理坐标
6. -109.080842,45.002073,
7. -105.91517,45.002073,
8. -104.058488,44.996596,
9. -104.053011,43.002989,
10. -104.053011,41.003906,
11. -105.728954,40.998429,
12. -107.919731,41.003906,
13. -109.04798,40.998429,
14. -111.047063,40.998429,
15. -111.047063,42.000709,
16. -111.047063,44.476286,
17. -111.05254,45.002073]),
18. material : Cesium.Color.RED.withAlpha(0.5), //材质
19. outline : true, //是否显示轮廓
20. outlineColor : Cesium.Color.BLACK //轮廓的颜色
21. }
22.});
23. viewer.zoomTo(wyoming);//缩放、平移视图使实体可见
形状与立体(Shapes and Volumes)
支持的形状与立体列表
(1) 立方体(Boxes):
[javascript] view plain copy
print?
1. var blueBox = viewer.entities.add({
2. name : 'Blue box',
3. //中心的位置
4. position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
5. box : {
6. //长宽高
7. dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
8. material : Cesium.Color.BLUE
9. }
10.});
11.
12.var redBox = viewer.entities.add({
13. name : 'Red box with black outline',
14. position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
15. box : {
16. dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
17. material : Cesium.Color.RED,
18. outline : true, //显示轮廓
19. outlineColor : Cesium.Color.BLACK
20. }
21. });
22.
23. var outlineOnly = viewer.entities.add({
24. name : 'Yellow box outline',
25. position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
26. box : {
27. dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
28. fill : false, //不显示填充
29. outline : true,
30. outlineColor : Cesium.Color.YELLOW
31. }
32.});
(2)圆和椭圆(Circles Ellipses)
[javascript] view plain copy
print?
1. var viewer = new Cesium.Viewer('cesiumContainer');
2. //浮空的绿色圆形
3. var greenCircle = viewer.entities.add({
4. position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
5. name : 'Green circle at height',
6. ellipse : {
7. semiMinorAxis : 300000.0,
8. semiMajorAxis : 300000.0,
9. height: 200000.0, //浮空
10. material : Cesium.Color.GREEN
11. }
12.});
13. //红色椭圆形,位于地表,带轮廓
14.var redEllipse = viewer.entities.add({
15. //不带高度
16. position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
17. name : 'Red ellipse on surface with outline',
18. ellipse : {
19. semiMinorAxis : 250000.0,
20. semiMajorAxis : 400000.0,
21. material : Cesium.Color.RED.withAlpha(0.5),
22. outline : true,
23. outlineColor : Cesium.Color.RED
24. }
25. });
26.//蓝色椭圆柱,旋转了角度
27. var blueEllipse = viewer.entities.add({
28. position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
29. name : 'Blue translucent, rotated, and extruded ellipse',
30. ellipse : {
31. semiMinorAxis : 150000.0,
32. semiMajorAxis : 300000.0,
33. extrudedHeight : 200000.0, //拉伸
34. rotation : Cesium.Math.toRadians(45), //旋转
35. material : Cesium.Color.BLUE.withAlpha(0.7),
36. outline : true
37. }
38.});
39.
40.viewer.zoomTo(viewer.entities);
(3)走廊(Corridor)
[javascript] view plain copy
print?
1. var redCorridor = viewer.entities.add({
2. name : 'Red corridor on surface with rounded corners and outline',
3. corridor : {
4. positions : Cesium.Cartesian3.fromDegreesArray([
5. -100.0, 40.0,
6. -105.0, 40.0,
7. -105.0, 35.0
8. ]),
9. width : 200000.0,
10. material : Cesium.Color.RED.withAlpha(0.5),
11. outline : true,
12. outlineColor : Cesium.Color.RED
13. }
14.});
15.
16.var greenCorridor = viewer.entities.add({
17. name : 'Green corridor at height with mitered corners',
18. corridor : {
19. positions : Cesium.Cartesian3.fromDegreesArray(
20. [ -90.0, 40.0,
21. -95.0, 40.0,
22. -95.0, 35.0
23. ]),
24. height: 100000.0,
25. width : 200000.0,
26. cornerType: Cesium.CornerType.MITERED,
27. material : Cesium.Color.GREEN
28. }
29. });
30.
31. var blueCorridor = viewer.entities.add({
32. name : 'Blue extruded corridor with beveled corners and outline',
33. corridor : {
34. positions : Cesium.Cartesian3.fromDegreesArray(
35. [ 80.0, 40.0,
36. -85.0, 40.0,
37. -85.0, 35.0
38. ]),
39. height : 200000.0,
40. extrudedHeight : 100000.0,
41. width : 200000.0,
42. cornerType: Cesium.CornerType.BEVELED,
43. material : Cesium.Color.BLUE.withAlpha(0.5),
44. outline : true,
45. outlineColor : Cesium.Color.BLUE
46. }
47. });
(4)圆柱和圆锥(Cylinder Cones)
[javascript] view plain copy
print?
1. var greenCylinder = viewer.entities.add({
2. name : 'Green cylinder with black outline',
3. position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
4. cylinder : { //圆柱
5. length : 400000.0,
6. topRadius : 200000.0,
7. bottomRadius : 200000.0,
8. material : Cesium.Color.GREEN,
9. outline : true,
10. outlineColor : Cesium.Color.DARK_GREEN
11. }
12.});
13.
14.var redCone = viewer.entities.add({
15. name : 'Red cone',
16. position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
17. cylinder : {//圆锥
18. length : 400000.0,
19. topRadius : 0.0,
20. bottomRadius : 200000.0,
21. material : Cesium.Color.RED
22. }
23. });
(5) 多边形(Polygons)
[javascript] view plain copy
print?
1. var redPolygon = viewer.entities.add({
2. name : '贴着地表的多边形',
3. polygon : {
4. hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
5. -115.0, 32.0,
6. -107.0, 33.0,
7. -102.0, 31.0,
8. -102.0, 35.0]),
9. material : Cesium.Color.RED
10. }
11. });
12.
13. var greenPolygon = viewer.entities.add({
14. name : '绿色拉伸多边形',
15. polygon : {
16. hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
17. -100.0, 42.0,
18. -104.0, 40.0]),
19. extrudedHeight: 500000.0,
20. material : Cesium.Color.GREEN
21. }
22.});
23.
24.var orangePolygon = viewer.entities.add({
25. name : '每个顶点具有不同拉伸高度的橘色多边形',
26. polygon : {
27. hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights(
28. [-108.0, 25.0, 100000,
29. -100.0, 25.0, 100000,
30. -100.0, 30.0, 100000,
31. -108.0, 30.0, 300000]),
32. extrudedHeight: 0,
33. perPositionHeight : true,
34. material : Cesium.Color.ORANGE,
35. outline : true,
36. outlineColor : Cesium.Color.BLACK
37. }
38.});
39.
40.var bluePolygon = viewer.entities.add({
41. name : '具有挖空效果的蓝色多边形',
42. polygon : {
43. hierarchy : {
44. positions : Cesium.Cartesian3.fromDegreesArray(
45. [-99.0, 30.0,
46. -85.0, 30.0,
47. -85.0, 40.0,
48. -99.0, 40.0]),
49. holes : [{
50. positions : Cesium.Cartesian3.fromDegreesArray([
51. -97.0, 31.0,
52. -97.0, 39.0,
53. -87.0, 39.0,
54. -87.0, 31.0
55. ]),
56. holes : [{
57. positions : Cesium.Cartesian3.fromDegreesArray([
58. -95.0, 33.0,
59. -89.0, 33.0,
60. -89.0, 37.0,
61. -95.0, 37.0
62. ]),
63. holes : [{
64. positions : Cesium.Cartesian3.fromDegreesArray([
65. -93.0, 34.0,
66. -91.0, 34.0,
67. -91.0, 36.0,
68. -93.0, 36.0
69. ])
70. }]
71. }]
72. }]
73. },
74. material : Cesium.Color.BLUE,
75. outline : true,
76. outlineColor : Cesium.Color.BLACK
77. }
78.});
(6)多段线(Polylines)
[javascript] view plain copy
print?
1. var redLine = viewer.entities.add({
2. name : '沿着地球表面的红线',
3. polyline : {
4. positions : Cesium.Cartesian3.fromDegreesArray(
5. [-75, 35,
6. -125, 35]),
7. width : 5,
8. material : Cesium.Color.RED
9. }
10.});
11.
12.var glowingLine = viewer.entities.add({
13. name : '具有发光效果的线',
14. polyline : {
15. positions : Cesium.Cartesian3.fromDegreesArray(
16. [-75, 37, -125, 37]
17. ),
18. width : 10,
19. material : new Cesium.PolylineGlowMaterialProperty({
20. glowPower : 0.2,
21. color : Cesium.Color.BLUE
22. })
23. }
24.});
25.
26.var orangeOutlined = viewer.entities.add({
27. name : '具有一定高度的线',
28. polyline : {
29. positions : Cesium.Cartesian3.fromDegreesArrayHeights(
30. [-75, 39, 250000,-125, 39, 250000]
31. ),
32. width : 5,
33. material : new Cesium.PolylineOutlineMaterialProperty({
34. color : Cesium.Color.ORANGE,
35. outlineWidth : 2,
36. outlineColor : Cesium.Color.BLACK
37. })
38. }
39. });
40.
41. var yellowLine = viewer.entities.add({
42. name : '不贴着地表的线',
43. polyline : {
44. positions : Cesium.Cartesian3.fromDegreesArrayHeights(
45. [-75, 43, 500000,-125, 43, 500000]
46. ),
47. width : 3,
48. followSurface : false, //是否贴着地表
49. material : Cesium.Color.PURPLE
50. }
51. });
(7)多段线体(Polyline Volumes)
[javascript] view plain copy
print?
1. var viewer = new Cesium.Viewer('cesiumContainer');
2.
3. function computeCircle(radius) {
4. var positions = [];
5. for (var i = 0; i < 360; i++) {
6. var radians = Cesium.Math.toRadians(i);
7. positions.push(new Cesium.Cartesian2(
8. radius * Math.cos(radians), radius * Math.sin(radians)));
9. }
10. return positions;
11. }
12.
13. function computeStar(arms, rOuter, rInner) {
14. var angle = Math.PI / arms;
15. var length = 2 * arms;
16. var positions = new Array(length);
17. for (var i = 0; i < length; i++) {
18. var r = (i % 2) === 0 ? rOuter : rInner;
19. positions[i] = new Cesium.Cartesian2(
20. Math.cos(i * angle) * r, Math.sin(i * angle) * r);
21. }
22. return positions;
23. }
24.
25. var redTube = viewer.entities.add({
26. name : 'Red tube with rounded corners',
27. polylineVolume : {
28. positions : Cesium.Cartesian3.fromDegreesArray(
29. [-85.0, 32.0,
30. -85.0, 36.0,
31. -89.0, 36.0]),
32. shape : computeCircle(60000.0),
33. material : Cesium.Color.RED
34. }
35. });
36.
37. var greenBox = viewer.entities.add({
38. name : 'Green box with beveled corners and outline',
39. polylineVolume : {
40. positions : Cesium.Cartesian3.fromDegreesArrayHeights(
41. [-90.0, 32.0, 0.0,
42. -90.0, 36.0, 100000.0,
43. -94.0, 36.0, 0.0]),
44. shape :[new Cesium.Cartesian2(-50000, -50000),
45. new Cesium.Cartesian2(50000, -50000),
46. new Cesium.Cartesian2(50000, 50000),
47. new Cesium.Cartesian2(-50000, 50000)],
48. cornerType : Cesium.CornerType.BEVELED,
49. material : Cesium.Color.GREEN,
50. outline : true,
51. outlineColor : Cesium.Color.BLACK
52. }
53. });
54.
55. var blueStar = viewer.entities.add({
56. name : 'Blue star with mitered corners and outline',
57. polylineVolume : {
58. positions : Cesium.Cartesian3.fromDegreesArrayHeights(
59. [-95.0, 32.0, 0.0,
60. -95.0, 36.0, 100000.0,
61. -99.0, 36.0, 200000.0]),
62. shape : computeStar(7, 70000, 50000),
63. cornerType : Cesium.CornerType.MITERED,
64. material : Cesium.Color.BLUE,
65. outline : true,
66. outlineColor : Cesium.Color.BLACK
67. }
68.});
69.
70.viewer.zoomTo(viewer.entities);
(8)矩形(Rectangles)
[javascript] view plain copy
print?
1. //红色矩形
2. var redRectangle = viewer.entities.add({
3. name : 'Red translucent rectangle with outline',
4. rectangle : {
5. coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
6. material : Cesium.Color.RED.withAlpha(0.5),
7. outline : true,
8. outlineColor : Cesium.Color.RED
9. }
10.});
11. //绿色旋转、拉伸的矩形
12.var greenRectangle = viewer.entities.add({
13. name : 'Green translucent, rotated, and extruded rectangle',
14. rectangle : {
15. coordinates : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
16. material : Cesium.Color.GREEN.withAlpha(0.5),
17. rotation : Cesium.Math.toRadians(45),
18. extrudedHeight : 300000.0,
19. height : 100000.0,
20. outline : true,
21. outlineColor : Cesium.Color.GREEN
22. }
23. });
(9)球和椭球(Spheres Ellipsoids)
[javascript] view plain copy
print?
1. "code"
class="javascript">var blueEllipsoid = viewer.entities.add({
2. name : 'Blue ellipsoid',
3. position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
4. ellipsoid : {
5. //可以指定三个轴的半径
6. radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
7. material : Cesium.Color.BLUE
8. }
9. });
10.
11. var redSphere = viewer.entities.add({
12. name : 'Red sphere with black outline',
13. position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
14. ellipsoid : {
15. //正球体
16. radii : new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
17. material : Cesium.Color.RED,
18. outline : true,
19. outlineColor : Cesium.Color.BLACK
20. }
21. });
22.
23. var outlineOnly = viewer.entities.add({
24. name : 'Yellow ellipsoid outline',
25. position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
26. ellipsoid : {
27. radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
28. fill : false,
29. outline : true,
30. outlineColor : Cesium.Color.YELLOW,
31. slicePartitions : 24, //横向切割线
32. stackPartitions : 36 //纵向切割线
33. }
34.});
(10) 墙(Walls)
[javascript] view plain copy
print?
1. //东西方向的横墙
2. var redWall = viewer.entities.add({
3. name : 'Red wall at height',
4. wall : {
5. positions : Cesium.Cartesian3.fromDegreesArrayHeights(
6. [-115.0, 44.0, 200000.0,//坐标点
7. -90.0, 44.0, 200000.0]
8. ),
9. minimumHeights : [100000.0, 100000.0], //按坐标点的最小高度数组
10. material : Cesium.Color.RED
11. }
12.});
13. //四边围墙
14.var greenWall = viewer.entities.add({
15. name : 'Green wall from surface with outline',
16. wall : {
17. positions : Cesium.Cartesian3.fromDegreesArrayHeights(
18. [-107.0, 43.0, 100000.0,
19. -97.0, 43.0, 100000.0,
20. -97.0, 40.0, 100000.0,
21. -107.0, 40.0, 100000.0,
22. -107.0, 43.0, 100000.0]),
23. material : Cesium.Color.GREEN,
24. outline : true,
25. outlineColor : Cesium.Color.BLACK
26. }
27. });
28.//曲折的墙
29. var blueWall = viewer.entities.add({
30. name : 'Blue wall with sawtooth heights and outline',
31. wall : {
32. //坐标点,不指定高度
33. positions : Cesium.Cartesian3.fromDegreesArray(
34. [-115.0, 50.0,
35. -112.5, 50.0,
36. -110.0, 50.0,
37. -107.5, 50.0,
38. -105.0, 50.0,
39. -102.5, 50.0,
40. -100.0, 50.0,
41. -97.5, 50.0,
42. -95.0, 50.0,
43. -92.5, 50.0,
44. -90.0, 50.0]),
45. maximumHeights : [ //上高
46. 100000, 200000, 100000, 200000, 100000, 200000,
47. 100000, 200000, 100000, 200000, 100000],
48. minimumHeights : [ //下高
49. 0, 100000, 0, 100000, 0, 100000, 0, 100000, 0,
50. 100000, 0],
51. material : Cesium.Color.BLUE,
52. outline : true,
53. outlineColor : Cesium.Color.BLACK
54. }
55. });
材质(Material)与轮廓(Outline)
多数形状均支持通过一致的方式来设置属性、控制外观:
1. (1)fill:布尔型,用于指定目标形状是否被填充
2. (2)outline:布尔型,用于指定是否绘制形状的边缘
3. (3)material:如果fill为true,该属性可以控制填充的材质类型
一个例外是多段线,可以设置outlineWidth、outlineColor、glowPower等属性。
高度与拉伸(Extrusion)
所有的形状均默认均是沿着地表的,目前圆形、椭圆、矩形可以在一定高度浮空显示,或者拉伸为Volume。
需要注意:Cesium总是使用米、弧度、秒为度量单位。下面是一个例子:
1. wyoming.polygon.height = 200000; //设置高度
2. wyoming.polygon.extrudedHeight = 250000; //设置拉伸高度
在Viewer中可用的Entity特性
除非显式禁用,点击实体后会显示SelectionIndicator小器件,以及一个信息框。通过设置Entity.description,可以在信息框中显示任何HTML内容。
镜头控制
zoomTo方法可以立即定位到某个位置,而flyTo则是通过动画方式转移到某个位置,这两个方法均可以传递EntityCollection对象,并且均是异步方法,返回一个Promises对象
默认情况下,镜头是朝北、45度倾斜查看地球。下面的代码可以让镜头朝东、倾斜三十度查看:
1. //镜头顺时针旋转九十度,即东向
2. var heading = Cesium.Math.toRadians(90);
3. //镜头倾斜30度俯视
4. var pitch = Cesium.Math.toRadians(-30);
5. viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch)).then(function(result){
6. //执行完毕后,进行的动作
7. if (result) { //如果镜头切换成功,则result=true
8. viewer.selectedEntity = wyoming;
9. }
10.});
有时需要镜头跟踪某个实体(使居中)而不是地球,可以使用如下代码:
1. wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
2. viewer.trackedEntity = wyoming; //跟踪某个实体。如果调用zoomTo、flyTo自动取消跟踪
管理Entity
EntityCollection对象是一个从Entity Id到Entity的关联数组,其提供例如add、remove、removeAll之类的常规函数,用于添加或者删除某个Entity:
1. //添加一个实体,并且提供ID
2. viewer.entities.add({
3. id : '182bdba4-2b3e-47ae-bf0b-83f6fde285fd'
4. });
5. //获取一个实体
6. var entity = viewer.entities.getById('uniqueId')
7. //获取一个实体,如果不存在则创建之
8. var entity = viewer.entities.getOrCreateEntity('uniqueId');
9.
10.//当添加、删除、修改EntityCollection中的Entity时,可以获得事件通知
11. function onChanged(collection, added, removed, changed){
12. //add、removed、changed是增删改的Entity数组
13. for(var i = 0; i < added.length; i++) {
14.
15. }
16.}
17. viewer.entities.collectionChanged.addEventListener(onChanged);
18.
19. //大批量操作时,临时禁用事件可以提高性能
20.viewer.entities.suspendEvents();
21. //执行各种Entity操作
22.viewer.entities.resumeEvents();
点、图标和标签
添加一个点、标签或者图标很简单:
1. var viewer = new Cesium.Viewer( 'cesiumContainer' );
2.
3. var citizensBankPark = viewer.entities.add( {
4. name : 'Citizens Bank Park',
5. position : Cesium.Cartesian3.fromDegrees( -75.166493, 39.9060534 ),
6. point : { //点
7. pixelSize : 5,
8. color : Cesium.Color.RED,
9. outlineColor : Cesium.Color.WHITE,
10. outlineWidth : 2
11. },
12. label : { //文字标签
13. text : 'Citizens Bank Park',
14. font : '14pt monospace',
15. style : Cesium.LabelStyle.FILL_AND_OUTLINE,
16. outlineWidth : 2,
17. verticalOrigin : Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
18. pixelOffset : new Cesium.Cartesian2( 0, -9 ) //偏移量
19. }
20. billboard : { //图标
21. image : 'http://localhost:81/images/2015/02-02/Philadelphia_Phillies.png',
22. width : 64,
23. height : 64
24. },
25. } );
26.
27. viewer.zoomTo( viewer.entities );
3D模型
Cesium支持glTF格式的3D模型,glTF是WebGL、 OpenGL ES、 OpenGL的一种运行时模型格式,在Cesium中创建3D模型很简单:
[javascript] view plain copy
print?
1. var viewer = new Cesium.Viewer('cesiumContainer');
2. var entity = viewer.entities.add({
3. position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
4. model : {
5. uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
6. },
7. scale : 1,//和原始大小相比的缩放比例
8. minimumPixelSize :100 //最小尺寸,防止太小而看不见
9. });
10.viewer.trackedEntity = entity;
默认情况下,模型竖直放置、并且面向东面。可以指定四元组(Quaternion)给Entity.orientation属性,以改变放置的方向:
1. var viewer = new Cesium.Viewer('cesiumContainer');
2. var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706); //位置
3. var heading = Cesium.Math.toRadians(45.0);//绕垂直于地心的轴旋转
4. var pitch = Cesium.Math.toRadians(15.0); //绕纬度线旋转
5. var roll = Cesium.Math.toRadians(0.0); //绕经度线旋转
6. var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
7.
8. var entity = viewer.entities.add({
9. position : position,
10. orientation : orientation,
11. model : {
12. uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
13. }
14.});
15. viewer.trackedEntity = entity;
例子中的heading(yaw)、pitch、roll对应了绕Z(垂直轴)、Y(维度方向)、X(经度方向)进行旋转,正数表示顺时针旋转(由于相对运动,在浏览器上看起来是地球在逆时针旋转),可以参考下图理解(人面向北面,摇头heading、点头pitch、歪头roll):
属性系统
Cesium提供了一些快捷方式来设置属性,例如outline:true,但是尝试使用e.polygon.outline这样的形式来获取轮廓时,会得到一个ConstantProperty对象,如果不使用快捷方式,则需要编写更多的代码,例如:
1. polygon.outline = new Cesium.ConstantProperty(true);
2. polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
所有属性的实例均是Property的子类型,引入属性类层次而不是使用基本类型的原因是,某些属性是随着时间而变化的。
要得到属性的原始值,需要调用Property.getValue()方法,例如:
1. //获取当前时间点,多边形轮廓是否存在
2. polygon.outline.getValue(viewer.clock.currentTime)