Cesium如何绘制光墙

光墙效果

可见下图里黄田社区的闪烁光墙效果

如何实现

绘制闪烁光墙createAoiByCesium代码如下：

	function createAoiByCesium (option) {
        var color = option.color ? option.color : Cesium.Color.RED
        var maxHeight = option.maxHeight ? option.maxHeight : 10
        var minHeight = option.minHeight ? option.minHeight : 0
        var maxHeightArray = []
        var minHeightArray = []

        var c = document.createElement('canvas')
        c.width = 20
        c.height = 20
        var ctx = c.getContext('2d')

        var grd = ctx.createLinearGradient(0, 20, 0, 0)
        grd.addColorStop(0, 'rgba(' + color.red * 255 + ',' + color.green * 255 + ',' + color.blue * 255 + ',1)')
        grd.addColorStop(1, 'rgba(' + color.red * 255 + ',' + color.green * 255 + ',' + color.blue * 255 + ',0)')

        ctx.fillStyle = grd
        ctx.fillRect(0, 0, 20, 20)

        var config = null
        if (option.hasHeight) {
            var positions = []
            option.positions.forEach((x, index) => {
                if (index % 3 == 2) {
                    minHeightArray.push(x)
                    maxHeightArray.push(x + (isNaN(option.wallHeight) ? 0 : option.wallHeight))
                } else {
                    positions.push(x)
                }
            })
            config = {
                wall: {
                    show: option.show == false ? false : true,
                    positions: Cesium.Cartesian3.fromDegreesArray(positions),
                    material: new Cesium.ImageMaterialProperty({
                        image: c,
                    }),
                },
            }
        } else {
            for (var i = 0; i < option.positions.length / 2; i++) {
                minHeightArray.push(minHeight)
                maxHeightArray.push(maxHeight)
            }
            config = {
                wall: {
                    show: option.show == false ? false : true,
                    positions: Cesium.Cartesian3.fromDegreesArray(option.positions),
                    material: new Cesium.ImageMaterialProperty({
                        image: c,
                    }),
                },
            }
        }
        config.wall.maximumHeights = maxHeightArray
        config.wall.minimumHeights = minHeightArray
        var entity = _cesium.entities.add(config)

        entity.wall.material.color = new Cesium.CallbackProperty(function(time, x) {
            var alp = 0.5 * Math.abs(Math.sin(new Date().getTime() / 500)) + 0.1
            return color.withAlpha(alp)
        }, false)
        return entity
    }

调用createAoiByCesium

	data.forEach(bound => {
        var entity = createAoiByCesium({
            color: new Cesium.Color(27/255, 230/255, 248/255, 0.5),
            show: true,
            positions: flattenDeep(bound), // 格式需要为一维数组[114.112, 22.223, 40, 114.113, 22.224, 40]
            wallHeight: 150,
            hasHeight: true,
        })
        entity.tag = 'areaDsLines'
        if (!window.shiningWalls) {
            window.shiningWalls = []
        }
        window.shiningWalls.push(entity)
    })

data的数据格式如下所示：

[
	[114.112, 22.223, 40],
	[114.113, 22.224, 40],
	[114.114, 22.225, 40]
	...
]