cesium+vue实现polyline动态尾迹线材质（vue2、3都有）

vue2版本

版本：cesium1.99+vue2

材质文件 FlowLineMaterialProperty.js

import * as Cesium from "cesium";
export default class FlowLineMaterialProperty {
  constructor(options) {
    this._definitionChanged = new Cesium.Event()
    this._mixColor = undefined
    this._flowSpeed = undefined
    this._image = undefined
    this._mixRatio = undefined
    this._repeat = undefined
    this.mixColor = options.mixColor
    this.flowSpeed = options.flowSpeed
    this.image = options.image
    this.mixRatio = options.mixRatio
    this.repeat = options.repeat
  }

  get isConstant() {
    return false
  }

  get definitionChanged() {
    return this._definitionChanged
  }

  getType(time) {
    return Cesium.Material.FlowLineMaterialType
  }

  getValue(time, result) {
    if (!Cesium.defined(result)) {
      result = {}
    }

    result.mixColor = Cesium.Property.getValueOrDefault(
      this._mixColor,
      time,
      Cesium.Color.RED,
      result.mixColor
    )
    result.flowSpeed = Cesium.Property.getValueOrDefault(
      this._flowSpeed,
      time,
      10,
      result.flowSpeed
    )
    result.image = Cesium.Property.getValueOrDefault(
      this._image,
      time,
      10,
      result.image
    )
    result.mixRatio = Cesium.Property.getValueOrDefault(
      this._mixRatio,
      time,
      10,
      result.mixRatio
    )
    result.repeat = Cesium.Property.getValueOrDefault(
      this._repeat,
      time,
      10,
      result.repeat
    )
    // result.image = Cesium.Material.PolylineTrailLinkImage;
    return result
  }

  equals(other) {
    return (
      this === other ||
      (other instanceof FlowLineMaterialProperty &&
        Cesium.Property.equals(this._mixColor, other._mixColor) &&
        Cesium.Property.equals(this._image, other._image) &&
        Cesium.Property.equals(this._mixRatio, other._mixRatio) &&
        Cesium.Property.equals(this._repeat, other._repeat) &&
        Cesium.Property.equals(this._flowSpeed, other._flowSpeed))
    )
  }
}
Object.defineProperties(FlowLineMaterialProperty.prototype, {
  mixColor: Cesium.createPropertyDescriptor('mixColor'),
  image: Cesium.createPropertyDescriptor('image'),
  flowSpeed: Cesium.createPropertyDescriptor('flowSpeed'),
  repeat: Cesium.createPropertyDescriptor('repeat'),
  mixRatio: Cesium.createPropertyDescriptor('mixRatio'),
})
Cesium.Material.PolylineTrailLinkImage = "/public/color.png";
// Cesium.Material.PolylineTrailLinkImage = require("../../static/image/colors2.png");
Cesium.FlowLineMaterialProperty = FlowLineMaterialProperty
Cesium.Material.FlowLineMaterialProperty = 'FlowLineMaterialProperty'
Cesium.Material.FlowLineMaterialType = 'FlowLineMaterialType'
Cesium.Material.FlowLineMaterialSource = `
uniform vec4 mixColor;
uniform float flowSpeed;
uniform float mixRatio;
uniform vec2 repeat;
uniform sampler2D image;

czm_material czm_getMaterial(czm_materialInput materialInput)
{
  czm_material material = czm_getDefaultMaterial(materialInput);
  vec2 st = materialInput.st;
  float time = czm_frameNumber/240.0;
  vec4 color;
  // vec4 colorImage = texture2D(image, vec2(fract(st.s - time*flowSpeed), st.t));
  color += texture2D(image, vec2(fract(st.s*repeat.x - time*flowSpeed), st.t));
  // color += texture2D(image, vec2(fract(st.s - (time + 1.0)*flowSpeed), st.t));
  // color += texture2D(image, vec2(fract(st.s - (time + 5.0)*flowSpeed), st.t));
  material.alpha = color.a;
  material.diffuse = mix(color.rgb,mixColor.rgb,mixRatio);
  return material;
}
`;

Cesium.Material._materialCache.addMaterial(
  Cesium.Material.FlowLineMaterialType,
  {
    fabric: {
      type: Cesium.Material.FlowLineMaterialType,
      uniforms: {
        mixColor: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
        flowSpeed: 5.0,
        mixRatio: 0.9,
        repeat: new Cesium.Cartesian2(1, 1),
        image: Cesium.Material.PolylineTrailLinkImage,
      },
      source: Cesium.Material.FlowLineMaterialSource
    },
    translucent: function (material) {
      return true
    }
  }
)

使用方式：

myMaterial = new Cesium.FlowLineMaterialProperty({
      transparent: true,
      mixColor: new Cesium.Color(
        0 / 255,
        255 / 255,
        255 / 255,
        1.0
      ),
      repeat: new Cesium.Cartesian2(1, 1),
      mixRatio: 0.8,
      flowSpeed: 3,
      image: this.base_url + "static/image/texture/materialline.png"
    })

素材图片：

---

vue3版本

版本：cesium1.99+vue3

材质文件 PolylineTrailMaterialProperty.js

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

const PolylineTrailLinkType = 'PolylineTrailLink'
//time用于控制时间，值越小，速度越快，colorImage控制纹理样式，
// vec4 sampledColor = texture2D(image, vec2(fract(3.0*st.s - time), st.t));
//3.0代表纹理个数，st.t纵向，st.s横向，-time代表逆时针，+time代表顺时针
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(3.0*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

使用方式：

import PolylineTrailLinkMaterialProperty from '../api/PolylineTrailMaterialProperty.js';

...

viewer.value.entities.add({
        id: "signalTower_link",
        polyline: {
            show: true, //是否显示，默认显示
            positions: new Cesium.Cartesian3.fromDegreesArrayHeights([
                -83.3, 45.3, 0,
                29.3, 17.3, 0,
            ]),
            width: 100, //线的宽度（像素），默认为1
            material: new PolylineTrailLinkMaterialProperty(
                "/public/蓝紫色尾迹.png", Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.8),
                500
            ),
        }
    });

素材图片：

---

之前做cesium项目都是领导找好的材质文件，我只管引入，现在自己做材质，发现不同的cesium版本api不同，很少有拿来即用的材质，所以在这里记录一下。