Your Name
2022-03-14 aaebe147d319e59a8b510ff4ce9271088a330732
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { Cesium } from "@/global";
import { Cartesian3_to_WGS84, createAnimateShapeByCenter} from "./utils";
 
export class Beams{
    constructor(map) {
        this.map = map;
        this.dataSource = new Cesium.CustomDataSource('beam');
        this.map.viewer.dataSources.add(this.dataSource);
        this.beams = [];
    }
 
    setVisible(visible) {
        this.dataSource.show = visible;
    }
 
    clear() {
        this.dataSource.entities.removeAll();
        this.beams = [];
    }
 
    remove(id) {
        const target = this.beams.filter(d => d.id === id)[0];
        if(target) {
            target.entities.forEach((entity) => {
                if(this.dataSource.entities.contains(entity)) {
                    this.dataSource.entities.remove(entity);
                }
            });
            this.beams = this.beams.filter(d => d.id !== id);
        }
    }
 
    /**
     * 添加光柱
     * @param {Object} wgs84Pos 
     * @param {Number} effectSize 
     * @param {Object} option
     */
    add(id, wgs84Pos, option) {
        id = id || Cesium.createGuid();
        const {opacity, maxHeight, duration} = option || {};
        let effectSize = option.effectSize || 60;
        const position = Cesium.Cartesian3.fromDegrees(wgs84Pos.x, wgs84Pos.y);
        let entities = this.dataSource.entities;
        let s1 = 0.001,
            s2 = s1;
        let sStartFlog = true;
        let sRotation = 0;
        const getRotationValue = () => {
            sRotation += 0.05;
            return sRotation;
        };
        const effect1 = entities.add({
            position: position,
            ellipse: {
                // 直接使用semiMinorAxis,这个大小 会有一个闪白的材质 因为cesium材质默认是白色 所以我们先将大小设置为0
                semiMinorAxis: new Cesium.CallbackProperty(() => {
                    if (sStartFlog) {
                        s1 = s1 + effectSize / 20;
                        if (s1 >= effectSize) {
                            s1 = effectSize;
                        }
                    }
                    return s1;
                }, false),
                semiMajorAxis: new Cesium.CallbackProperty(() => {
                    if (sStartFlog) {
                        s2 = s2 + effectSize / 20;
                        if (s2 >= effectSize) {
                            s2 = effectSize;
                        }
                    }
                    return s2;
                }, false),
                material: new Cesium.ImageMaterialProperty({
                    image: `./images/wave1.png`,
                    repeat: new Cesium.Cartesian2(1, 1),
                    transparent: true,
                }),
                stRotation: new Cesium.CallbackProperty(getRotationValue, false),
            },
        });
        let effect2 = createAnimateShapeByCenter(
            Cartesian3_to_WGS84(position),
            {
                radius: effectSize || 60,
                opacity: opacity || 0.7,
                maxHeight: maxHeight || 60,
                minHeight: 0.001,
                duration: duration || 2000,
            },
            entities
        );
        effect2.show = false;
        setTimeout(() => {
            effect2.show = true;
        }, 300);
        this.beams.push({id, entities:[effect1, effect2]});
    }
}