Entity API使用.docx

Entity API使用.docx

《Entity API使用.docx》由会员分享，可在线阅读，更多相关《Entity API使用.docx（27页珍藏版）》请在冰豆网上搜索。

EntityAPI使用

提示：

Cesium中提供两类API：

（1）面向图形开发人员的底层API，通常称为“PrimitiveAPI”。

该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识；

（2）高级别的数据驱动的API，称为“EntityAPI”。

该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象，其底层使用PrimitiveAPI；

EntityAPI简介

Cesium提供EntityAPI来绘制空间数据，例如点、标记、标签、线、3D模型、形状、立体形状（volume）。

下面是EntityAPI的简单例子，用红色半透明区域标记出美国怀俄明州：

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）;//缩放、平移视图使实体可见   

形状与立体（ShapesandVolumes）

支持的形状与立体列表

（1） 立方体（Boxes）：

[javascript] viewplain 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] viewplain 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] viewplain 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）圆柱和圆锥（CylinderCones）

[javascript] viewplain 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] viewplain 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.