云海效果
关键引入文件：
- 第一步：引入框架地图关键文件
- https://mhc.ixiera.com/mhc/main_min.js
- https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js
- https://mhc.ixiera.com/mhc/Cesium3DTile.js
- 第二步：引入动态立体墙绘制文件
- https://mhc.ixiera.com/mhc/mchmap/oceanSky/js/oceanSky.min.js
1. 初始化
const ocean = createOceanSky(viewer,options);
2. 参数说明
一、构造函数参数
| 参数 | 数据类型 | 是否必填 | 说明 |
| viewer | Object | 必填 | Cesium Viewer 实例 |
| options | Object | 选填 | 全局配置参数（详见下方表格） |
二、options 配置参数
| 参数 | 数据类型 | 是否必填 | 默认值 | 说明 |
| skyBoxImages | Object | 选填 | 内置默认图片 | 自定义天空盒图片对象，格式：{ positiveX, negativeX, positiveY, negativeY, positiveZ, negativeZ } |
| autoEnable | boolean | 选填 | true | 是否自动启用海洋效果 |
| loadTerrain | boolean | 选填 | true | 是否自动加载全球地形（含水效支持） |
3. API 方法
| 方法名 | 参数 | 返回值 | 说明 |
| enable() | 无 | void | 启用海洋效果（天空盒 + 水效） |
| disable() | 无 | void | 禁用海洋效果，恢复默认天空盒并关闭水效 |
| toggle() | 无 | void | 切换海洋效果的启用/禁用状态 |
| destroy() | 无 | void | 销毁实例，释放 GPU 资源（纹理、着色器、缓冲区等） |
4. 使用示例
4.1 基础使用（自动启用）
// 引入 oceanSky.js 后，一行代码完成初始化
const ocean = createOceanSky(viewer);
// 默认 autoEnable: true，海洋效果已自动开启
4.2 手动控制（禁用自动启用）
// 不自动启用，后续通过按钮或逻辑手动控制
const ocean = createOceanSky(viewer, {
autoEnable: false,
loadTerrain: true
});
// 某个按钮点击后启用
document.getElementById('btnEnable').addEventListener('click', function() {
ocean.enable();
});
4.3 切换与状态查询
// 切换效果
ocean.toggle();
// 查询当前状态
if (ocean.isEnabled()) {
console.log(' 海洋效果已启用');
} else {
console.log(' 海洋效果已禁用');
}
4.4 自定义天空盒图片
// 使用自定义图片替换默认天空盒
const customSky = {
positiveX: '**.jpg',
negativeX: '**.jpg',
positiveY: '**.jpg',
negativeY: '**.jpg',
positiveZ: '**.jpg',
negativeZ: '**.jpg'
};
const ocean = createOceanSky(viewer, {
skyBoxImages: customSky,
autoEnable: true
});
4.5 销毁与资源释放
// 当页面卸载或不再需要海洋效果时，调用 destroy 释放 GPU 内存
ocean.destroy();
// 注意：销毁后如需重新启用，必须重新调用 createOceanSky 创建新实例
// const newOcean = createOceanSky(viewer);
5. 完整代码实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Cesium 海洋天空盒封装示例</title>
<!-- 1. 引入 Cesium 及相关依赖 -->
<script src="https://mhc.ixiera.com/mhc/main.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
<!-- 2. 引入封装好的海洋天空盒模块（自包含 SkyBoxOnGround + 管理逻辑） -->
<script src="https://mhc.ixiera.com/mhc/mchmap/oceanSky/js/oceanSky.min.js">
</script>
<style>
html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.btnsBox {position: fixed; top: 10px; left: 10px; z-index: 1000;display: flex; gap: 6px; flex-wrap: wrap; max-width: 900px;}
.btnsBox button { background-color: #fff; border-radius: 4px; color: #333; line-height: 28px; font-size: 11px; padding: 0 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="btnsBox">
<button id="btnToggle"> 切换海洋效果</button>
<button id="btnEnable"> 启用</button>
<button id="btnDisable"> 禁用</button>
</div>
<script>
// ---------- 3. 初始化 Cesium Viewer ----------
MchCesium.init('cesiumContainer', true);
const viewer = MchCesium.viewer;
// 镜头定位天津渤海
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(120.570007,22.201867, 2000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-5),
roll: 0
}
});
// ---------- 4. 一行代码启用海洋效果 ----------
// createOceanSky(viewer) 返回 { enable, disable, toggle, isEnabled, destroy }
// 默认 autoEnable = true，即自动启用
const ocean = createOceanSky(viewer, {
// 可选：自定义天空盒图片路径（不传则使用默认）
// skyBoxImages: { ... },
// 自动启用（默认 true）
autoEnable: true,
// 是否加载地形（默认 true）
loadTerrain: true,
});
// ---------- 5. 绑定 UI 控制 ----------
document.getElementById('btnToggle').addEventListener('click', function() {
ocean.toggle();
});
document.getElementById('btnEnable').addEventListener('click', function() {
ocean.enable();
});
document.getElementById('btnDisable').addEventListener('click', function() {
ocean.disable();
});
</script>
</body>
</html>
6. 效果展示
Demo地址：https://mhc.ixiera.com/mhc/mchmap/oceanSky/index.html
返回顶部
热线电话
微信
扫一扫