cesium绘制流动管线内容

第一步：新建cesium自定义材质内容

在你想创建的文件下创建一个js文件

你想起的名字.js
import * as Cesium from 'cesium'

export default class FlowPictureMaterialProperty {
    constructor(options) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.image = options.image;
        this.color = options.color;
        this.duration = options.duration;
        this._time = (new Date()).getTime();
    };

    get isConstant() {
        return false;
    }

    get definitionChanged() {
        return this._definitionChanged;
    }

    getType(time) {
        return Cesium.Material.FlowPictureMaterialType;
    }

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

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


Object.defineProperties(FlowPictureMaterialProperty.prototype, {
    color: Cesium.createPropertyDescriptor('color'),
})

// Cesium.FlowPictureMaterialProperty = FlowPictureMaterialProperty;
Cesium.Material.FlowPictureMaterialProperty = 'FlowPictureMaterialProperty';
Cesium.Material.FlowPictureMaterialType = 'FlowPictureMaterialType';
Cesium.Material.FlowPictureMaterialSource =
    `
  czm_material czm_getMaterial(czm_materialInput materialInput)
  {
    // 使用Cesium提供的函数来获取默认材质。
    czm_material material = czm_getDefaultMaterial(materialInput);
    // 从传入的materialInput中获取二维纹理坐标。
    vec2 st = materialInput.st;
    // 使用texture函数对指定的纹理图像进行采样，并使用fract函数来实现纹理的流动效果。
    // 这里的speed变量控制流动速度，用于实现动态效果。
    vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));
    // 将采样到的透明度附着给材质的透明度alpha属性
    material.alpha = colorImage.a * color.a;
    // 将采样得到的纹理的rgb值乘以1.5，设置为材质的diffuse颜色。
    // 这里乘以1.5是为了增强颜色的亮度。
    material.diffuse = (colorImage.rgb+color.rgb)/2.0;
    return material;
  }
`


Cesium.Material._materialCache.addMaterial(Cesium.Material.FlowPictureMaterialType, {
    fabric: {
        type: Cesium.Material.FlowPictureMaterialType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
            time: 1,
            transparent: true,
            image: ''
        },
        source: Cesium.Material.FlowPictureMaterialSource
    },
    translucent: function (material) {
        return true;
    }
})
console.log('成功加载流动纹理/图片材质');

第二步：在想使用的cesium项目中引入这个文件

具体用法如下：
import ceshi1png from './ceshi1.png'
viewer.entities.add({
    id: '你的id或者用name也可以',
    polylineVolume: {
       positions: Cesium.Cartesian3.fromDegreesArrayHeights(pipelinePositions.flat()),
       shape: computeCircle(管线大小 / 1000 / 2), //参数是管线的半径，管线的横截面形状 自己看着调整
       material: new FlowPictureMaterialProperty({
          color: Cesium.Color.WHITE, // new Cesium.Color(1.0, 1.0, 1.0, 1.0),
          image: ceshi1png, // 图片地址（这里我用的是本地图片）
          duration: 10000 // 控制流速
       })
    },
    description: item
});

// 计算管线半径
function computeCircle(radius) {
    let positions = [];
    for (let i = 0; i < 360; i++) {
       let radians = Cesium.Math.toRadians(i);
       positions.push(
          new Cesium.Cartesian2(
             radius * Math.cos(radians),
             radius * Math.sin(radians)
          )
       );
       i += 2;
    }
    return positions;
}