作者：Zhouyp
目录
一、前言
SuperMap iClient3D for WebGL/WebGPU 2025 新增高度雾，增强三维场景的空间层次感和环境氛围，一起来看看效果和实现吧！
二、软件版本
SuperMap iClient3D for WebGL/WebGPU 2025(45995)
下载地址：SuperMap技术资源中心|为您提供全面的在线技术服务
三、核心代码
scene.fog.enabled = true; // 启用/关闭 雾
scene.fog.advanced = true; // 启用/关闭 高度雾
scene.fog.density = 0.15; // 高度雾的浓度
scene.fog.heightFalloff = 5;// 获取或设置高度雾的衰减系数，取值范围（0-10）值越大衰减效果越明显
scene.fog.color = SuperMap3D.Color.fromCssColorString('rgba(220, 141, 141, 1)');// 获取或设置高度雾的颜色，高度雾的颜色为与大气产生的雾的颜色混合。四、完整代码
粘贴下方代码到范例页面中点击运行按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>高度雾</title>
<link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
<link href="./style/vuecommon.css" rel="stylesheet">
<script src="./js/config.js"></script>
<script src="./js/layerTree/vue.global.js"></script>
<script src="./js/layerTree/naive-ui.min.js"></script>
<script src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head>
<body>
<div id="Container"></div>
<div class="vue-container" style="display: none;width: 500px;">
<div id="app">
<div class="panel-container">
<div class="panel-header">
<div class="panel-header-title">高度雾</div>
<span class="panel-header-close" id="close">X</span>
</div>
<!-- vue component content -->
<n-config-provider :theme-overrides="overridesTheme" :theme="darkTheme" style="margin-top: 20px;">
<n-scrollbar style="max-height: 520px;padding-right: 10px;" trigger="none">
<div class="row-item">
<span>高度雾</span>
<div style="width: 360px">
<n-switch v-model:value="state.useHeightFog" size="small" />
</div>
</div>
<div class="row-item">
<span>密度</span>
<div style="display: flex;">
<div class="slider-box" style="width: 280px; margin-left: 0px;">
<n-slider v-model:value="state.density" :min="0.01" :max="10.0" :step="0.01" />
</div>
<n-input-number v-model:value="state.density" style="width:60px" :min="0.01" :max="10"
:step="0.01" :focusable="false" :show-button="false">
</n-input-number>
</div>
</div>
<div class="row-item">
<span>衰减系数</span>
<div style="display: flex;">
<div class="slider-box" style="width: 280px; margin-left: 0px;">
<n-slider v-model:value="state.decay" :min="0.1" :max="20.0" :step="0.01" />
</div>
<n-input-number v-model:value="state.decay" style="width:60px" :min="0.1" :max="20"
:step="0.01" :focusable="false" :show-button="false">
</n-input-number>
</div>
</div>
<div class="row-item">
<span>颜色设置</span>
<div class="color-pick-box" style="width: 360px;">
<n-color-picker v-model:value="state.color" :render-label="
() => {
return '';
}
" size="small">
</n-color-picker>
</div>
</div>
</n-scrollbar>
</n-config-provider>
</div>
</div>
</div>
<div class="loading-container">
<div class="circle"></div>
</div>
<script type="module">
function onload(SuperMap3D) {
const viewer = new SuperMap3D.Viewer('Container', {
contextOptions: {
contextType: Number(2), // Webgl2:2 ; WebGPU:3
msaaLevel: 1,
},
timeline: true,
useSuperMapOIT: true
});
viewer.scenePromise.then(function (scene) {
init(SuperMap3D, scene, viewer);
});
}
function init(SuperMap3D, scene, viewer) {
viewer.resolutionScale = window.devicePixelRatio;
window.viewer = viewer;
console.log(SuperMap3D.version);
// 打开场景
var promise = scene.open(URL_CONFIG.SCENE_CBD);
SuperMap3D.when(promise, function (layers) {
})
document.querySelector('.loading-container').style.display = 'none';
document.querySelector('.vue-container').style.display = 'block';
// 初始化Vue组件
initVueComponents(scene, viewer);
}
// 初始化Vue组件
function initVueComponents(scene, viewer) {
// 对象解构
const { reactive, watch } = Vue;
const { darkTheme } = naive;
// 初始化变量
const state = reactive({
useHeightFog: false,
density: 0.15,
decay: 5,
color: "rgba(255,255,255,1)"
});
scene.globe.enableLighting = true; // 地形和大气启用光照
scene.highDynamicRange = true; // 建议打开高动态光照效果更好
scene.fog.density = 0.15; // 默认高度雾密度
scene.fog.heightFalloff = 5;// 默认高度雾 衰减系数
// 创建Vue示例
const App = {
setup() {
watch(() => state.useHeightFog,
(val) => {
scene.fog.advanced = Boolean(val); // 启用/关闭 高度雾
scene.fog.enabled = Boolean(val); // 启用/关闭 雾
}
);
watch(() => state.density,
(val) => {
scene.fog.density = Number(val); // 高度雾的浓度，取值范围为0-10
}
);
watch(() => state.decay,
(val) => {
scene.fog.heightFalloff = Number(val); //获取或设置高度雾的衰减系数，取值范围（0-10）值越大衰减效果越明显。
}
);
watch(() => state.color,
(val) => {
scene.fog.color = SuperMap3D.Color.fromCssColorString(val); //获取或设置高度雾的颜色，高度雾的颜色为与大气产生的雾的颜色混合。
}
);
return {
state,
darkTheme,
overridesTheme: { // 重写主题样式
common: {
primaryColor: "rgba(52, 153, 229, 1)",
primaryColorHover: "rgba(52, 153, 229, 1)",
primaryColorPressed: "rgba(255,255,255,0.85)",
primaryColorSuppl: "rgba(255,255,255,0.45)",
},
Button: {
fontSizeMedium: "14px", // 底部操作按钮：宽高和文字大小自适应浏览器
textColor: "rgba(255,255,255,0.65)", // 设置默认n-button全局样式
border: "1px solid rgba(255,255,255,0.65)",
textColorHover: "#5EB7F2",
borderHover: "1px solid #5EB7F2",
textColorPressed: "#2276BF",
borderPressed: "1px solid #2276BF",
},
Tabs: {
barColor: "#3499e5", // tabs底部横条颜色
tabFontSizeMedium: "14px", // tabs标签文字大小 - 兼容移动端样式
},
ColorPicker: {
border: "none", // color-pick颜色条去掉边框
},
Divider: {
color: "rgba(255, 255, 255, 0.15)", // 分割条颜色
},
Checkbox: {
colorChecked: "#3499E5",
checkMarkColor: "#fff",
},
Slider: {
fillColor: "#3499E5",
fillColorHover: "#3499E5",
handleSize: "12px",
},
Switch: {
railColorActive: "#3499E5",
},
Select: {
color: "rgba(255, 255, 255, 0.15)"
}
},
}
}
}
const app = Vue.createApp(App);
app.use(naive);
app.mount('#app');
}
if (typeof SuperMap3D !== 'undefined') {
window.startupCalled = true;
onload(SuperMap3D);
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
