Cesium 动态轨迹线 ES6版本

最新推荐文章于 2024-09-12 16:10:10 发布

名字太难随便取了

最新推荐文章于 2024-09-12 16:10:10 发布

阅读量4.2k

点赞数

分类专栏： Cesium 文章标签： javascript cesium es6

本文链接：https://blog.csdn.net/pinkling/article/details/110087431

版权

Cesium 自定义材质 PolylineTrailMaterial 着色器动画

关键词由CSDN通过智能技术生成

Cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接上代码

图片：

自行旋转图片为横的

代码：

import * as Cesium from 'cesium/Cesium'
class PolylineTrailMaterial {
  constructor(option = {}) {
    this._definitionChanged = new Cesium.Event()
    this._color = undefined
    this._colorSubscription = undefined
    this._time = (new Date()).getTime()

    this.color = option.color ? option.color : Cesium.Color.fromCssColorString('rgba(90,90,255, 1)')
    this.duration = option.duration ? option.duration : 5000
    this.img = option.img ? option.img : require('../../assets/image/color2.png')

    // 类型（会自动加载到cesium中）
    this.type = option.type ? option.type : 'PolylineTrail'

    // 着色器
    this.source = option.source ? option.source : 'czm_material czm_getMaterial(czm_materialInput materialInput)' +
      '{' +
      'czm_material material = czm_getDefaultMaterial(materialInput);' +
      'vec2 st = materialInput.st;' +
      'vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));' +
      'material.alpha = colorImage.a * color.a;' +
      'material.diffuse = (colorImage.rgb+color.rgb)/2.0;' +
      'return material;' +
      '}'

    this.addMaterial()
  }

  getType() {
    return 'PolylineTrail'
  }
  getValue(time, result) {
    if (!Cesium.defined(result)) {
      result = {}
    }

    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color)
    result.image = this.img
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration

    return result
  }
  equals(other) {
    return this === other || (other instanceof PolylineTrailMaterial && Cesium.Property.equals(this._color, other._color))
  }
  addMaterial() {
    Cesium.Material._materialCache.addMaterial(this.type, {
      fabric: {
        type: this.type,
        uniforms: {
          color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
          image: this.img,
          time: 100
        },
        source: this.source
      },

      translucent: (material) => {
        return true
      }
    })

    // 注意Cesium.defineProperties会报错，需要改为Object
    Object.defineProperties(PolylineTrailMaterial.prototype, {
      isConstant: {
        get: () => {
          return false
        },
        configurable: true
      },
      definitionChanged: {
        get: () => {
          return this._definitionChanged
        },
        configurable: true
      },
      color: {
        value: Cesium.createPropertyDescriptor('color'),
        configurable: true,
        writable: true
      }
    })
  }
}
export default PolylineTrailMaterial

对于如何自定义材质有问题的，可以查看这个链接的代码

源码例子