Cesium中的Entity API和Primitive API的区别(1)

关注

翻译最新推荐文章于 2026-03-25 16:47:59 发布 5.6k 阅读 AI 写同款· GEO 优化 ›

Cesium开发高级篇 | 01空间数据可视化之Primitive 在基础篇中我们讲过空间数据可视化之Entity实体类，今天我们介绍另外一个比较接近渲染引擎底层的类Primitive，虽然两者都可用于绘制同样的几何图形，但考虑到性能问题，我们更推荐您使用Primitive类实现。在使用Primitive API之前，您最好具备WebGL基础知识，如果对WebGL不是太了解，建议先学习《WebGL编程指南》这本书。 Primitive介绍 1. Primitive组成 Primitive由两部分组成：几何形状（Geometry）和外观（Appearance）。几何形状定阅读详情

提示：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');

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. <strong>//红色矩形

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. });</strong>

（9）球和椭球(Spheres Ellipsoids)

[javascript] view plain copy

print ?

1. <pre name="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');

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' );

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

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)

收录于

cesium

标签

#cesium #javascript

cesium 的 API 结构及Viewer的介绍阅读详情

Cesium中的Entity API和Primitive API的区别(1)

相关推荐