吉安感知网项目-前端
罗广辉
2026-02-02 8173d75efc2390971d4609fc9a4eba35e2cfdfc9
applications/drone-command/src/components/map-container/device-map-container.vue
@@ -53,7 +53,7 @@
import { fwDefenseSceneManageListApi } from '@/views/areaManage/sceneManage/sceneManageApi'
import { cockpitAggregationApi } from '@/api/dataCockpit'
import { newCockpitAggregationApi } from '@/api/dataCockpit'
import layerControlIcon from '@/assets/images/dataCockpit/layerControl.png'
import equipmentIcon from '@/assets/images/dataCockpit/map/equipment.png'
import offlineEquipmentIcon from '@/assets/images/dataCockpit/map/offline-equipment.png'
@@ -132,9 +132,9 @@
let favoritePulseElapsed = 0
const favoritePulseEntities = []
const pulseBaseColor = Cesium.Color.fromCssColorString('#FF3B30')
const PULSE_MIN_RADIUS_M = 60
const PULSE_MAX_RADIUS_M = 180
const PULSE_DURATION_S = 1.6
const PULSE_MIN_RADIUS_M = 2
const PULSE_MAX_RADIUS_M = 30
const PULSE_DURATION_S = 1.4
const detailVisible = ref(true)
const clusterVisible = ref(false)
const countyCenterMap = new Map()
@@ -217,31 +217,93 @@
   return canvas
}
class PulseSphereMaterialProperty {
   constructor(color, speed = 1.2, bands = 3.0, softness = 0.18) {
      this._definitionChanged = new Cesium.Event()
      this.color = color
      this.speed = speed
      this.bands = bands
      this.softness = softness
   }
   get isConstant() {
      return true
   }
   get definitionChanged() {
      return this._definitionChanged
   }
   getType() {
      return 'PulseSphereMaterial'
   }
   getValue(_time, result = {}) {
      result.color = this.color
      result.time = (performance.now() / 1000) * this.speed
      result.bands = this.bands
      result.softness = this.softness
      return result
   }
   equals(other) {
      return (
         other instanceof PulseSphereMaterialProperty &&
         Cesium.Color.equals(this.color, other.color) &&
         this.speed === other.speed &&
         this.bands === other.bands &&
         this.softness === other.softness
      )
   }
}
let pulseSphereMaterial = null
const getPulseSphereMaterial = () => {
   if (pulseSphereMaterial) return pulseSphereMaterial
   Cesium.Material._materialCache.addMaterial('PulseSphereMaterial', {
      fabric: {
         type: 'PulseSphereMaterial',
         uniforms: {
            color: pulseBaseColor.withAlpha(0.45),
            time: 0,
            bands: 3.0,
            softness: 0.18,
         },
         source: `
            czm_material czm_getMaterial(czm_materialInput materialInput)
            {
               czm_material material = czm_getDefaultMaterial(materialInput);
               vec3 normalEC = normalize(materialInput.normalEC);
               vec3 viewEC = normalize(-materialInput.positionToEyeEC);
               float ndv = max(dot(normalEC, viewEC), 0.0);
               float fresnel = pow(1.0 - ndv, 1.6);
               float wave = sin((ndv * bands + time) * 6.2831853);
               float ring = smoothstep(-softness, softness, wave);
               float alpha = (ring * 0.6 + fresnel * 0.4) * color.a;
               material.diffuse = color.rgb;
               material.alpha = alpha;
               return material;
            }
         `,
      },
      translucent: () => true,
   })
   pulseSphereMaterial = new PulseSphereMaterialProperty(pulseBaseColor.withAlpha(0.45), 1.1, 3.2, 0.22)
   return pulseSphereMaterial
}
const createFavoritePulseEntity = (billboard) => {
   if (!viewer || !billboard) return
   const material = new Cesium.ImageMaterialProperty({
      image: getPulseCanvas(),
      transparent: true,
   })
   const material = getPulseSphereMaterial()
   const pulse = {
      material,
      offset: Math.random() * PULSE_DURATION_S,
      entity: null,
   }
   const getPulseHeight = () => {
      const pos = getBillboardPosition(billboard)
      if (!pos) return 0
      const carto = Cesium.Cartographic.fromCartesian(pos)
      return carto?.height ?? 0
   const getPulseRadius3D = () => {
      const radius = getPulseRadius(pulse)
      return new Cesium.Cartesian3(radius, radius, radius)
   }
   pulse.entity = viewer.entities.add({
      position: new Cesium.CallbackProperty(() => getBillboardPosition(billboard), false),
      ellipse: {
         semiMajorAxis: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
         semiMinorAxis: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
      ellipsoid: {
         radii: new Cesium.CallbackProperty(() => getPulseRadius3D(), false),
         material,
         height: new Cesium.CallbackProperty(() => getPulseHeight(), false),
         heightReference: Cesium.HeightReference.NONE,
      },
   })
   favoritePulseEntities.push(pulse)
@@ -1233,7 +1295,7 @@
const loadAggregation = async () => {
   try {
      const res = await cockpitAggregationApi({
      const res = await newCockpitAggregationApi({
         effectiveRangeKmIsNotNull: 1
      })
      renderAggregation(res?.data?.data ?? [])