Cesium 颜色渐变的墙Wall封装

参考：

https://blog.csdn.net/qq_35984445/article/details/118112693?spm=1001.2014.3001.5502

function ColorWall(options) {
    this._viewer = options.viewer || viewer;
    this._minimumHeights = options.minimumHeights;
    this._maximumHeights = options.maximumHeights;
    this._uniformMaxHeight = options.uniformMaxHeight || 100;
    this._positions = options.positions;
    this._colors = options.colors || { 1.0: 'yellow' };
    this._obj = undefined;
    this._outlineColor=options.outlineColor||undefined;
    this._outlineWidth=options.outlineWidth||1.0;
    this._create();
}


// 只读
Object.defineProperties(ColorWall.prototype, {
    obj: {
        get: function () {
            return this._obj;
        }
    }
})

// 获取颜色渐变材质
// private
ColorWall.prototype._getMaterial = function () {
    let canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = 100;
    let ctx = canvas.getContext('2d');
    let grd = ctx.createLinearGradient(0, 0, 0, 100);
    for (var key in this._colors) {
        grd.addColorStop(1 - Number(key), this._colors[key]);
    }
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 100, 100);
    return new Cesium.ImageMaterialProperty({
        transparent: true,
        image: canvas
    })
}

// 创建墙加到球上
ColorWall.prototype._create = function () {
    let heights = [];
    heights = this._positions.map(v => this._uniformMaxHeight);
    let material = this._getMaterial();
    var colorWall = this._viewer.entities.add({
        wall: {
            positions: this._positions,
            maximumHeights: heights,
            minimumHeights: this._minimumHeights,
            outlineColor:this._outlineColor,
            outline:this._outlineColor?true:false,
            outlineWidth:this._outlineWidth,
            material: material
        }
    });
    this._obj = colorWall;
    return colorWall;
}

export default ColorWall;

调用：