Cesium Polyline Trail Material Property

readme.md

Single Usage

import * as Cesium from 'cesium'
import PolylineTrailLinkMaterialProperty from './PolylineTrailLinkMaterialProperty.js'

const ett = viewer.entities.add({
  name: "动态立体墙",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([117.154815, 31.853495, 117.181255, 31.854257, 117.182284, 31.848255, 117.184748, 31.840141, 117.180557, 31.835556, 117.180023, 31.833741, 117.166846, 31.833737, 117.155531, 31.833151, 117.154787, 31.835978, 117.151994, 31.839036, 117.150691, 31.8416, 117.151215, 31.844734, 117.154457, 31.848152, 117.154815, 31.853495]),
    maximumHeights: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600],
    minimumHeights: [43.9, 49.4, 38.7, 40, 54, 51, 66.7, 44.6, 41.2, 31.2, 50.1, 53.8, 46.9, 43.9],
    material: new PolylineTrailLinkMaterialProperty('http://localhost:6700/static_files/colors.png', Cesium.Color.ORANGE, 2000)
  }
});

viewer.flyTo(ett);

/imgs/bell.png 通常是一张渐变色带，例如 512px 长 32px 高的，从左到右透明到某某颜色的色带

PolylineTrailLinkMaterialProperty.js

import { Color, defined, Event, Material, Property } from 'cesium'

const PolylineTrailLinkType = 'PolylineTrailLink'

const PolylineTrailLinkSource = /* glsl */`
czm_material czm_getMaterial(czm_materialInput materialInput) 
{
  czm_material material = czm_getDefaultMaterial(materialInput);
  vec2 st = materialInput.st;
  vec4 sampledColor = texture2D(image, vec2(fract(st.s - time), st.t));
  material.alpha = sampledColor.a * color.a;
  material.diffuse = (sampledColor.rgb + color.rgb) / 2.0;
  return material;
}
`

class PolylineTrailLinkMaterialProperty {
  /**
   * 构造方法
   * @param {String} image 图片路径，确保为程序能访问到的正常 URL
   * @param {Cesium.Color} [color] 颜色，默认白色
   * @param {Number} [duration] 持续时间（毫秒），默认1000
   */
  constructor(image, color = Color.WHITE, duration = 1000) {
    this._definitionChanged = new Event()
    this._color = undefined
    this._colorSubscription = undefined
    this.color = color
    this.duration = duration
    this._time = new Date().getTime()
    this.image = image

    Material._materialCache.addMaterial(PolylineTrailLinkType, {
      fabric: {
        type: PolylineTrailLinkType,
        uniforms: {
          color: color.withAlpha(0.5), // 设为半透明
          image: image,
          time: 0
        },
        source: PolylineTrailLinkSource
      },
      translucent: () => true
    })
  }

  get isConstant() {
    return false
  }

  get definitionChanged() {
    return this._definitionChanged
  }

  getType(_) {
    return PolylineTrailLinkType
  }

  getValue(time, result) {
    if (!defined(result)) {
      result = {}
    }
    result.color = Property.getValueOrClonedDefault(this._color, time, Color.WHITE, result.color)
    result.image = this.image
    result.time = (new Date().getTime() - this._time) % this.duration / this.duration
    return result
  }

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

export default PolylineTrailLinkMaterialProperty