import * as Cesium from 'cesium'
|
|
export const RING_STYLES = [
|
{
|
inner: 0,
|
outer: 2000,
|
gradient: ['#FF6A57', '#A11806'],
|
alpha: 0.42,
|
outlineAlpha: 0.85,
|
innerRatio: 0.12,
|
},
|
]
|
|
export const MATERIAL_TYPE = 'RadialGradientMaterial'
|
export const DRONE_TRACK_MATERIAL_TYPE = 'DroneTrackFlowMaterial'
|
|
let materialRegistered = false
|
let droneTrackMaterialRegistered = false
|
let texturedVertexFormat = null
|
|
export const getTexturedVertexFormat = () => {
|
if (!texturedVertexFormat) {
|
texturedVertexFormat =
|
Cesium.MaterialAppearance?.MaterialSupport?.TEXTURED?.vertexFormat || Cesium.VertexFormat.POSITION_AND_ST
|
}
|
return texturedVertexFormat
|
}
|
|
export const registerRadialGradientMaterial = () => {
|
if (materialRegistered || !Cesium?.Material) return
|
materialRegistered = true
|
Cesium.Material._materialCache.addMaterial(MATERIAL_TYPE, {
|
fabric: {
|
type: MATERIAL_TYPE,
|
uniforms: {
|
color1: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
|
color2: new Cesium.Color(0.0, 0.0, 0.0, 1.0),
|
gamma: 1.7,
|
innerCutoff: 0.0,
|
},
|
source: `
|
uniform vec4 color1;
|
uniform vec4 color2;
|
uniform float gamma;
|
uniform float innerCutoff;
|
|
czm_material czm_getMaterial(czm_materialInput materialInput) {
|
czm_material material = czm_getDefaultMaterial(materialInput);
|
vec2 st = materialInput.st - vec2(0.5);
|
float t = clamp(length(st) * 2.0, 0.0, 1.0);
|
vec4 color = mix(color1, color2, t);
|
float ramp = smoothstep(innerCutoff, 1.0, t);
|
float shaped = pow(t, gamma);
|
float alpha = color.a * ramp * shaped;
|
material.diffuse = color.rgb;
|
material.alpha = alpha;
|
return material;
|
}
|
`,
|
},
|
translucent: () => true,
|
})
|
}
|
|
export const registerDroneTrackMaterial = () => {
|
if (droneTrackMaterialRegistered || !Cesium?.Material) return
|
droneTrackMaterialRegistered = true
|
Cesium.Material._materialCache.addMaterial(DRONE_TRACK_MATERIAL_TYPE, {
|
fabric: {
|
type: DRONE_TRACK_MATERIAL_TYPE,
|
uniforms: {
|
color: new Cesium.Color(1.0, 0.28, 0.18, 1.0),
|
speed: 4.0,
|
headWidth: 0.18,
|
glowPower: 1.6,
|
backgroundAlpha: 0.22,
|
},
|
source: `
|
uniform vec4 color;
|
uniform float speed;
|
uniform float headWidth;
|
uniform float glowPower;
|
uniform float backgroundAlpha;
|
|
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 flow = fract(st.s - time);
|
float head = smoothstep(headWidth, 0.0, flow) * smoothstep(0.0, headWidth, flow);
|
float alpha = mix(backgroundAlpha, 1.0, head);
|
vec3 rgb = color.rgb;
|
material.diffuse = rgb;
|
material.emission = rgb * alpha * glowPower;
|
material.alpha = color.a * alpha;
|
return material;
|
}
|
`,
|
},
|
translucent: () => true,
|
})
|
}
|
|
export const createRadialGradientMaterial = (color1, color2, options = {}) => {
|
registerRadialGradientMaterial()
|
return Cesium.Material.fromType(MATERIAL_TYPE, { color1, color2, ...(options || {}) })
|
}
|
|
export const createDroneTrackMaterial = options => {
|
registerDroneTrackMaterial()
|
return Cesium.Material.fromType(DRONE_TRACK_MATERIAL_TYPE, {
|
color: new Cesium.Color(1.0, 0.28, 0.18, 1.0),
|
speed: 4.0,
|
headWidth: 0.18,
|
glowPower: 1.6,
|
backgroundAlpha: 0.22,
|
...(options || {}),
|
})
|
}
|
|
export const buildCirclePositions = (center, radiusMeters, steps = 64) => {
|
const positions = []
|
const latRad = Cesium.Math.toRadians(center.latitude)
|
const metersToLat = 1 / 111320
|
const metersToLon = 1 / (111320 * Math.cos(latRad))
|
for (let i = 0; i <= steps; i += 1) {
|
const angle = Cesium.Math.toRadians((i / steps) * 360)
|
const dx = radiusMeters * Math.cos(angle)
|
const dy = radiusMeters * Math.sin(angle)
|
const lon = center.longitude + dx * metersToLon
|
const lat = center.latitude + dy * metersToLat
|
positions.push(Cesium.Cartesian3.fromDegrees(lon, lat))
|
}
|
return positions
|
}
|
|
export const addDeviceRings = (center, ringFillInstancesByStyle, ringOutlineInstancesByStyle, rangeMeters) => {
|
if (!ringFillInstancesByStyle) return
|
const centerPosition = Cesium.Cartesian3.fromDegrees(center.longitude, center.latitude, 0)
|
const vertexFormat = getTexturedVertexFormat()
|
RING_STYLES.forEach((ring, index) => {
|
if (!ringFillInstancesByStyle[index]) return
|
const outer = Number.isFinite(rangeMeters) && rangeMeters > 0 ? rangeMeters : ring.outer
|
ringFillInstancesByStyle[index].push(
|
new Cesium.GeometryInstance({
|
geometry: new Cesium.EllipseGeometry({
|
center: centerPosition,
|
semiMajorAxis: outer,
|
semiMinorAxis: outer,
|
vertexFormat,
|
}),
|
})
|
)
|
})
|
if (!ringOutlineInstancesByStyle) return
|
RING_STYLES.forEach((ring, index) => {
|
if (!ringOutlineInstancesByStyle[index]) return
|
const outer = Number.isFinite(rangeMeters) && rangeMeters > 0 ? rangeMeters : ring.outer
|
const positions = buildCirclePositions(center, outer)
|
const outlineAlpha = typeof ring.outlineAlpha === 'number' ? ring.outlineAlpha : 0.8
|
ringOutlineInstancesByStyle[index].push(
|
new Cesium.GeometryInstance({
|
geometry: new Cesium.GroundPolylineGeometry({
|
positions,
|
width: 2,
|
}),
|
attributes: {
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
Cesium.Color.fromCssColorString(ring.gradient[0]).withAlpha(outlineAlpha)
|
),
|
},
|
})
|
)
|
})
|
}
|
|
export class RadialGradientMaterialProperty {
|
constructor(color1, color2) {
|
this._definitionChanged = new Cesium.Event()
|
this.color1 = color1
|
this.color2 = color2
|
}
|
|
get isConstant () {
|
return true
|
}
|
|
get definitionChanged () {
|
return this._definitionChanged
|
}
|
|
getType () {
|
return MATERIAL_TYPE
|
}
|
|
getValue (time, result) {
|
const target = result || {}
|
target.color1 = this.color1
|
target.color2 = this.color2
|
return target
|
}
|
|
equals (other) {
|
return (
|
other instanceof RadialGradientMaterialProperty &&
|
Cesium.Color.equals(this.color1, other.color1) &&
|
Cesium.Color.equals(this.color2, other.color2)
|
)
|
}
|
}
|
