动态圆扩散

首先创建一个js文件,填入以下内容

function EllipsoidFadeMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = (new Date()).getTime();
}

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

EllipsoidFadeMaterialProperty.prototype.getType = function(time) {
    return 'EllipsoidFade';
}

EllipsoidFadeMaterialProperty.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 = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
}

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

Cesium.EllipsoidFadeMaterialProperty = EllipsoidFadeMaterialProperty;
Cesium.Material.EllipsoidFadeType = 'EllipsoidFade';
Cesium.Material.EllipsoidFadeSource =
    "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" +
    "  float dis = distance(st, vec2(0.5, 0.5));\n" +
    "  float per = fract(time);\n" +
    "  if(dis > per * 0.5) {\n" +
    "    material.alpha = 0.0;\n" +
    "    discard;\n" +
    "  }else{\n" +
    "    material.alpha = color.a * dis / per / 1.0;\n" +
    "  }\n" +
    "  return material;\n" +
    "}";

Cesium.Material._materialCache.addMaterial(Cesium.Material.EllipsoidFadeType, {
    fabric: {
        type: Cesium.Material.EllipsoidFadeType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1),
            time: 0
        },
        source: Cesium.Material.EllipsoidFadeSource
    },
    translucent: function(material) {
        return true;
    }
});

这样就实现了扩展cesium属性——EllipsoidFadeMaterialProperty,想要实现动态扩散效果直接调用即可

viewer.entities.add({
            id: param.name,
            position: Cesium.Cartesian3.fromDegrees(
              param.lng,
              param.lat,
              param.height
            ),
            ellipse: {
              height: 32,
              semiMinorAxis: 150.0,
              semiMajorAxis: 150.0,
              material: new Cesium.EllipsoidFadeMaterialProperty(
                Cesium.Color.YELLOW,
                2000
              ), //点位扩散效果,2000为扩散速度
            },
          })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值