吉安感知网项目-前端
罗广辉
2026-01-27 8a7fb9a519cae32d38ba66058d243aa7e6b6aeb2
applications/drone-command/src/components/map-container/device-map-materials.js
@@ -1,6 +1,15 @@
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'
@@ -26,15 +35,25 @@
         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;
            }
         `,
@@ -82,9 +101,9 @@
   })
}
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 => {
@@ -115,18 +134,19 @@
   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,
            }),
         })
@@ -135,7 +155,9 @@
   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({
@@ -144,7 +166,7 @@
            }),
            attributes: {
               color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                  Cesium.Color.fromCssColorString(ring.gradient[0]).withAlpha(0.8)
                  Cesium.Color.fromCssColorString(ring.gradient[0]).withAlpha(outlineAlpha)
               ),
            },
         })