cesium实现正多边形动态扩散墙效果

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

1.实现效果

2.实现方法

2.1实现思路

实现正多变形动态扩散墙，首先需要根据扩散中心点和扩散半径计算多边形每个节点的坐标，通过回调函数callbackProerty实时更新多边形节点位置和高度。

2.2核心函数

这里将实时计算正多边形点坐标与高度的函数，创建entity的函数等封装成了一个包含核心功能的函数WallRegularDiffuse：

function WallRegularDiffuse(options) {
    let _viewer = options.viewer;
    // 扩散中心点
    let _center = options.center;
    // 扩散半径半径
    let _radius = options.radius || 1000.0;
    // 扩散正多变形的边数
    let _edge = options.edge || 64;
    // 扩散速度
    let _speed = options.speed || 5.0;
    // 扩散高度
    let _height = options.height || 100.0;
    // 实时高度
    let _currentHeight = _height;
    // 最小半径
    let _minRadius = options.minRadius || 10;
    // 实时半径
    let _currentRadius = _minRadius;

    if (_edge < 3) {
        return false;
    }

    /**
     * @description: 获取当前多边形的节点位置和高度
     * @param {*} _center：多边形中心
     * @param {*} _edge：多边形边数
     * @param {*} _currentRadius：当前半径
     * @param {*} _currentHeight：当前高度
     * @return {*}
     */
    function _getPositions(_center, _edge, _currentRadius, _currentHeight) {
        let positions = [];
        let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
            Cesium.Cartesian3.fromDegrees(_center[0], _center[1], 0)
        );
        for (let i = 0; i < _edge; i++) {
            let angle = (i / _edge) * Cesium.Math.TWO_PI;
            let x = Math.cos(angle);
            let y = Math.sin(angle);
            let point = new Cesium.Cartesian3(
                x * _currentRadius,
                y * _currentRadius,
                _currentHeight
            )
            positions.push(Cesium.Matrix4.multiplyByPoint(modelMatrix, point, new Cesium.Cartesian3()));
        }
        // 封闭墙，首节点点需要存两次
        positions.push(positions[0]);
        return positions;
    }

    // 添加多边形
    _viewer.entities.add({
        wall: {
            // callbackProperty回调函数，实时更新
            positions: new Cesium.CallbackProperty(() => {
                let positions = [];
                _currentRadius += _radius * _speed / 1000.0;
                _currentHeight -= _height * _speed / 1000.0;

                // 判断扩散的实际半径和高度是否超出范围
                if (_currentRadius > _radius || _currentHeight < 0) {
                    _currentRadius = _minRadius;
                    _currentHeight = _height;
                }

                positions = _getPositions(_center, _edge, _currentRadius, _currentHeight);
                return positions;
            }, false),
            // 设置材质
            material: new Cesium.WallDiffuseMaterialProperty({
                color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
            })
        }
    })
}

2.3材质文件

设置不同高度透明度不同，呈现出泛光效果，材质文件wallDiffuseMaterialProperty.js如下：

/*
 * @Description: 动态扩散墙的墙体效果（参考开源代码）（不同高度透明度不同）
 * @Version: 1.0
 * @Author: Julian
 * @Date: 2022-03-07 19:50:46
 * @LastEditors: Julian
 * @LastEditTime: 2022-03-07 19:56:30
 */
class WallDiffuseMaterialProperty {
    constructor(options) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this.color = options.color;
    };

    get isConstant() {
        return false;
    }

    get definitionChanged() {
        return this._definitionChanged;
    }

    getType(time) {
        return Cesium.Material.WallDiffuseMaterialType;
    }

    getValue(time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        }
        
        result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
        return result
    }

    equals(other) {
        return (this === other ||
            (other instanceof WallDiffuseMaterialProperty &&
                Cesium.Property.equals(this._color, other._color))
        )
    }
}

Object.defineProperties(WallDiffuseMaterialProperty.prototype, {
    color: Cesium.createPropertyDescriptor('color'),
})

Cesium.WallDiffuseMaterialProperty = WallDiffuseMaterialProperty;
Cesium.Material.WallDiffuseMaterialProperty = 'WallDiffuseMaterialProperty';
Cesium.Material.WallDiffuseMaterialType = 'WallDiffuseMaterialType';
Cesium.Material.WallDiffuseMaterialSource =
    `
    uniform vec4 color;
    czm_material czm_getMaterial(czm_materialInput materialInput){
    czm_material material = czm_getDefaultMaterial(materialInput);
    vec2 st = materialInput.st;
    material.diffuse = color.rgb * 2.0;
    material.alpha = color.a * (1.0-fract(st.t)) * 0.8;
    return material;
    }                                         
    `

Cesium.Material._materialCache.addMaterial(Cesium.Material.WallDiffuseMaterialType, {
    fabric: {
        type: Cesium.Material.WallDiffuseMaterialType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
        },
        source: Cesium.Material.WallDiffuseMaterialSource
    },
    translucent: function(material) {
        return true;
    }
})

2.4代码调用

引入材质js文件后，设置参数，调用函数即可实现效果，调用代码如下：

 // 正多边形扩散
 WallRegularDiffuse({
     viewer: this.viewer,
     center: [113.9236839, 22.528061],
     radius: 1000.0,
     edge: 5,
     height: 200.0,
     speed: 15.0,
     minRadius: 50
 });