cesium Draw fence

There is no charge for online materials , Or the code is incomplete , A lot of cases related to the drawing of walls need to be put in place or done , I added my own Baidu change according to the online method , Finally, an effect is achieved , It is similar to what I want to achieve , Share for a while .

Final effect

Anyway, the final effect of this blog post is the effect of the above moving picture , If the effect you want to achieve is not like this, don't look , A waste of time .

establish dynamicWallMaterialProperty.js file

First you need a dynamicWallMaterialProperty.js file , And then in cesium Introduce for a while .

dynamicWallMaterialProperty.js The contents of the file are as follows , In theory, just copy the past directly .

(function () {
    
  /*  Dynamic wall material  color  Color  duration  The duration of the   millisecond  trailImage  Map address  */
  function DynamicWallMaterialProperty(options) {
    
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = options.color || Color.BLUE;
    this.duration = options.duration || 1000;
    this.trailImage = options.trailImage;
    this._time = (new Date()).getTime();
  }

  /** *  Wall with direction  * @param {*} options.get:true/false * @param {*} options.count: Number  * @param {*} options.freely:vertical/standard * @param {*} options.direction:+/- */
  function _getDirectionWallShader(options) {
    
    if (options && options.get) {
    
      var materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\ {\n\ czm_material material = czm_getDefaultMaterial(materialInput);\n\ vec2 st = materialInput.st;";
      if (options.freely == "vertical") {
     //（ From bottom to top ）
        materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count + ")*st.t" + options.direction + " time)));\n\ ";
      } else {
     //（ Anti-clockwise ）
        materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " + options.direction + " time), fract(st.t)));\n\ ";
      }
      // Floodlight 
      materail += "vec4 fragColor;\n\ fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\ fragColor = czm_gammaCorrect(fragColor);\n\ material.diffuse = colorImage.rgb;\n\ material.alpha = colorImage.a;\n\ material.emission = fragColor.rgb;\n\ return material;\n\ }";
      return materail
    }
  }

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

  var MaterialType = 'wallType' + parseInt(Math.random() * 1000);
  DynamicWallMaterialProperty.prototype.getType = function (time) {
    
    return MaterialType;
  };

  DynamicWallMaterialProperty.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 = this.trailImage;
    if (this.duration) {
    
      result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    }
    viewer.scene.requestRender();
    return result;
  };

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

  Cesium.Material._materialCache.addMaterial(MaterialType, {
    
    fabric: {
    
      type: MaterialType,
      uniforms: {
    
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        image: Cesium.Material.DefaultImageId,
        time: -20
      },
      source: _getDirectionWallShader({
    
        get: true,
        count: 3.0,
        freely: 'vertical',
        direction: '-'
      })
    },
    translucent: function (material) {
    
      return true;
    }
  });
  Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
})();

What about the code above , Namely dynamicWallMaterialProperty.js The whole content of the document , And then , Introduce in the file .

  <script type="text/javascript" src="./dynamicWallMaterialProperty.js"></script>

And then , You can write logic code ！

function dataProces() {
    
    let data = [
      [
        116.398322, 39.929032
      ],
      [
        116.408096, 39.929364
      ],
      [
        116.408599, 39.919736
      ],
      [
        116.398609, 39.919404
      ], [
        116.398322, 39.929032
      ],
    ]
    let coor = Array.prototype.concat.apply(
      [],
      data
    );
    let datasouce = map_common_addDatasouce('wall');
    datasouce.entities.add({
    
      wall: {
    
        positions: Cesium.Cartesian3.fromDegreesArray(coor),
        positions: Cesium.Cartesian3.fromDegreesArray(coor),
        maximumHeights: new Array(data.length).fill(300),
        minimunHeights: new Array(data.length).fill(0),
        material: new Cesium.ImageMaterialProperty({
    
          transparent: true,// Set transparency 
          image: "./img/wjw.png",
          repeat: new Cesium.Cartesian2(1.0, 1),
          // color: Cesium.Color.RED,
        }),
        // material: new Cesium.DynamicWallMaterialProperty({ trailImage: './img/wjw.png', color: Cesium.Color.RED, duration: 1000 })
      },
    });
  }

Then call the above method ！！

But the above code uses a method , Namely map_common_addDatasouce , Many cases on the Internet have used this method , But what? , This method doesn't say what it is , Then I can't find it when I call it , But fortunately, I found this method .

  function map_common_addDatasouce(datasouceName) {
    
    let datasouce = viewer.dataSources._dataSources.find(t => {
    
      return t && t.name == datasouceName;
    });
    if (!datasouce) {
    
      datasouce = new Cesium.CustomDataSource(datasouceName);
      viewer.dataSources.add(datasouce);
    }
    return datasouce;
  }

Okay , This is the overall situation , complete ！！！