效果
effect.gif
代碼
參考了網(wǎng)絡(luò)上一些其他特效，發(fā)現(xiàn)自建光效Property實(shí)現(xiàn)起來過程繁瑣，還受到Cesium版本的限制粥帚，效果也沒有想象的好。就按照自己的想象做了這個(gè)效果限次，犧牲了性能芒涡，但看起來自己還挺滿意。
/**
* @author: citrusrlia@foxmail.com
* @description: 點(diǎn)擊動(dòng)態(tài)光效
* @param {viewer:Object}
* @return {*}
*/
let lightEffect = {
viewer: null,
handler: null,
params: {
isConstant: false,
startTime: 0,
startAxis: 0,
maxendAxis: 50
},
init(viewer) {
this.viewer = viewer;
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
this.setEffect();
},
setEffect() {
let that = this;
this.handler.setInputAction(e => {
let pickPosition = that.viewer.scene.camera.pickEllipsoid(e.position);
that.params.startTime = Cesium.JulianDate.now();
that.viewer.entities.removeById("lightEffect");
let myCallback = new Cesium.CallbackProperty((time, result) => {
let myAxis =
that.params.startAxis +
100 *
Cesium.JulianDate.secondsDifference(
Cesium.JulianDate.now(),
that.params.startTime
);
if (myAxis > that.params.maxendAxis) {
that.viewer.entities.removeById("lightEffect");
}
return myAxis;
}, that.params.isConstant);
that.viewer.entities.add({
id: "lightEffect",
ellipse: {
clampToGround: true, // 與outline無法一起啟用
semiMinorAxis: myCallback,
semiMajorAxis: myCallback,
material: Cesium.Color.WHITE.withAlpha(0.3),
},
position: pickPosition
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
};
export default lightEffect;
使用方式
傳入當(dāng)前viewer即可
import lightEffect from "lightEffect"
lightEffect.init(viewer)
