| | |
| | | |
| | | 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' |
| | |
| | | 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() |
| | |
| | | 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) |
| | |
| | | |
| | | const loadAggregation = async () => { |
| | | try { |
| | | const res = await cockpitAggregationApi({ |
| | | const res = await newCockpitAggregationApi({ |
| | | effectiveRangeKmIsNotNull: 1 |
| | | }) |
| | | renderAggregation(res?.data?.data ?? []) |