实际上核心就是获取bloom对几个属性值进行设置
let viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: mapbox,
contextOptions: {
webgl: {
alpha: true
}
},
selectionIndicator: false,
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false, //是否显示点击要素之后显示的信息
fullscreenButton: false,
shouldAnimate: true //动画播放
});
//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)
//设置初始位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
});
//开启深度检测
for (let i = 0; i < 10; i++) {//buildingGeojson.features.length
let height = buildingGeojson.features[i].properties.floor * 3;
let geotype = buildingGeojson.features[i].geometry.type.toUpperCase();
let coordinates = buildingGeojson.features[i].geometry.coordinates;
if (geotype == 'POLYGON') {
//console.log(coordinates);
} else if (geotype == 'MULTIPOLYGON') {
for (let j = 0; j < coordinates.length; j++) {
for (let k = 0; k < coordinates[j].length; k++) {
let positions = [];
let positionWithoutH=[]
let positionSHU=[]
for (let l = 0; l < coordinates[j][k].length; l++) {
positions.push(coordinates[j][k][l][0]);
positions.push(coordinates[j][k][l][1]);
positions.push(height);
}
// positions.length=positions.length-3
viewer.entities.add({
name: 'Red wall at height',
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
material: new Cesium.ImageMaterialProperty({
image: getColorRamp([0.0, 1.0], true),
color: Cesium.Color.BLUE.withAlpha(0.99)
}),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 3,
}
});
//positions.length=positions.length-3
for(let i=0;i<positions.length;i=i+3){
positionWithoutH.push(positions[i])
positionWithoutH.push(positions[i+1])
positionWithoutH.push(0)
positionSHU.push(positions[i])
positionSHU.push(positions[i+1])
positionSHU.push(0)
positionSHU.push(positions[i])
positionSHU.push(positions[i+1])
positionSHU.push(positions[i+2])
}
viewer.entities.add({
name: '橙色多边形',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(positions),
width : 5,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.3,
color : Cesium.Color.BLUE.withAlpha(0.7),
})
}
});
//console.log(positionSHU)
positionSHU.length=positionSHU.length-6
// positions.map((v,index)=> {
// if((index+1)%3==0){
// v=0
// }
// positionWithoutH.push(v)
// })
viewer.entities.add({
name: '橙色多边形',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(positionWithoutH),
width : 5,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.9,
color : Cesium.Color.BLUE.withAlpha(0.7),
})
}
});
// viewer.entities.add({
// name: '橙色多边形',
// polyline : {
// positions : Cesium.Cartesian3.fromDegreesArrayHeights(positionSHU),
// width : 5,
// material : new Cesium.PolylineGlowMaterialProperty({
// glowPower : 0.9,
// color : Cesium.Color.BLUE.withAlpha(0.7),
// })
// }
// });
}
}
}
}
viewer.zoomTo(viewer.entities);
// 亮度设置
var stages = viewer.scene.postProcessStages;
viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
viewer.scene.brightness.enabled = true;
viewer.scene.brightness.uniforms.brightness = Number(2);
var scene=viewer.scene
// var flashlight = new Cesium.DirectionalLight({
// direction : scene.camera.directionWC // Updated every frame
// });
// scene.light = flashlight;
// scene.globe.dynamicAtmosphereLighting = false;
var viewModel = {
show : true,
glowOnly : false,
contrast : 120,
brightness : -0.3,
delta : -10.0,
sigma : 3.78,
stepSize : 5.0
};
function updatePostProcess() {
var bloom = viewer.scene.postProcessStages.bloom;
bloom.enabled = true;
bloom.uniforms.glowOnly = Boolean(viewModel.glowOnly);
bloom.uniforms.contrast = Number(viewModel.contrast);
bloom.uniforms.brightness = Number(viewModel.brightness);
bloom.uniforms.delta = Number(viewModel.delta);
bloom.uniforms.sigma = Number(viewModel.sigma);
bloom.uniforms.stepSize = Number(viewModel.stepSize);
}
updatePostProcess();
setInterval(()=>{
viewModel.delta+=0.5
updatePostProcess()
console.log("更改delta值")
},1000)
function getColorRamp(elevationRamp, isVertical = true) {
let ramp = document.createElement('canvas');
ramp.width = isVertical ? 1 : 100;
ramp.height = isVertical ? 100 : 1;
let ctx = ramp.getContext('2d');
let values = elevationRamp;
let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);
let v=0.2
let varr=0
for(let i=0;i<20;i++){
v=v-0.01
varr=varr+0.025
// console.log(varr,v)
grd.addColorStop(varr, 'rgba(137,242,245,'+v+')'); //white
}
for(let i=0;i<19;i++){
v=v+0.01
varr=varr+0.025
//console.log(varr,v)
grd.addColorStop(varr, 'rgba(137,242,245,'+v+')'); //white
}
// grd.addColorStop(0, 'rgba(0,0,206,0.3)'); //white
//
// grd.addColorStop(1, 'rgba(35,97,250,0.3)'); //white
ctx.globalAlpha = 0.3;
ctx.fillStyle = grd;
if (isVertical)
ctx.fillRect(0, 0, 1, 100);
else
ctx.fillRect(0, 0, 100, 1);
return ramp;
}