0
点赞
收藏
分享

微信扫一扫

Cesium圆形波纹效果

IT影子 2021-09-21 阅读 65

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


1.调用方法

<!DOCTYPE html>

    <meta charset="UTF-8">

    <title>圆形波纹

    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>

    <script type="text/javascript" src="./js/include-cesium.js">

    <script type="text/javascript" src="./js/extra/overlay/CircleWaveMaterialProperty.js">

<div id="cesiumContainer">

    let initCesium =new InitCesium();

    let viewer = initCesium.initViewer('cesiumContainer', {

});

    let img_arcgis=new Cesium.ArcGisMapServerImageryProvider({

name:"img_arcgis",

        url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"

    });

    let layers= viewer.scene.imageryLayers;

    layers.addImageryProvider(img_arcgis);

    const data = {

id:"111",

        lon:117.286419,

        lat:31.864436,

        height:0,

    };

  viewer.scene.camera.setView({

destination: Cesium.Cartesian3.fromDegrees(117.286419,31.864436, 500.0),

  })

addCircleWave(data);

    function addCircleWave(data) {

viewer.entities.add({

id: data.id,

            name:"",

            position: Cesium.Cartesian3.fromDegrees(

data.lon,

                data.lat,

                data.height

            ),

            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

                })

}

});

    }

</html>

2.扩展类

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 ||

(otherinstanceof 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;

举报

相关推荐

0 条评论