Cesium流动线纹理

1.扩展类PolylineTrailMaterialProperty (Cesium  1.67-1.68)

创建PolylineTrailMaterialProperty .js文件

import * as Cesium from "cesium";
export class PolylineTrailMaterialProperty {
  constructor(options) {
    options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);

    this._definitionChanged = new Cesium.Event();

    this._color = undefined;

    this._colorSubscription = undefined;

    this.color = options.color;

    this.duration = options.duration;

    this.trailImage = options.trailImage;

    this._time = performance.now();
  }
}

Object.defineProperties(PolylineTrailMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    },
  },

  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    },
  },

  color: Cesium.createPropertyDescriptor("color"),
});

PolylineTrailMaterialProperty.prototype.getType = function (time) {
  return "PolylineTrail";
};

PolylineTrailMaterialProperty.prototype.getValue = function (time, result) {
  if (!Cesium.defined(result)) {
    result = {};
  }

  result.color = Cesium.Property.getValueOrClonedDefault(
    this._color,
    time,
    Cesium.Color.WHITE,
    result.color
  ); //result.image = Cesium.Material.PolylineTrailImage;

  result.image = this.trailImage;

  result.time =
    ((performance.now() - this._time) % this.duration) / this.duration;

  return result;
};

PolylineTrailMaterialProperty.prototype.equals = function (other) {
  return (
    this === other ||
    (other instanceof PolylineTrailMaterialProperty &&
      Cesium.Property.equals(this._color, other._color))
  );
};

Cesium.Material.PolylineTrailType = "PolylineTrail";

Cesium.Material.PolylineTrailImage = "/images/fire.png";
// Cesium.Material.PolylineTrailSource =
//   "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
//   "{\n" +
//   "czm_material material = czm_getDefaultMaterial(materialInput);\n" +
//   "vec2 st = materialInput.st;\n" +
//   "vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n" +
//   "material.alpha = colorImage.a * color.a;\n" +
//   "material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n" +
//   "return material;\n" +
//   "}";

Cesium.Material.PolylineTrailSource =
"czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;\n\
vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));\n\
vec4 fragColor;\n\
fragColor.rgb = color.rgb / 1.0;\n\
fragColor = czm_gammaCorrect(fragColor);\n\
material.alpha = colorImage.a * color.a;\n\
material.diffuse = color.rgb;\n\
material.emission = fragColor.rgb;\n\
return material;\n\
}";

Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailType, {
  fabric: {
    type: Cesium.Material.PolylineTrailType,

    uniforms: {
      color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),

      image: Cesium.Material.PolylineTrailImage,

      time: 0,
    },

    source: Cesium.Material.PolylineTrailSource,
  },

  translucent: function (material) {
    return true;
  },
});

Cesium.PolylineTrailMaterialProperty = PolylineTrailMaterialProperty;

2：在vue中引用

import PolylineTrailMaterialProperty from "@/utils/PolylineTrailLinkMaterialProperty";

3：调用

const createFlyLines = (data, viewer) => {
  const center = data.center;
  const cities = data.points;
  const startPoint = Cesium.Cartesian3.fromDegrees(
    center.lon,
    center.lat,
    0

  );
  //中心点

  viewer.entities.add({

    position: startPoint,

    point: {

      pixelSize: center.size,

      color: Cesium.Color.YELLOWGREEN

    }

  });

  //大批量操作时，临时禁用事件可以提高性能

  // viewer.entities.suspendEvents();

  //散点

  cities.map(city => {
    let material = new Cesium.PolylineTrailMaterialProperty({ //创建材质1
      color: Cesium.Color.GREEN.withAlpha(0.5),
      duration: 3000,
      trailImage: '/images/fire.png'

    });
    const endPoint = Cesium.Cartesian3.fromDegrees(city.lon, city.lat, 0);
    viewer.entities.add({
      position: endPoint,
      point: {
        pixelSize: city.size - 10,
        color: city.color
      }
    });
    viewer.entities.add({
      polyline: {
        
        positions: generateCurve(startPoint, endPoint), // 格式为世界坐标的线位置数组
        width: 2, // 线的宽度
         material: material, // 线的颜色
        clampToGround: true, // 线是否固定在地面
      }

    });
  });
};
/**

* 生成流动曲线

* @param startPoint 起点

* @param endPoint 终点

* @returns {Array}

*/
const generateCurve = (startPoint, endPoint) => {

  let addPointCartesian = new Cesium.Cartesian3();

  Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian);

  let midPointCartesian = new Cesium.Cartesian3();

  Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);

  let midPointCartographic = Cesium.Cartographic.fromCartesian(

    midPointCartesian

  );

  midPointCartographic.height =

    Cesium.Cartesian3.distance(startPoint, endPoint) / 5;

  let midPoint = new Cesium.Cartesian3();

  Cesium.Ellipsoid.WGS84.cartographicToCartesian(

    midPointCartographic,

    midPoint

  );

  let spline = new Cesium.CatmullRomSpline({

    times: [0.0, 0.5, 1.0],

    points: [startPoint, midPoint, endPoint]

  });

  let curvePoints = [];

  for (let i = 0, len = 200; i < len; i++) {

    curvePoints.push(spline.evaluate(i / len));

  }

  return curvePoints;

}