在Cesium中给管道添加水流效果（Adding water flow effects to pipelines in Cesium）

添加效果前后对比：


关键代码：

/**
   * 水流粒子，目前支持向上或者向下的效果
   * @param {Number} x
   * @param {Number} y
   * @param {Number} z
   * @param {Number} options
   * @example
   * options = {
   *    color: Cesium.Color.AZURE,
   *    emissionRate: 5, //影响水流速度
   *    direction: "upword",
   *    heightReference : Cesium.HeightReference.RELATIVE_TO_GROUND
   * }
   */
  renderWaterParticle(x, y, z, options = {}) {
    options = this.defaultParticleOptions(options);
    if (options.heightReference === Cesium.HeightReference.RELATIVE_TO_GROUND) {
    //获取当前位置的地形高程
      const terrainHeight = this._viewer.scene.globe.getHeight(Cesium.Cartographic.fromDegrees(x, y));
      z += terrainHeight;
    }
    const translationOffset = Cesium.Matrix4.fromTranslation(this.particlesOffset, new Cesium.Matrix4());
    const planePosition = Cesium.Cartesian3.fromDegrees(x, y, z);
    const translationOfPlane = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
    const particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
      translationOfPlane,
      translationOffset,
      new Cesium.Matrix4()
    );
    // creating the particle systems
    const rocketOptions = {
      numberOfSystems: 20.0,
      iterationOffset: 0.5,
      cartographicStep: 0.0000001,
      baseRadius: 0.000005,
      ...options,
    };
    const rocketSystems = [];
    this.createParticleSystems(rocketOptions, rocketSystems, particlesModelMatrix);
    this.showAll(rocketSystems, true);
    this.particleSystems.push(...rocketSystems);
  }
  
  createParticleSystems(options, systemsArray, particlesModelMatrix) {
    const matrix4Scratch = new Cesium.Matrix4();
    let scratchAngleForOffset = 0.0;
    const scratchOffset = new Cesium.Cartesian3();
    const imageSize = new Cesium.Cartesian2(8.0, 8.0);
    const length = options.numberOfSystems;
    for (let i = 0; i < length; ++i) {
      scratchAngleForOffset = (Math.PI * Math.random() * 2) / options.numberOfSystems;
      scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
      scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);
      const emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
      const color = options.color;
      const force = this.forceFunction(options, i);

      const item = this._viewer.scene.primitives.add(
        new Cesium.ParticleSystem({
          image: this.getImage(),
          startColor: color,
          endColor: color.withAlpha(0.0),
          particleLife: 1,
          speed: 0.0000005,
          imageSize: imageSize,
          emissionRate: options.emissionRate,
          emitter: new Cesium.CircleEmitter(1),
          lifetime: 1,
          updateCallback: force,
          modelMatrix: particlesModelMatrix,
          emitterModelMatrix: emitterModelMatrix,
        })
      );
      systemsArray.push(item);
    }
  }
  showAll(systemsArray, show) {
    const length = systemsArray.length;
    for (let i = 0; i < length; ++i) {
      systemsArray[i].show = show;
    }
  }