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

xiaoxiao2021-02-28  18

提示: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.  <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.      1fill:布尔型,用于指定目标形状是否被填充

2.      2outline:布尔型,用于指定是否绘制形状的边缘

3.      3material:如果filltrue,该属性可以控制填充的材质类型

一个例外是多段线,可以设置outlineWidth outlineColorglowPower 等属性。

高度与拉伸(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;  //跟踪某个实体。如果调用zoomToflyTo自动取消跟踪  

管理Entity

EntityCollection对象是一个从Entity IdEntity的关联数组,其提供例如addremoveremoveAll之类的常规函数,用于添加或者删除某个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.     //addremovedchanged是增删改的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模型,glTFWebGL 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;  

例子中的headingyaw)、pitchroll对应了绕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)  

转载请注明原文地址: https://www.6miu.com/read-850232.html

最新回复(0)