cesium 动态墙效果 电子围栏效果

一、扩展材质

/**
        * 动态墙材质
        * @param {*} options
        * @param {String} options.color 颜色
        * @param {Number} options.duration 持续时间 毫秒
        * @param {String} options.trailImage 贴图地址
        */
        function DynamicWallMaterialProperty(options) {
            this._definitionChanged = new Cesium.Event();
            this.color = Cesium.defaultValue(options.color && new Cesium.Color.fromCssColorString(options.color), Cesium.Color.RED);
            this.duration = Cesium.defaultValue(options.duration, 1000);
            this.trailImage = options.trailImage;
            this.time = (new Date()).getTime();
        }

        /**
         * 带方向的墙体
         * @param {*} options.get:true/false
         * @param {*} options.count:数量 
         * @param {*} options.freely:vertical/standard
         * @param {*} options.direction:+/-
         */
        function _getDirectionWallShader(options) {
            if (options && options.get) {
                var materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;";
                if (options.freely == "vertical") { //（由下到上）
                    materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count + ")*st.t" + options.direction + " time)));\n\ ";
                } else { //（逆时针）
                    materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " + options.direction + " time), fract(st.t)));\n\ ";
                }
                //泛光
                materail += "vec4 fragColor;\n\
fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
fragColor = czm_gammaCorrect(fragColor);\n\
material.diffuse = colorImage.rgb;\n\
material.alpha = colorImage.a;\n\
material.emission = fragColor.rgb;\n\
return material;\n\
}";
                return materail
            }
        }

        Object.defineProperties(DynamicWallMaterialProperty.prototype, {
            isConstant: {
                get: function () {
                    return false;
                }
            },
            definitionChanged: {
                get: function () {
                    return this._definitionChanged;
                }
            },
            color: Cesium.createPropertyDescriptor('color')
        });

        DynamicWallMaterialProperty.prototype.getType = function (time) {
            return Cesium.DynamicWallMaterialProperty;
        };

        DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
            if (!Cesium.defined(result)) {
                result = {};
            }
            result.color = Cesium.Property.getValueOrClonedDefault(this.color, time, Cesium.Color.WHITE, result.color);
            result.image = this.trailImage;
            if (this.duration) {
                result.time = (((new Date()).getTime() - this.time) % this.duration) / this.duration;
            }
            viewer.scene.requestRender();
            return result;
        };

        DynamicWallMaterialProperty.prototype.equals = function (other) {
            return this === other ||
                (other instanceof DynamicWallMaterialProperty
                    && Cesium.Property.equals(this.color, other.color)
                    && Cesium.Property.equals(this.duration, other.duration)
                    && Cesium.Property.equals(this.trailImage, other.trailImage))
        };

        Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
        Cesium.Material.DynamicWallMaterialProperty = 'DynamicWallMaterial';
        Cesium.Material._materialCache.addMaterial(Cesium.DynamicWallMaterialProperty, {
            fabric: {
                type: Cesium.DynamicWallMaterialProperty,
                uniforms: {
                    color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                    image: Cesium.Material.DefaultImageId,
                    time: -20
                },
                source: _getDirectionWallShader({
                    get: true,
                    count: 1.0,
                    freely: 'vertical',
                    direction: '-'
                })
            },
            translucent: function (material) {
                return true;
            }
        });

二、调用：添加wall

viewer.entities.add({
                wall: {
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        113.382572, 38.020482,
                        113.386082, 38.020498,
                        113.388102, 38.020561
                    ]),
                    material: new Cesium.DynamicWallMaterialProperty({
                        './img.png',
                        '#f00',
                        2000
                    }),
                    maximumHeights: [10, 10, 10],
                    minimumHeights: [0, 0, 0],
                }
            })

动态波纹效果参考：cesium 添加动态波纹效果 圆形扩散效果 波纹材质-CSDN博客