cesium实现加载面状文件（PolygonGeometry）绘制墙体（WallGeometry）

Cesium实战系列文章总目录： 传送门

加载面状的geojson文件，实现墙体（WallGeometry）的绘制。

1.实现效果

2.实现方法

首先看一下官方文档关于PolygonGeometry和WallGeometry的构成解释。

2.1 PolygonGeometry

PolygonGeometry使用PolygonHierarchy属性保存点位数据。
positions指面状外边界的坐标数组；holes只面状内部“洞”数据。

2.2 WallGeometry

**positions:**也是指底部点数组。但还包含墙体的最大最小高度数据，该数据与底部点数组是一一对应的。

2.3将面转换为墙显示

只需要将面的底部点数组传给墙体，并设置墙体的最大最小高度数据即可。
这里使用primitives方式加载数据，具体代码如下：

// 使用primitive方式加载geojson
let urlPath = './data/park/parks.geojson';
// 使用jQuery异步加载json数据
$.get(urlPath, function(data) {
    const features = data.features;
    addDataToGlobe(features);
})

function addDataToGlobe(features) {
    const instances = [];
    for (let i = 0; i < features.length; i++) {
        for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
            const polygonArray = features[i].geometry.coordinates[j].toString().split(',');
            const geometry = new Cesium.WallGeometry({
                positions: Cesium.Cartesian3.fromDegreesArray(polygonArray),
                // 设置高度
                maximumHeights: new Array(polygonArray.length).fill(50),
                minimunHeights: new Array(polygonArray.length).fill(0),
            })
            instances.push(new Cesium.GeometryInstance({
                geometry: geometry,
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN),
                },
            }));
        }
    }
    // 合并单个geometry,提高渲染效率
    const primitive = new Cesium.Primitive({
        geometryInstances: instances,
        // PerInstanceColorAppearance：使用每个实例自定义的颜色着色
        appearance: new Cesium.PerInstanceColorAppearance(),
    });
    this.viewer.scene.primitives.add(primitive);
}