Cesium扩散墙

前言

学习与共享！
这是个笨方法，新建一个wall，然后不断更新其位置。（菜鸟一枚，虽然努力把 “WebGL Progamming Guide”中大部分的代码敲了一遍，但是再回头看Cesium的着色器，怎么说呢，不能说是毫不相干，但真的就是两个东西，实在是做不到啊，所以只能采用笨方法了，期待大佬带飞，感谢！）

示例展示

不会上传视频，上个图片，就是一个扩张的围墙~~~

代码

全部代码

export const addExpandCylinder = (viewer: any) => {
    const centerPoint = [113.925, 22.525];
    let sigDeep = 0.0;
    let wall: any = null;
    let positions: any = [
        centerPoint[0] - sigDeep, centerPoint[1] - sigDeep,
        centerPoint[0] + sigDeep, centerPoint[1] - sigDeep,
        centerPoint[0] + sigDeep, centerPoint[1] + sigDeep,
        centerPoint[0] - sigDeep, centerPoint[1] + sigDeep,
        centerPoint[0] - sigDeep, centerPoint[1] - sigDeep,
    ];

    setInterval(() => {
        updatePosition();
    }, 100);

    function updatePosition() {

        sigDeep = sigDeep > 0.07 ? 0.0 : sigDeep + 0.0005;
        if (!Cesium.defined(wall)) {
            wall = new WallPrimitive(positions);
        } else {
            positions[0] = centerPoint[0] - sigDeep;
            positions[1] = centerPoint[1] - sigDeep;
            positions[2] = centerPoint[0] + sigDeep;
            positions[3] = centerPoint[1] - sigDeep;
            positions[4] = centerPoint[0] + sigDeep;
            positions[5] = centerPoint[1] + sigDeep;
            positions[6] = centerPoint[0] - sigDeep;
            positions[7] = centerPoint[1] + sigDeep;
            positions[8] = centerPoint[0] - sigDeep;
            positions[9] = centerPoint[1] - sigDeep;
        }
    }

    const WallPrimitive: any = (function () {
        function _(this: any, positions: any) {
            const tmpId = moment().format('YYYY_MM_DD_HH_mm_ss_') + moment().get('milliseconds');
            this.options = {
                id: "expand_wall" + tmpId,
                name: '这是个墙',
                wall: {
                    positions: [],
                    minimumHeights: [10.0, 10.0, 10.0, 10.0, 10.0],
                    maximumHeights: [1000.0, 1000.0, 1000.0, 1000.0, 1000.0],
                    material: new Cesium.ImageMaterialProperty({
                        image: "./Models/image/wall.png",
                        transparent: true
                    })
                }
            };
            this.positions = positions;
            this._init();
        }

        _.prototype._init = function () {
            var _self = this;
            var _update = function () {
                return _self.positions ? Cesium.Cartesian3.fromDegreesArray(_self.positions) : undefined;
            };
            // 更新positions
            this.options.wall.positions = new Cesium.CallbackProperty(_update, false);
            viewer.entities.add(this.options);
        };

        return _;
    })();
}

整个流程

1. 初始化各种变量
2. 设置一个定时函数，每隔一段时间，更新wall位置

结束

这个是从中心点计算 四边形的各个点，然后不断更新这些点的位置，假如是五边形、六边形、圆呢？就需要额外的计算了~~~