<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
.tools {
width: 400px;
height: 40px;
display: flex;
position: absolute;
top: 20px;
right: 40px;
/* border: 1px solid saddlebrown; */
z-index: 99;
justify-content: space-between;
}
.itemOne,.itemTwo,.itemThree {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
background-color: #59acff;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
user-select: none;
}
</style>
<title>近地天空盒</title>
</head>
<body>
<script>
function changeSkyBox(val) {
console.log(val);
switch(val){
case 'sunny':
sunnySkybox.setSkyBox(viewer)
break;
case 'blueSky':
blueSky.setSkyBox(viewer);
break;
case 'sunset':
sunsetSkybox.setSkyBox(viewer);
break;
}
}
</script>
<div id="container">
<div class="tools">
<h3 class="itemOne">
切换为晴天
</h3>
<h3 class="itemTwo">
切换为蓝天
</h3>
<h3 class="itemThree">
切换为黄昏
</h3>
</div>
</div>
<script type="module">
import SkyBoxOnGround from "/bmgl/nearskyBox/nearSkybox.js";
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
});
// 是否支持图像渲染像素化处理
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//开启抗锯齿,让图像更加顺滑
viewer.scene.postProcessStages.fxaa.enabled = true;
// 设置镜头位置
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
104.21901681921379,
30.81504373849697,
58.877721653410255
),
orientation: {
heading: 1.431365105237047,
pitch: -0.14143803486961604,
roll: 6.273892153001107,
},
});
viewer.scene.globe.enableLighting = false; //隐藏太阳
viewer.shadows = false;
viewer.scene.sun.show = false; //或者viewer.scene.sun.destroy();
viewer.scene.moon.show = false; //隐藏月亮
viewer.scene.skyAtmosphere.show = false; //大气圈
viewer.scene.fog.enable = false; //雾
// 晴朗
let sunnySkybox = new SkyBoxOnGround({
sources: {
positiveX: "/bmgl/nearskyBox/sunny/rightav9.jpg",
negativeX: "/bmgl/nearskyBox/sunny/leftav9.jpg",
positiveY: "/bmgl/nearskyBox/sunny/frontav9.jpg",
negativeY: "/bmgl/nearskyBox/sunny/backav9.jpg",
positiveZ: "/bmgl/nearskyBox/sunny/topav9.jpg",
negativeZ: "/bmgl/nearskyBox/sunny/bottomav9.jpg",
},
});
// 黄昏
let sunsetSkybox = new SkyBoxOnGround({
sources: {
positiveX: "/bmgl/nearskyBox/sunset/SunSetRight.png",
negativeX: "/bmgl/nearskyBox/sunset/SunSetLeft.png",
positiveY: "/bmgl/nearskyBox/sunset/SunSetFront.png",
negativeY: "/bmgl/nearskyBox/sunset/SunSetBack.png",
positiveZ: "/bmgl/nearskyBox/sunset/SunSetUp.png",
negativeZ: "/bmgl/nearskyBox/sunset/SunSetDown.png",
},
});
// 蓝天
let blueSky = new SkyBoxOnGround({
sources: {
positiveX: "/bmgl/nearskyBox/bluesky/Right.jpg",
negativeX: "/bmgl/nearskyBox/bluesky/Left.jpg",
positiveY: "/bmgl/nearskyBox/bluesky/Front.jpg",
negativeY: "/bmgl/nearskyBox/bluesky/Back.jpg",
positiveZ: "/bmgl/nearskyBox/bluesky/Up.jpg",
negativeZ: "/bmgl/nearskyBox/bluesky/Down.jpg",
},
});
// dawmSkybox.setSkyBox(viewer);
blueSky.setSkyBox(viewer);
document.querySelector(".itemOne").addEventListener("click",function(){
sunnySkybox.setSkyBox(viewer);
})
document.querySelector(".itemTwo").addEventListener("click",function(){
blueSky.setSkyBox(viewer);
})
document.querySelector(".itemThree").addEventListener("click",function(){
sunsetSkybox.setSkyBox(viewer);
})
</script>
</body>
</html>
源码