Cesium之绘制图形

首先通过viewer.entities.add创建了一个entity(坐标定位在北京，根据坐标绘制了一个多边形)，然后通过zoomto确保entity在视图中。

var viewer = new Cesium.Viewer('cesiumContainer');
var beijing = viewer.entities.add({
  name: 'Beijing',
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      116.4, 39.9,
      116.38, 39.9,
      116.37, 39.92]),
    height: 0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK
  }
});
viewer.zoomTo(beijing);

运行上面的代码，效果如下：

下面代码，将多边形高度提升到了地球20万米上空。

beijing.polygon.height = 200000;

如果height为undefined,则体积从0开始，下面代码创建从20万米开始并延伸到25万米，就意味着体本身达到5万米。

beijing.polygon.height = 200000;
beijing.polygon.extrudedHeight = 250000;

除了多边形，还有下面这些形状的实体：

实体 类型
Boxes entity.box
Circles entity.ellipse
Corridor entity.corridor
Cylinder entity.cylinder
Polygons entity.polygon
Polylines entity.polyline
Polyline Volumes entity.polylineVolume
Rectangles entity.rectangle
Spheres entity.ellipsoid
Walls entity.wall

下面代码分别在北京、上海、西安绘制3钟不同的实体图形：

var viewer = new Cesium.Viewer('cesiumContainer');
//北京
var greenCylinder = viewer.entities.add({
    name : '北京',
    position: Cesium.Cartesian3.fromDegrees(115.97, 40.45, 200000.0),
    cylinder : {
        length : 400000.0,
        topRadius : 200000.0,
        bottomRadius : 200000.0,
        material : Cesium.Color.GREEN.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.DARK_GREEN
    }
});
// 上海
var redCone = viewer.entities.add({
    name : '上海',
    position: Cesium.Cartesian3.fromDegrees(121.47, 31.23, 200000.0),
    cylinder : {
        length : 400000.0,
        topRadius : 0.0,
        bottomRadius : 200000.0,
        material : Cesium.Color.RED
    }
});
//西安
var redBox = viewer.entities.add({
    name : '西安',
    position: Cesium.Cartesian3.fromDegrees(108.93, 34.343, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});
viewer.zoomTo(viewer.entities);

效果如下图：