Cesium流动线纹理_cesium 1.68

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;
 
}