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

一、wall(墙)

cesium里提供了绘制墙的方法，也就是垂直于地表的一个面。绘制原理是沿着一条线，利用线上各点的最大高度和最小高度来绘制垂直于地表的面。默认情况下，最小高度是0，代码如下：

function addWall () {
    let entity = viewer.entities.add({
        wall: {
            指定墙顶上一系列的点
            positions: Cesium.Cartesian3.fromDegreesArray([
                106.941991, 25.917029,
                107.941991, 26.917029,
                108.941991, 27.917029,
            ]),
            maximumHeights: [500000, 600000, 500000],指定墙顶上一系列点的高度，也就是墙对应点上的高度。
            minimumHeights: [0, 300000, 0],指定墙下一系列点的高度，也就是墙下对应点离地的高度。不指定则帖地。
            outline: true,
            outlineColor: Cesium.Color.LIGHTGRAY,
            outlineWidth: 4,
            material: Cesium.Color.fromRandom({ alpha: 0.7 }),
        },
    });
    viewer.flyTo(entity)
}

绘制结果如下图：

代码中需要注意的是如果没有在positions中指定墙顶点的高度，也没有在maximumHeights中指定，则无法绘制出墙的效果。

二、corridor（廊）

cesium的corridor类似于GIS里的线状缓冲区。AP如下图：

其中不需要注意的是，height与extrudedHeight这两个属性。height：是廊相对于椭球体表面的距离；extrudedHeight是廊的挤出面（上表面）相对于椭球体表面的距离，此时，廊相当于有厚度的墙，而廊的高度=abs(height-extrudedHeight)。也就是当extrudedHeight大于height时，extrudedHeight是廊的挤出面（上表面），下表面高度是height。如下图：

当extrudedHeight小于height时，extrudedHeight是廊的下表面，height是上表面高度。如下图：

当extrudedHeight等于height或不设置extrudedHeight时，绘制的是以height为高度的面。如下图：

代码如下：

function addCorridor () {
    let positions = Cesium.Cartesian3.fromDegreesArray([
        108.941991, 27.917029,
        109.441991, 28.617029,
        109.641991, 28.317029,
        // 109.941991, 27.417029
    ])
    let entity = viewer.entities.add({
        polyline: {
            positions: positions,
            material: Cesium.Color.RED,
            width: 4,
            clampToGround: true,
        },
        corridor: {
            positions: positions,
            width: 500,
            height: 3000,
            extrudedHeight: 40,
            material: Cesium.Color.fromRandom({ alpha: 0.7 }),
        },
    });
    viewer.flyTo(entity)
}

三、PolylineVolume（管体）

PolylineVolume是cesium提供了绘制各种形状管体的接口，管体的横截面由属性参数shape接收。代码如下：

function addPolylineVolume () {
    positions = [];
    for (i = 0; i < 5; ++i) {
        positions.push(Cesium.Cartesian3.fromDegrees(108.941991 + i, 27.917029));
    }
    let entity = viewer.entities.add({
        polylineVolume: {
            positions: Cesium.Cartesian3.fromDegreesArray([
                -104.0,
                13.0,
                -107.0,
                18.0,
                -112.0,
                18.0,
            ]),
            shape: computeCircle(40000.0),
            material: Cesium.Color.WHITE,
        },
    });
    viewer.flyTo(entity)
    function computeCircle (radius) {
        var positions = [];
        for (var i = 0; i < 360; i++) {
            var radians = Cesium.Math.toRadians(i);
            positions.push(
                new Cesium.Cartesian2(
                    radius * Math.cos(radians),
                    radius * Math.sin(radians)
                )
            );
        }
        return positions;
    }
}

绘制结果如下图：

可以看到在管道的转变处，绘制自动作了平滑。这样利用PolylineVolume可以做一些简单的数据量小的管道绘制。对复杂的，数据量大的，还是做成模型瓦片。