| | |
| | | import * as Cesium from 'cesium' |
| | | |
| | | export const RING_STYLES = [{ inner: 0, outer: 2000, gradient: ['#FF361C', '#360B00'] }] |
| | | 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' |
| | |
| | | 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 = color.a; |
| | | material.alpha = alpha; |
| | | return material; |
| | | } |
| | | `, |
| | |
| | | }) |
| | | } |
| | | |
| | | export const createRadialGradientMaterial = (color1, color2) => { |
| | | export const createRadialGradientMaterial = (color1, color2, options = {}) => { |
| | | registerRadialGradientMaterial() |
| | | return Cesium.Material.fromType(MATERIAL_TYPE, { color1, color2 }) |
| | | return Cesium.Material.fromType(MATERIAL_TYPE, { color1, color2, ...(options || {}) }) |
| | | } |
| | | |
| | | export const createDroneTrackMaterial = options => { |
| | |
| | | return positions |
| | | } |
| | | |
| | | export const addDeviceRings = (center, ringFillInstancesByStyle, ringOutlineInstancesByStyle) => { |
| | | 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: ring.outer, |
| | | semiMinorAxis: ring.outer, |
| | | semiMajorAxis: outer, |
| | | semiMinorAxis: outer, |
| | | vertexFormat, |
| | | }), |
| | | }) |
| | |
| | | if (!ringOutlineInstancesByStyle) return |
| | | RING_STYLES.forEach((ring, index) => { |
| | | if (!ringOutlineInstancesByStyle[index]) return |
| | | const positions = buildCirclePositions(center, ring.outer) |
| | | 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({ |
| | |
| | | }), |
| | | attributes: { |
| | | color: Cesium.ColorGeometryInstanceAttribute.fromColor( |
| | | Cesium.Color.fromCssColorString(ring.gradient[0]).withAlpha(0.8) |
| | | Cesium.Color.fromCssColorString(ring.gradient[0]).withAlpha(outlineAlpha) |
| | | ), |
| | | }, |
| | | }) |