美文网首页开源
Cesium圆形波纹效果

Cesium圆形波纹效果

作者: happy_port | 来源:发表于2019-09-25 09:40 被阅读0次

    因gif截图问题,动画效果看起来不够流畅。

    cesium圆形波纹效果.gif

    1. 扩展实现类CircleWaveMaterialProperty

    import Cesium from "cesium/Cesium";

    export class CircleWaveMaterialProperty {

        constructor(options) {

            options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);

            this._definitionChanged = new Cesium.Event();

            this._color = undefined;

            this._colorSubscription = undefined;

            this.color = options.color;

            this.duration = Cesium.defaultValue(options.duration, 1e3);

            this.count = Cesium.defaultValue(options.count, 2);

            if (this.count <= 0) this.count = 1;

            this.gradient = Cesium.defaultValue(options.gradient, 0.1);

            if (this.gradient < 0) this.gradient = 0;

            else if (this.gradient > 1) this.gradient = 1;

            this._time = performance.now();

        }

    }

    Cesium.defineProperties(CircleWaveMaterialProperty.prototype, {

        isConstant: {

            get: function() {

                return false;

            }

        },

        definitionChanged: {

            get: function() {

                return this._definitionChanged;

            }

        },

        color: Cesium.createPropertyDescriptor('color')

    });

    CircleWaveMaterialProperty.prototype.getType = function(time) {

        return Cesium.Material.CircleWaveMaterialType;

    }

    CircleWaveMaterialProperty.prototype.getValue = function(time, result) {

        if (!Cesium.defined(result)) {

            result = {};

        }

        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);

        result.time = (performance.now() - this._time) / this.duration;

        result.count = this.count;

        result.gradient = 1 + 10 * (1 - this.gradient);

        return result;

    }

    CircleWaveMaterialProperty.prototype.equals = function(other) {

        return this === other ||

            (other instanceof CircleWaveMaterialProperty &&

                Cesium.Property.equals(this._color, other._color))

    }

    Cesium.Material.CircleWaveMaterialType = 'CircleWaveMaterial';

    Cesium.Material.PolylineTrailSource = `czm_material czm_getMaterial(czm_materialInput materialInput)\n

                                            {\n

                                                czm_material material = czm_getDefaultMaterial(materialInput);\n

                                                material.diffuse = 1.5 * color.rgb;\n

                                                vec2 st = materialInput.st;\n

                                                vec3 str = materialInput.str;\n

                                                float dis = distance(st, vec2(0.5, 0.5));\n

                                                float per = fract(time);\n

                                                if (abs(str.z) > 0.001) {\n

                                                    discard;\n

                                                }\n

                                                if (dis > 0.5) { \n

                                                    discard; \n

                                                } else { \n

                                                    float perDis = 0.5 / count;\n

                                                    float disNum; \n                       

                                                    float bl = .0; \n                       

                                                    for (int i = 0; i <= 999; i++) { \n                           

                                                        if (float(i) <= count) { \n                               

                                                          disNum = perDis *

    float(i) - dis + per / count; \n                             

                                                            if (disNum > 0.0) { \n                                 

                                                                if (disNum < perDis) { \n                                     

                                                                    bl = 1.0 - disNum / perDis;\n

                                                                }\n                                 

                                                              else if

    (disNum - perDis < perDis) { \n                                       

                                                                        bl = 1.0 - abs(1.0 - disNum / perDis); \n

                                                                } \n                                 

                                                                material.alpha = pow(bl, gradient); \n

                                                            } \n

                                                        } \n

                                                    } \n

                                                } \n

                                            return material; \n

                                        } \n`;

    Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleWaveMaterialType, {

        fabric: {

            type: Cesium.Material.CircleWaveMaterialType,

            uniforms: {

                color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),

                time: 1,

                count: 1,

                gradient: 0.1

            },

            source: Cesium.Material.PolylineTrailSource

        },

        translucent: function(material) {

            return !0;

        }

    });

    Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;

    2.调用方法

    viewer.entities.add({

            name: "",

            position: Cesium.Cartesian3.fromDegrees(117.286419,31.864436, 0 ),

            ellipse: {

              height: 0,

              semiMinorAxis: 500,

              semiMajorAxis: 500,

              material: new Cesium.CircleWaveMaterialProperty({

                duration: 2e3,

                gradient: 0,

                color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),

                count: 3

              })

            }

          });

    相关文章

      网友评论

        本文标题:Cesium圆形波纹效果

        本文链接:https://www.haomeiwen.com/subject/vesiuctx.html