import * as Cesium from 'cesium' // 多边形渐变材质 let pM = "PolyGradientMaterial" Cesium.Material._materialCache.addMaterial(pM, { strict: true, fabric: { type: pM, uniforms: { color: new Cesium.Color(1.0, 1.0, 0.0, 0.5), diffusePower: 1.6, alphaPower: 1.5, center: new Cesium.Cartesian2(0.5, 0.5), isInner: false, globalAlpha: 1.0, }, source: ` uniform vec4 color; uniform float diffusePower; uniform float alphaPower; uniform float globalAlpha; uniform vec2 center; uniform bool isInner; czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float alphaMars3D = distance(st, center); if(isInner) { material.alpha = (1.0 - (color.a * alphaMars3D * alphaPower)) * globalAlpha; if(material.alpha < 0.0) material.alpha = 0.0; } else { material.alpha = color.a * alphaMars3D * alphaPower * globalAlpha; } material.diffuse = color.rgb * diffusePower; return material; } `, }, translucent: true, }) class MaterialProperty { constructor(options = {}) { this._definitionChanged = new Cesium.Event() this._color = undefined this._glowPower = undefined this._taperPower = undefined this._directionColor = undefined this._outlineColor = undefined this._outlineWidth = undefined this._opacity = undefined this._alphaPower = undefined this._speed = undefined this.color = options.color || Cesium.Color.fromBytes(0, 255, 255, 255) this.glowPower = .25 this.taperPower = 1 this.directionColor = options.directionColor || Cesium.Color.fromBytes(255, 255, 255, 255) this.outlineColor = options.outlineColor || Cesium.Color.fromBytes(255, 255, 255, 255) this.outlineWidth = 0 this.opacity = options.opacity || 0.5 this.alphaPower = options.alphaPower || 1.5 this.speed = options.speed || 5 } get isConstant () { return false } get definitionChanged () { return this._definitionChanged } getType (time) { return null } getValue (time, result) { result = Cesium.defaultValue(result, {}) return result } equals (other) { return this === other } } class PolyGradientMaterial extends MaterialProperty { constructor(options = {}) { super(options) } getType (time) { return pM } getValue (time, result) { if (!result) { result = {} } result.color = Cesium.Property.getValueOrUndefined(this._color, time) result.globalAlpha = Cesium.Property.getValueOrUndefined(this._opacity, time) result.alphaPower = Cesium.Property.getValueOrUndefined(this._alphaPower, time) return result } equals (other) { return ( this === other || (other instanceof PolyGradientMaterial && Cesium.Property.equals(this._color, other._color) && Cesium.Property.equals(this._opacity, other._opacity) && Cesium.Property.equals(this._alphaPower, other._alphaPower)) ) } } Object.defineProperties(PolyGradientMaterial.prototype, { color: Cesium.createPropertyDescriptor('color'), opacity: Cesium.createPropertyDescriptor('opacity'), alphaPower: Cesium.createPropertyDescriptor('alphaPower'), }) // 轨迹线材质 let lT = "LineTrailMaterial" Cesium.Material._materialCache.addMaterial(lT, { fabric: { uniforms: { color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), bgColor: new Cesium.Color(0.0, 1.0, 0.0, 0.0), speed: 5, globalAlpha: 1.0 }, source: ` uniform vec4 bgColor; uniform vec4 color; uniform float speed; uniform float globalAlpha; czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float time = fract(czm_frameNumber * speed / 1000.0); vec3 colorMars3D = color.rgb; if (st.t > 0.45 && st.t < 0.55) { colorMars3D = vec3(1.0); } material.alpha = color.a * 1.5 * smoothstep(0.0, 1.0, fract(st.s - time)); material.diffuse = max(colorMars3D.rgb * material.alpha, colorMars3D.rgb); if (material.alpha < bgColor.a) { material.alpha = bgColor.a; material.diffuse = bgColor.rgb; } material.alpha = material.alpha * globalAlpha; return material; } ` }, translucent: true }) class LineTrailMaterial extends MaterialProperty { constructor(options = {}) { super(options) } getType (time) { return lT } getValue (time, result) { if (!result) { result = {} } result.color = Cesium.Property.getValueOrUndefined(this._color, time) result.globalAlpha = Cesium.Property.getValueOrUndefined(this._opacity, time) result.speed = Cesium.Property.getValueOrUndefined(this._speed, time) return result } equals (other) { return ( this === other || (other instanceof LineTrailMaterial && Cesium.Property.equals(this._color, other._color) && Cesium.Property.equals(this._opacity, other._opacity) && Cesium.Property.equals(this._speed, other._speed)) ) } } Object.defineProperties(LineTrailMaterial.prototype, { color: Cesium.createPropertyDescriptor('color'), opacity: Cesium.createPropertyDescriptor('opacity'), speed: Cesium.createPropertyDescriptor('speed'), }) let arrowLineMaterialType = "ArrowLineMaterial" Cesium.Material._materialCache.addMaterial(arrowLineMaterialType, { fabric: { type: arrowLineMaterialType, uniforms: { color: new Cesium.Color(0, 1, 1, 1), directionColor: new Cesium.Color(1, 1, 1, 1), outlineColor: new Cesium.Color(1, 1, 1, 1), outlineWidth: 0, speed: 0, // Added speed uniform with default 0 (no animation) }, source: ` #ifdef GL_OES_standard_derivatives #extension GL_OES_standard_derivatives : enable #endif uniform vec4 color; uniform vec4 directionColor; uniform vec4 outlineColor; uniform float outlineWidth; uniform float speed; // Added speed uniform in float v_width; in float v_polylineAngle; const float fragLength = 100.0; const float startPosition = 0.45; const float endPosition = 0.55; mat2 rotate(float rad) { float c = cos(rad); float s = sin(rad); return mat2(c, s, -s, c); } float getPointOnLine(vec2 p0, vec2 p1, float x) { float slope = (p0.y - p1.y) / (p0.x - p1.x); return slope * (x - p0.x) + p0.y; } czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float time = fract(czm_frameNumber * speed / 1000.0); float halfInteriorWidth = 0.5 * (v_width - outlineWidth) / v_width; float b = step(0.5 - halfInteriorWidth, st.t); b *= 1.0 - step(0.5 + halfInteriorWidth, st.t); float d1 = abs(st.t - (0.5 - halfInteriorWidth)); float d2 = abs(st.t - (0.5 + halfInteriorWidth)); float dist = min(d1, d2); vec4 currentColor = mix(outlineColor, color, b); vec4 outColor = czm_antialias(outlineColor, color, currentColor, dist); outColor = czm_gammaCorrect(outColor); vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy; // Modified to include animation based on speed and time float animationOffset = speed * time; float maskS = fract((pos.x / (fragLength * czm_pixelRatio)) - animationOffset); float maskT = st.t; bool isDirection = (maskS > startPosition) && (maskS <= endPosition); vec4 fragColor; if (isDirection) { float arrowWidth = (endPosition - startPosition) / 2.0; float midS = startPosition + arrowWidth; float t = 1.0; if (maskS < midS) { vec2 center = vec2(midS, 0.5); float ptOnUpperLine = getPointOnLine(vec2(startPosition, 1.0), center, maskS); float ptOnLowerLine = getPointOnLine(vec2(startPosition, 0.0), center, maskS); t *= 1.0 - step(ptOnUpperLine, maskT); t *= step(ptOnLowerLine, maskT); t = 1.0 - t; } else { vec2 center = vec2(endPosition, 0.5); float ptOnUpperLine = getPointOnLine(vec2(midS, 1.0), center, maskS); float ptOnLowerLine = getPointOnLine(vec2(midS, 0.0), center, maskS); t *= 1.0 - step(ptOnUpperLine, maskT); t *= step(ptOnLowerLine, maskT); } vec4 outsideColor = outColor; vec4 currentColor = mix(outsideColor, directionColor, clamp(t, 0.0, 1.0)); fragColor = currentColor; } else { fragColor = outColor; } fragColor = czm_gammaCorrect(fragColor); material.diffuse = fragColor.rgb; material.alpha = fragColor.a; return material; }` }, translucent: true }) class ArrowLineMaterialProperty extends MaterialProperty { constructor(options = {}) { super(options) } getType (time) { return arrowLineMaterialType } getType (time) { return arrowLineMaterialType } getValue (time, result) { if (!result) { result = {} } result.color = Cesium.Property.getValueOrUndefined(this._color, time) result.directionColor = Cesium.Property.getValueOrUndefined(this._directionColor, time) result.outlineColor = Cesium.Property.getValueOrUndefined(this._outlineColor, time) result.outlineWidth = Cesium.Property.getValueOrUndefined(this._outlineWidth, time) result.speed = Cesium.Property.getValueOrUndefined(this._speed, time) return result } equals (other) { return ( this === other || (other instanceof ArrowLineMaterialProperty && Cesium.Property.equals(this._color, other._color) && Cesium.Property.equals(this._directionColor, other._directionColor) && Cesium.Property.equals(this._outlineColor, other._outlineColor) && Cesium.Property.equals(this._outlineWidth, other._outlineWidth) && Cesium.Property.equals(this._speed, other._speed)) ) } } Object.defineProperties(ArrowLineMaterialProperty.prototype, { color: Cesium.createPropertyDescriptor('color'), directionColor: Cesium.createPropertyDescriptor('directionColor'), outlineColor: Cesium.createPropertyDescriptor('outlineColor'), outlineWidth: Cesium.createPropertyDescriptor('outlineWidth'), speed: Cesium.createPropertyDescriptor('speed') }) // 轨迹线材质 let pLG = "PolylineGlow" Cesium.Material._materialCache.addMaterial(pLG, { fabric: { uniforms: { color: new Cesium.Color(0, .5, 1, 1), glowPower: .25, taperPower: 1 }, source: ` uniform vec4 color; uniform float glowPower; uniform float taperPower; czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float glow = glowPower / abs(st.t - 0.5) - (glowPower / 0.5); if (taperPower <= 0.99999) { glow *= min(1.0, taperPower / (0.5 - st.s * 0.5) - (taperPower / 0.5)); } vec4 fragColor; fragColor.rgb = max(vec3(glow - 1.0 + color.rgb), color.rgb); fragColor.a = clamp(0.0, 1.0, glow) * color.a; fragColor = czm_gammaCorrect(fragColor); material.emission = fragColor.rgb; material.alpha = fragColor.a; return material; } ` }, translucent: true }) class PolylineGlowMaterial extends MaterialProperty { constructor(options = {}) { super(options) } getType (time) { return pLG } getValue (time, result) { if (!result) { result = {} } result.color = Cesium.Property.getValueOrUndefined(this._color, time) result.glowPower = Cesium.Property.getValueOrUndefined(this._glowPower, time) result.taperPower = Cesium.Property.getValueOrUndefined(this._taperPower, time) return result } equals (other) { return ( this === other || (other instanceof LineTrailMaterial && Cesium.Property.equals(this._color, other._color) && Cesium.Property.equals(this._glowPower, other._glowPower) && Cesium.Property.equals(this._taperPower, other._taperPower)) ) } } Object.defineProperties(PolylineGlowMaterial.prototype, { color: Cesium.createPropertyDescriptor('color'), glowPower: Cesium.createPropertyDescriptor('glowPower'), taperPower: Cesium.createPropertyDescriptor('taperPower'), }) export { PolyGradientMaterial, LineTrailMaterial, ArrowLineMaterialProperty, PolylineGlowMaterial }