cesium 3 d河川スタンプ動態


3 dRiver.js
// const Cesium = require('cesium/Cesium')
// import '@public/Cesium/Cesium'
const img = require("@img/waterDiversion/colorsblue.png")
class PolylineTrailLinkMaterialProperty {
  constructor(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = (new Date()).getTime();
  }
  getType () {
    return 'PolylineTrailLink';
  }
  getValue (time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = Cesium.Material.PolylineTrailLinkImage;
    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))
    return this === other
  }

}
Cesium.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    }
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    }
  },
  color: Cesium.createPropertyDescriptor('color')
});

Cesium.Material.PolylineTrailLinkImage = img;

Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)
\ {
\ czm_material material = czm_getDefaultMaterial(materialInput);
\ vec2 st = materialInput.st;
\ vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));
\ material.alpha = colorImage.a * color.a;
\ material.diffuse = (colorImage.rgb+color.rgb)/2.0;
\ return material;
\ }"; Cesium.Material._materialCache.addMaterial('PolylineTrailLink', { fabric: { type: Cesium.Material.PolylineTrailLinkType, uniforms: { color: new Cesium.Color(1.0, 0.0, 0.0, 0.5), image: Cesium.Material.PolylineTrailLinkImage, time: 0 }, source: Cesium.Material.PolylineTrailLinkSource }, translucent: function () { return true; } }); export default PolylineTrailLinkMaterialProperty
//cesium polyline import PolylineTrailLinkMaterialProperty from './3dRiver'
let line = {
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(ele.positions),
            show: true,
            width: 16,
            // material: Cesium.Color.fromCssColorString(`#${o}`),
            material: new PolylineTrailLinkMaterialProperty(Cesium.Color.fromCssColorString(`#${o}`), 8000),
            clampToGround: true
          }
        };
        this.viewer.entities.add(line);