feat:无人机特效调整

shuishen

2026-01-31 1e2a40d91018e24eab93aeda7b12c43f156dc8fa

feat:无人机特效调整

 applications/drone-command/src/components/map-container/device-map-container.vue

@@ -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)