CESIUM例子学习（八）——Geometry and Appearances（1）

这一节是关于在cesium地球上绘制各种要素的，包括矩形、多边形、圆、椭圆、柱体、锥体、盒子和球体。个人觉得这个内容应该放在第一节先学，因为cesium很多东西都是以绘制为基础。

一、Rectangle（矩形）

1、加载Rectangle

Rectangle就是通过传入的两个点，在地球上绘制一个矩形。本来一个矩形应该需要四个点，但函数只需要两个点，如下图API：

解释得明白，也就是传入矩形的左下角和右上角。如果传成了左上角和右下角，会得报如下错误：

正确代码如下：

function addRectangle () {
    let entity = viewer.entities.add({
        rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(108.941991, 27.917029, 109.941991, 28.917029),
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 4,
            stRotation: Cesium.Math.toRadians(45),
            material: stripeMaterial,
        },
    });
    // viewer.flyTo(entity)
}

2、outline与height

用上面的代码，得到的结果是这样的。如下图：

即矩形是帖在地表上的，此时outline也没有起作用，因为在在没有默认情况下，矩形就是帖地的，而且些时会有一个警告信息：Entity geometry outlines are unsupported on terrain. Outlines will be disabled. To enable outlines, disable geometry terrain clamping by explicitly setting height to 0。如下图：

二、Polygon（多边形）

Polygon以PolygonHierarchy类型创建，代码如下：

function addPolygon () {
    let entity = viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArray([
                    -107.0,
                    27.0,
                    -107.0,
                    22.0,
                    -102.0,
                    23.0,
                    -97.0,
                    21.0,
                    -97.0,
                    25.0,
                ])
            ),
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 4,
            material: stripeMaterial,
        },
    });
    viewer.flyTo(entity)
}

Polygon属性与Rectangle类似。

三、Ellipse（椭圆）

Ellipse是绘制圆或椭圆的，椭圆有长半轴和短半轴，长短半轴不一样就是椭圆；而圆是特殊的椭圆，它长短半轴一样长。所以cesium里，绘制圆和椭圆都是一样的代码，只是设置了不同长短半轴。代码如下：

function addEllipse () {
    let entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0),
        ellipse: {
            semiMinorAxis: 100000.0,// 长半轴
            semiMajorAxis: 200000.0,//短半轴
            // height: 100000.0,
            // extrudedHeight: 200000.0,
            rotation: Cesium.Math.toRadians(90.0),
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 4,
            material: Cesium.Color.fromRandom({ alpha: 1.0 }),
        },
    });
    viewer.flyTo(entity)
}

其它属性与Rectangle类似。

三、cylinder（圆柱与圆锥）

cesium里，cylinder可以绘制圆柱与可以绘制圆锥。  代码如下：

function addCylinder () {
    let entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0),
        cylinder: {
            length: 20000.0,柱面长度
            topRadius: 25000.0, 上柱面圆半径
            bottomRadius: 15000.0,下柱面圆半径
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 4,
            material: Cesium.Color.fromRandom({ alpha: 1.0 }),
        },
    });
    viewer.flyTo(entity)
}

绘制结果如图：

绘制圆锥只需要设置上柱面圆半径为0，或下柱面圆半径为0即可。如下图：

四、box（盒子）与Ellipsoid（球体）

box（Ellipsoid）是cesium通过指定位置和长宽高来绘制盒子（球体）的接口，其中东西为长、南北为宽。需要注意的是boxbox（Ellipsoid）的options中并没有height属性还指定盒子的离地高度，而在中心点坐标中指定。box绘制代码如下：

function addBox () {
    let p = Cesium.Cartesian3.fromDegrees(107.941991, 25.917029, 3000)
    let entity = viewer.entities.add({
        position: p,
        //加载蓝色中心点
        point: {
            color: Cesium.Color.BLUE,
            pixelSize: 8
        },
        box: {
            dimensions: new Cesium.Cartesian3(1900.0, 900.0, 300.0),//盒子的长、宽、高
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            material: Cesium.Color.RED.withAlpha(0.3),
        },
    });
    viewer.flyTo(entity)
}

绘制结果如图：

Ellipsoid绘制代码如下：

function addEllipsoid () {
    let p = Cesium.Cartesian3.fromDegrees(107.941991, 26.917029, 18000)
    let entity = viewer.entities.add({
        position: p,
        ellipsoid: {
            radii: new Cesium.Cartesian3(16700.0, 6700.0, 6700.0),//球体的长、宽、高，当长=宽=高时为正球体
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            material: Cesium.Color.fromRandom({ alpha: 0.5 }),
        },
    });
    viewer.flyTo(entity)
}

绘制结果如下图：