From 1e2a40d91018e24eab93aeda7b12c43f156dc8fa Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 31 Jan 2026 17:52:40 +0800
Subject: [PATCH] feat:无人机特效调整
---
applications/drone-command/src/components/map-container/device-map-container.vue | 96 +++++++++++++++++++++++++++++++++++++++--------
1 files changed, 79 insertions(+), 17 deletions(-)
diff --git a/applications/drone-command/src/components/map-container/device-map-container.vue b/applications/drone-command/src/components/map-container/device-map-container.vue
index 650d950..9e0b392 100644
--- a/applications/drone-command/src/components/map-container/device-map-container.vue
+++ b/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)
--
Gitblit v1.9.3