cesium 添加流动材质

treasurecp

已于 2023-08-11 15:10:17 修改

阅读量2.2k

点赞数 8

CC 4.0 BY-SA版权

文章标签：材质 javascript 前端

于 2023-03-20 17:56:05 首次发布

本文链接：https://blog.csdn.net/treasurecp/article/details/129672641

文章介绍了在Cesium中创建动态线材质PolylineTrailLinkMaterialProperty的方法，包括颜色、持续时间和时间更新的处理，以及如何在场景中应用该材质到折线图元上，展示了一种动态效果的线渲染技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.添加PolylineTrailLinkMaterialProperty.js 文件

// let Cesium = require('./static/Cesium/Cesium.js')

const PolylineTrailLinkMaterialProperty = (function () {
    // 动态线材质
    function PolylineTrailLinkMaterialProperty(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(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
            get: function () {
                return false;
            }
        },
        definitionChanged: {
            get: function () {
                return this._definitionChanged;
            }
        },
        color: Cesium.createPropertyDescriptor('color')
    });

    PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
        return 'PolylineTrailLink';
    }

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

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

    }

    Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
    Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
    Cesium.Material.PolylineTrailLinkImage = require("../../static/img/wind_icon1.png"); //材质图片
    Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
      czm_material material = czm_getDefaultMaterial(materialInput);\n\
      vec2 st = materialInput.st;\n\
      vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
      material.alpha = colorImage.a * color.a;\n\
      material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
      return material;\n\
  }";
    Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
        fabric: {
            type: Cesium.Material.PolylineTrailLinkType,
            uniforms: {
                color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                image: Cesium.Material.PolylineTrailLinkImage,
                time: 20
            },
            source: Cesium.Material.PolylineTrailLinkSource
        },
        translucent: function (material) {
            return true;
        }
    });
})();
export {
    PolylineTrailLinkMaterialProperty
}

2.引入js使用

 const entity = viewer.entities.add({
              polyline: {
                positions: positions, //线经纬度
                width: new Cesium.ConstantProperty(15), // 线宽
                arcType: Cesium.ArcType.GEODESIC,
                // 带箭头的线
                // material: new Cesium.PolylineArrowMaterialProperty(
                //   Cesium.Color.RED
                // ),
                material: new Cesium.PolylineTrailLinkMaterialProperty(
                  Cesium.Color.fromCssColorString("aqua"),
                  speed
                ),
                // clampToGround: true,
              },
            });