cesium绘制动态墙体

//wall.js
if (typeof Cesium !== 'undefined') (function(Cesium) {
  /**
   * 自定义材质线Property 适用于entity和primitive材质
   * @param {*} options
   * @returns
   */
  function CustomWallMaterial(options) {

    // 创建自定义动态材质对象
    /**
     * @description 自定义动态材质对象，方向是wall的由下到上
     * @param options
     */
    function BottomToTopMaterialProperty(options) {

      // 定义内置属性
      this._definitionChanged = new Cesium.Event();
      this._color = undefined;
      this._colorSubscription = undefined;
      this.color = options.color;
      this.duration = options.duration;
      this._time = performance.now();
    }

    // 定义自己新建材质对象默认属性，为原型添加对象
    Object.defineProperties(BottomToTopMaterialProperty.prototype, {

      // isConstant：用来判断该属性是否会随时间变化，是一个bool类型。
      // Cesium会通过这个变量来决定是否需要在场景更新的每一帧中都获取该属性的数值，
      // 从而来更新三维场景中的物体。
      // 如果isConstant为true，则只会获取一次数值，除非definitionChanged事件被触发。
      isConstant: {
        get: function() {
          return false;
        },
      },

      // 是一个事件，可以通过该事件，来监听该Property自身所发生的变化，比如数值发生修改。
      definitionChanged: {
        get: function() {
          return this._definitionChanged;
        },
      },
      color: Cesium.createPropertyDescriptor('color'),
    });

    // 材质对象需要有type函数 value函数 equals函数
    BottomToTopMaterialProperty.prototype.getType = function() {
      return 'BottomToTop';
    };

    // getValue：用来获取某个时间点的特定属性值，
    // 包括两个参数：type和result，分别是用于传递时间点和存储属性值
    BottomToTopMaterialProperty.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.BottomToTopImage;
      result.time =
        ((performance.now() - this._time) % this.duration) / this.duration;
      return result;
    };
    BottomToTopMaterialProperty.prototype.equals = function(other) {
      return this === other ||
        (other instanceof BottomToTopMaterialProperty &&
          Cesium.Property.equals(this._color, other._color));
    };

    // Cesium.PolylineTrailLinkMaterialProperty = BottomToTopMaterialProperty;
    Cesium.Material.BottomToTopType = 'BottomToTop';
    Cesium.Material.BottomToTopImage = options.image;

    // 动态材质shader着色器语言，可以控制方向。
    // 由上到下 fract(-st.t-time）
    // 由下到上 fract(st.t-time)
    // 顺时针
    Cesium.Material.BottomToTopSource = `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.t - time), st.t));\n\
                                            vec4 fragColor;\n\
                                            fragColor.rgb = color.rgb / 1.0;\n\
                                            fragColor = czm_gammaCorrect(fragColor);\n\
                                            material.alpha = colorImage.a * color.a;\n\
                                            material.diffuse = color.rgb;\n\
                                            material.emission = fragColor.rgb;\n\
                                            return material;\n\
                                         }`;
    // 将定义的材质对象添加到cesium的材质队列中
    Cesium.Material._materialCache.addMaterial(Cesium.Material.BottomToTopType,
      {
        fabric: {
          type: Cesium.Material.BottomToTopType, // 就是类型名字
          uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
            image: Cesium.Material.BottomToTopImage,
            time: 200,
          },
          source: Cesium.Material.BottomToTopSource,
        },
        translucent: function(material) {
          return true;
        },
      });
    return new BottomToTopMaterialProperty(options);
  }

  Cesium.CustomWallMaterial = CustomWallMaterial;
})(Cesium);

//js
import './cesium-materialLine';

addWall(names, color, lists ) {
    let colors = new Cesium.Color.fromCssColorString(color);
    let getCustomMaterialLine = (color, duration) => {
      return new Cesium.CustomWallMaterial({
        image: require('./glow.png'),
        color: color,
        duration: duration,
      });
    };

    let length = lists.length;
    // 设定墙的最大高度，最小高度
    const maxArr = new Array(length / 2).fill(10);
    const minArr = new Array(length / 2).fill(-10);

    // 渲染
    let wallMap = new Cesium.CustomDataSource(names);
    cViewer.dataSources.add(wallMap);

    wallMap.entities.add({
      name: names,
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArray(lists),
        maximumHeights: maxArr,
        minimumHeights: minArr,
        material: getCustomMaterialLine(colors, 6000),
      },
    });
  },

//页面调用  逆时针排序
//list:[lon1,lat1,lon2,lat2... ... lon1,lat1]

this.addWall('door',"rgba(245, 231, 79, 0.46)",list)

glow.png