/* 引入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;