JT-CIM-SDK/packages/Widgets/PolylineObject/PolylineDirectionMaterialProperty.js

/* 引入Cesium */
// import * as Cesium from 'Cesium';

/**
 * 流动纹理线
 * @ignore 
 */
class PolylineDirectionMaterialProperty {

	/**
	 * 流动纹理线 初始化
	 * @author joy/创睿
	 * @param {Object} options 具有以下属性:
	 * @param {String} options.color 颜色
	 * @param {Number} options.duration 持续时间 毫秒，越小越快
	 * @param {String} options.imgUrl 材质图片
	 * @param {Number} [options.count] 重复次数
	 * @param {String} [options.direction] 方向 vertical纵,垂直方向，horizontal横,水平方向
	 * @param {String} [options.order] 方向正负 
	 *                                        纵:'-'(由下到上) , '+"(由上到下)
	 *                                        横:'-'(顺时针) , '+'(逆时针)
	 */
	constructor(options) {

		this.defaultColor = new Cesium.Color(255/255, 0, 0, 0);

		options = options || {};
		options.isImageAlpha = Cesium.defaultValue(options.isImageAlpha, true);
		options.imgUrl = Cesium.defaultValue(options.imgUrl, 'jt3dSDK/imgs/polylinematerial/spriteline1.png');
		options.duration = Cesium.defaultValue(options.duration, 3000);
		options.count = Cesium.defaultValue(options.count, 1);
		options.direction = Cesium.defaultValue(options.direction, "horizontal");
		options.order = Cesium.defaultValue(options.order, "-");

		if (options.isImageAlpha) {
			options.color = this.defaultColor;
		} else {
			if (options.color instanceof Array) {
				options.color = new Cesium.Color(options.color[0]/255, options.color[1]/255, options.color[2]/255, options.color[3]);
			} else if (typeof options.color === 'string') {
				options.color = new Cesium.Color.fromCssColorString(options.color);
			} else {
				options.color = this.defaultColor;
			}
		}

		/* 变更事件 */
		this._definitionChanged = new Cesium.Event();

		this._color = undefined;
		this._image = undefined;
		this.color = options.color; //颜色
		this.image = options.imgUrl; //材质图片

		this._isImageAlpha = options.isImageAlpha;
		this._duration = options.duration; //动态循环周期
		this._count = options.count; //重复次数
		this._direction = options.direction; //方向
		this._order = options.order; //方向正负
		this._time = performance.now();

		this.addMaterial()
	}

	addMaterial() {
		Cesium.Material.PolylineTrailType = 'PolylineTrail';
		Cesium.Material.Polylineimage = "images/colors.png";

		if (this._direction === "vertical") { //垂直方向

			if (this._isImageAlpha) {
				Cesium.Material.PolylineTrailSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
					            {\n\
					                czm_material material = czm_getDefaultMaterial(materialInput);\n\
					                vec2 st = repeat * materialInput.st;\n\
								    vec4 colorImage = texture2D(image, vec2(fract(st.t " + this._order + " time), st.s));\n\
								    material.alpha = colorImage.a;\n\
								    material.diffuse = colorImage.rgb* 1.5 ;\n\
					                return material;\n\
					            }";
			} else {
				Cesium.Material.PolylineTrailSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
					            {\n\
					                czm_material material = czm_getDefaultMaterial(materialInput);\n\
					                vec2 st = repeat * materialInput.st;\n\
								    vec4 colorImage = texture2D(image, vec2(fract(st.t " + this._order + " time), st.s));\n\
								    material.alpha = colorImage.a * color.a;\n\
								    material.diffuse = max(color.rgb * material.alpha * 3.0, color.rgb);\n\
					                return material;\n\
					            }";
			}

		} else if (this._direction === "horizontal") { //水平方向
			if (this._isImageAlpha) {
				Cesium.Material.PolylineTrailSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
				            {\n\
				                czm_material material = czm_getDefaultMaterial(materialInput);\n\
				                vec2 st = repeat * materialInput.st;\n\
							    vec4 colorImage = texture2D(image, vec2(fract(st.s " + this._order + " time), st.t));\n\
							    material.alpha = colorImage.a;\n\
							    material.diffuse = colorImage.rgb * 1.5 ;\n\
				                return material;\n\
				            }";
			} else {
				Cesium.Material.PolylineTrailSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
				            {\n\
				                czm_material material = czm_getDefaultMaterial(materialInput);\n\
				                vec2 st = repeat * materialInput.st;\n\
							    vec4 colorImage = texture2D(image, vec2(fract(st.s " + this._order + " time), st.t));\n\
							    material.alpha = colorImage.a * color.a;\n\
							    material.diffuse = max(color.rgb * material.alpha * 3.0, color.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.Polylineimage,
					time: 0,
					repeat: new Cesium.Cartesian2(5.0, 1.0), // 横纵方向重复的次数
					order: '-',
				},
				source: Cesium.Material.PolylineTrailSource
			},

			translucent: function(material) {
				/* 材质是否半透明 */
				return true;
			}
		});
	}
}

// 材质类型
PolylineDirectionMaterialProperty.prototype.getType = function(time) {
	return 'PolylineTrail';
}

// 这个方法在每次渲染时被调用，result的参数会传入glsl中。
PolylineDirectionMaterialProperty.prototype.getValue = function(time, result) {

	if (!Cesium.defined(result)) {
		result = {};
	}

	result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, this.defaultColor, result.color);
	result.image = Cesium.Property.getValueOrUndefined(this._image, time); 
	result.time = ((performance.now() - this._time) % this._duration) / this._duration;
	result.repeat = new Cesium.Cartesian2(this._count, 1.0);
	result.order = this._order;

	return result;
}

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

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

export default PolylineDirectionMaterialProperty;