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]});
|
}
|
}
|
