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