Cesium绘制动态立体墙效果

  • Post author:
  • Post category:其他


drawWell(){
   
        // 动态墙材质
        function DynamicWallMaterialProperty(options) {
          // 默认参数设置
          this._definitionChanged = new Cesium.Event()
          this._color = undefined
          this._colorSubscription = undefined
          this.color = options.color
          this.duration = options.duration
          this.trailImage = options.trailImage
          this._time = (new Date()).getTime()
        }
        Object.defineProperties(DynamicWallMaterialProperty.prototype, {
          isConstant: {
            get: function() {
              return false
            }
          },
          definitionChanged: {
            get: function() {
              return this._definitionChanged
            }
          },
          color: Cesium.createPropertyDescriptor('color')
        })
        DynamicWallMaterialProperty.prototype.getType = function(time) {
          return 'DynamicWall'
        }
        DynamicWallMaterialProperty.prototype.getValue = function(time, result) {
          if (!Cesium.defined(result)) {
            result = {}
          }
          result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color)
          if (this.trailImage) {
            result.image = this.trailImage
          } else {
            result.image = Cesium.Material.DynamicWallImage
          }

          if (this.duration) {
            result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration
          }
        globalEarth.viewer.scene.requestRender()
          return result
        }
        DynamicWallMaterialProperty.prototype.equals = function(other) {
          return this === other ||
                (other instanceof DynamicWallMaterialProperty &&
                    Cesium.Property.equals(this._color, other._color))
        }
        Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty
        Cesium.Material.DynamicWallType = 'DynamicWall'
        Cesium.Material.DynamicWallImage = require('../../assets/color.png')
        Cesium.Material.DynamicWallSource = '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.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
          fabric: {
            type: Cesium.Material.DynamicWallType,
            uniforms: {
              color: new Cesium.Color(1.0, 1.0, 1.0, 1),
              image: Cesium.Material.DynamicWallImage,
              time: 0
            },
            source: Cesium.Material.DynamicWallSource
          },
          translucent: function(material) {
            return true
          }
        }) 
        var a1 = [{"id":"p0","x":-2712897.327213102,"y":4699270.684548098,"z":3341041.2870456045,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p1","x":-2713108.564049161,"y":4699331.511307137,"z":3340785.742708065,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p2","x":-2713132.5385990953,"y":4699319.811981047,"z":3340773.3049236056,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p3","x":-2713321.439549118,"y":4699235.186501143,"z":3340755.941438476,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p4","x":-2713358.5679864944,"y":4699195.708518916,"z":3340764.248641753,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p5","x":-2713398.213901172,"y":4699155.2214128105,"z":3340791.354586632,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p6","x":-2713423.8246512674,"y":4699105.333093823,"z":3340832.288852026,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p7","x":-2713429.82079287,"y":4699083.289320066,"z":3340868.357593048,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p8","x":-2713424.282991716,"y":4699052.887382994,"z":3340903.6561679463,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p9","x":-2713361.9305951246,"y":4698934.998815886,"z":3341138.0656542243,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p10","x":-2713348.2147228224,"y":4698944.435242762,"z":3341147.398668328,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p11","x":-2713120.096745135,"y":4699050.321838988,"z":3341164.730780057,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p12","x":-2713082.3980924957,"y":4699082.023543841,"z":3341153.283454909,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p13","x":-2712893.703752972,"y":4699250.09591774,"z":3341057.4103159793,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0},{"id":"p14","x":-2712897.106471335,"y":4699271.001237924,"z":3341041.163542434,"height":150,"speed":10,"handing":0,"pitch":-25,"roll":0}];
        var positions = []
        a1.map(item=>{
        positions.push(new Cesium.Cartesian3(item.x,item.y,item.z))
        })
        // const positions = Cesium.Cartesian3.fromDegreesArray(YxtData.features[0].geometry.rings[0].join(',').split(','))
        // console.log(positions,1111)
        let a = globalEarth.viewer.entities.add({
          name: '立体墙效果',
          wall: {
    positions: positions,
    // 设置高度
    maximumHeights: new Array(positions.length).fill(60),
    minimunHeights: new Array(positions.length).fill(0),
    material: new Cesium.DynamicWallMaterialProperty({
      color:Cesium.Color.fromCssColorString('#11768d').withAlpha(0.7),
      duration: 3000
    })
  }
        })
      globalEarth.viewer.flyTo(a)
    }



版权声明:本文为Passerby_OK原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。