cesium中有虚线材质PolylineDashMaterialProperty,可以在这个材质的基础上结合uv设置每个顶点的透明度,就能实现渐变的效果了。
一、原理:在glsl中结合uv设置每个顶点的透明度
vec2 st = materialInput.st;
material.alpha = fragColor.a * (1.0 - st.s);
二、完整代码,扩展PolylineDashMaterialProperty材质
const defaultColor = Cesium.Color.WHITE;
const defaultGapColor = Cesium.Color.TRANSPARENT;
const defaultDashLength = 16.0;
const defaultDashPattern = 255.0;/*** A {@link MaterialProperty} that maps to polyline dash {@link Material} uniforms.* @alias GradientPolylineDashMaterial* @constructor** @param {Object} [options] Object with the following properties:* @param {Cesium.Property|Cesium.Color} [options.color=Cesium.Color.WHITE] A Cesium.Property specifying the {@link Cesium.Color} of the line.* @param {Cesium.Property|Cesium.Color} [options.gapColor=Cesium.Color.TRANSPARENT] A Cesium.Property specifying the {@link Cesium.Color} of the gaps in the line.* @param {Cesium.Property|Number} [options.dashLength=16.0] A numeric Cesium.Property specifying the length of the dash pattern in pixels.* @param {Cesium.Property|Number} [options.dashPattern=255.0] A numeric Cesium.Property specifying a 16 bit pattern for the dash*/
function GradientPolylineDashMaterial(options) {options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined;this._gapColor = undefined;this._gapColorSubscription = undefined;this._dashLength = undefined;this._dashLengthSubscription = undefined;this._dashPattern = undefined;this._dashPatternSubscription = undefined;this.color = options.color;this.gapColor = options.gapColor;this.dashLength = options.dashLength;this.dashPattern = options.dashPattern;
}Object.defineProperties(GradientPolylineDashMaterial.prototype, {/*** Gets a value indicating if this property is constant. A property is considered* constant if getValue always returns the same result for the current definition.* @memberof GradientPolylineDashMaterial.prototype* @type {Boolean}* @readonly*/isConstant: {get: function () {return (Cesium.Property.isConstant(this._color) &&Cesium.Property.isConstant(this._gapColor) &&Cesium.Property.isConstant(this._dashLength) &&Cesium.Property.isConstant(this._dashPattern));},},/*** Gets the event that is raised whenever the definition of this property changes.* The definition is considered to have changed if a call to getValue would return* a different result for the same time.* @memberof GradientPolylineDashMaterial.prototype* @type {Event}* @readonly*/definitionChanged: {get: function () {return this._definitionChanged;},},/*** Gets or sets the Cesium.Property specifying the {@link Cesium.Color} of the line.* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/color: Cesium.createPropertyDescriptor("color"),/*** Gets or sets the Cesium.Property specifying the {@link Cesium.Color} of the gaps in the line.* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/gapColor: Cesium.createPropertyDescriptor("gapColor"),/*** Gets or sets the numeric Cesium.Property specifying the length of a dash cycle* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/dashLength: Cesium.createPropertyDescriptor("dashLength"),/*** Gets or sets the numeric Cesium.Property specifying a dash pattern* @memberof GradientPolylineDashMaterial.prototype* @type {Cesium.Property|undefined}*/dashPattern: Cesium.createPropertyDescriptor("dashPattern"),
});/*** Gets the {@link Material} type at the provided time.** @param {JulianDate} time The time for which to retrieve the type.* @returns {String} The type of material.*/
GradientPolylineDashMaterial.prototype.getType = function (time) {return "GradientPolylineDash";
};/*** Gets the value of the property at the provided time.** @param {JulianDate} time The time for which to retrieve the value.* @param {Object} [result] The object to store the value into, if omitted, a new instance is created and returned.* @returns {Object} The modified result parameter or a new instance if the result parameter was not supplied.*/
GradientPolylineDashMaterial.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color,time,defaultColor,result.color);result.gapColor = Cesium.Property.getValueOrClonedDefault(this._gapColor,time,defaultGapColor,result.gapColor);result.dashLength = Cesium.Property.getValueOrDefault(this._dashLength,time,defaultDashLength,result.dashLength);result.dashPattern = Cesium.Property.getValueOrDefault(this._dashPattern,time,defaultDashPattern,result.dashPattern);return result;
};/*** Compares this property to the provided property and returns* <code>true</code> if they are equal, <code>false</code> otherwise.** @param {Cesium.Property} [other] The other property.* @returns {Boolean} <code>true</code> if left and right are equal, <code>false</code> otherwise.*/
GradientPolylineDashMaterial.prototype.equals = function (other) {return (this === other || //(other instanceof GradientPolylineDashMaterial &&Cesium.Property.equals(this._color, other._color) &&Cesium.Property.equals(this._gapColor, other._gapColor) &&Cesium.Property.equals(this._dashLength, other._dashLength) &&Cesium.Property.equals(this._dashPattern, other._dashPattern)));
};Cesium.Material._materialCache.addMaterial("GradientPolylineDash", {fabric: {type: "GradientPolylineDash",uniforms: {color: defaultColor,gapColor: defaultGapColor,dashLength: defaultDashLength,dashPattern: defaultDashPattern},source:`uniform vec4 color;uniform vec4 gapColor;uniform float dashLength;uniform float dashPattern;varying float v_polylineAngle;const float maskLength = 16.0;mat2 rotate(float rad) {float c = cos(rad);float s = sin(rad);return mat2(c, s,-s, c);}czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy;// Get the relative position within the dash from 0 to 1float dashPosition = fract(pos.x / (dashLength * czm_pixelRatio));// Figure out the mask index.float maskIndex = floor(dashPosition * maskLength);// Test the bit mask.float maskTest = floor(dashPattern / pow(2.0, maskIndex));vec4 fragColor = (mod(maskTest, 2.0) < 1.0) ? gapColor : color;if (fragColor.a < 0.005) { // matches 0/255 and 1/255discard;}fragColor = czm_gammaCorrect(fragColor);material.emission = fragColor.rgb;vec2 st = materialInput.st;material.alpha = fragColor.a * (1.0 - st.s);return material;}`},translucent: function translucent() {return true;}
});// 写到Cesium对象上,就可以像其他MaterialProperty一样使用了
Cesium.Material.GradientDashPolyline = 'GradientPolylineDash'
Cesium.GradientPolylineDashMaterialProperty = GradientPolylineDashMaterial