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

来源:互联网 发布:在淘宝开店充值赚钱吗 编辑:程序博客网 时间:2024/05/16 11:41

提示: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,该属性可以控制填充的材质类型

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

高度与拉伸(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)