<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<!-- elementui -->
<script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
<link
rel="stylesheet"
href="http://bigemap.com/offline_data/newjunbiao/elementui.css"
/>
<script src="/offline_data/dat.gui.min.js"></script>
<title>后處理效果</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
width: 200px;
height: 40px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
let effect = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
bmgl.Config.HTTP_URL =
"http://ua.bigemap.com:30081/bmsdk/";
viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-tian-w-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
this.initGui();
},
initGui() {
var _this = this;
gui = new dat.GUI();
// console.log(gui.domElement,"dom");
let mydom = gui.domElement;
mydom.style.position = "absolute";
mydom.style.top = "40px";
mydom.style.left = "40px";
const folder1 = gui.addFolder("后處理效果切換", {
closed: false,
});
var guiControl = {
stage: null,
};
folder1.open();
folder1
.add(guiControl, "stage", {
黑白效果: "1",
泛光效果: "2",
模糊效果: "3",
夜視效果: "4",
灰白效果: "5",
})
.onChange((value) => {
// console.log("myValue", value);
switch (value) {
case "1": {
_this.createStage(
"BrightnessStage"
);
break;
}
case "2": {
_this.createStage("Bloom");
break;
}
case "3": {
_this.createStage("Blur");
break;
}
case "4": {
_this.createStage("NightVision");
break;
}
case "5": {
_this.createStage(
"FilmicTonemapping"
);
break;
}
}
viewer.scene.requestRender();
});
},
createStage(val) {
if (effect != null && effect != undefined) {
viewer.scene.postProcessStages.remove(effect);
console.log("aaaa");
}
switch (val) {
case "BrightnessStage":
effect =
bmgl.PostProcessStageLibrary.createBrightnessStage();
viewer.scene.postProcessStages.add(effect);
break;
case "Bloom":
effect =
bmgl.PostProcessStageLibrary.createBloomStage();
viewer.scene.postProcessStages.add(effect);
break;
case "Blur":
effect =
bmgl.PostProcessStageLibrary.createBlurStage();
viewer.scene.postProcessStages.add(effect);
break;
case "NightVision":
effect =
bmgl.PostProcessStageLibrary.createNightVisionStage();
viewer.scene.postProcessStages.add(effect);
break;
case "FilmicTonemapping":
effect =
bmgl.PostProcessStageLibrary.createFilmicTonemappingStage();
viewer.scene.postProcessStages.add(effect);
break;
}
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>