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 1
float 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/255
discard;
}
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
