效果
effect.gif
代码
参考了网络上一些其他特效，发现自建光效Property实现起来过程繁琐，还受到Cesium版本的限制，效果也没有想象的好。就按照自己的想象做了这个效果，牺牲了性能，但看起来自己还挺满意。
/**
* @author: citrusrlia@foxmail.com
* @description: 点击动态光效
* @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;
使用方式
传入当前viewer即可
import lightEffect from "lightEffect"
lightEffect.init(viewer)
