接下来将教你如何使用Cesium的API来绘制空间数据，如点，标记，标签，线条，模型，形状和立体形状。我们一起来学习Cesium,用Cesium实现空间数据的绘制。

 

1. 多边形的绘制

　　提供多边形点的经纬度信息，就可以绘制一个多边形，如下案例，绘制一个多边形，基本包围中国的台湾省。实现代码如下：

 1 var viewer = new Cesium.Viewer('cesiumContainer',{
 2 　　animation:false,
 3 　　timeline:false
 4 });
 5 var wyoming = viewer.entities.add({
 6 　　name : 'Wyoming',
 7 　　polygon : {
 8 　　　　hierarchy : Cesium.Cartesian3.fromDegreesArray([
 9 　　　　　　120.73902,21.91655,
10 　　　　　　120.63902,22.26264,
11 　　　　　　120.49839,22.40327,
12 　　　　　　120.25230,22.54389,
13 　　　　　　120.00620,23.07124,
14 　　　　　　120.30105,24.02046,
15 　　　　　　121.02573,25.03999,
16 　　　　　　121.55308,25.32124,
17 　　　　　　122.00464,25.03999,
18 　　　　　　121.41245,23.21186,
19 　　　　　　121.27183,22.96577,
20 　　　　　　121.09605,22.82514,
21 　　　　　　120.98511,22.50874,
22 　　　　　　120.84995,21.91655]),
23 　　　　material : Cesium.Color.RED.withAlpha(0.5),
24 　　　　outline : true,
25 　　　　outlineColor : Cesium.Color.BLACK
26 　　}
27 });
28 
29 viewer.zoomTo(wyoming);

实现效果如下图所示：

 

2. 点和标记的添加

    我们在上一个案例的基础上添加标记和点，如在台湾的区域中心加一个红色的点，用黄色的字来标注“Taiwan belongs to China”，实现代码如下：

 1 var citizensBankPark = viewer.entities.add({
 2       name : 'Taiwan belongs to China',
 3       position : Cesium.Cartesian3.fromDegrees(120.86753, 23.75679),
 4       point : {
 5         pixelSize : 5,
 6         color : Cesium.Color.RED,
 7         outlineColor : Cesium.Color.WHITE,
 8         outlineWidth : 2
 9       },
10       label : {
11         text : 'Taiwan belongs to China',
12         font : '14pt monospace',
13         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
14         outlineWidth : 2,
15         outlineColor: Cesium.Color.YELLOW,
16         verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
17         pixelOffset : new Cesium.Cartesian2(0, -9)
18       }
19     });

    最后将改“viewer.zoomTo(wyoming);”为“viewer.zoomTo(viewer.entities);”

实现效果如下图所示：

 

3. 图片的添加

    接下来我们实现图片的添加，将中国的国旗插在南海区域的代码实现如下。

 1 var citizensBankPark = viewer.entities.add({
 2       position : Cesium.Cartesian3.fromDegrees(111.64781, 16.46626),
 3       billboard : {
 4           image : 'http://localhost:8080/example/flag.png',
 5           width : 32,
 6           height : 32
 7       },
 8       label : {
 9         text : '祖国万岁',
10         font : '14pt monospace',
11         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
12         outlineWidth : 2,
13         verticalOrigin : Cesium.VerticalOrigin.TOP,
14         pixelOffset : new Cesium.Cartesian2(0, 32)
15       }
16     });

实现效果如下图所示：