加载-地形
1.构造方法：
const terrainManager = new MchCesium.TerrainManager(viewer);
2.参数说明：
viewer：Cesium创建的view实例。
3.addTerrain创建地形实例
terrainManager.addTerrain(id,option);
参数说明：
id {string}实例唯一标识
option{object}配置项：
* url{string}自定义地形URL（必填）
* requestVertexNormals{Boolean} 启用地形光影效果（默认false）
* requestWaterMask{Boolean} 启用水体效果（默认false）
* terrainExaggeration{Number} 应用地形夸张系数(非必填)
4.setTerrain地形切换控制
terrainManager.setTerrain(id);
参数说明：
id {string}实例唯一标识；
5.toggleVisibility地形可见性控制
terrainManager.toggleVisibility(visible)
参数说明：
id{string}实例唯一标识
visible{Boolean}显示状态，true:显示 / false：隐藏；
说明：当前自定义地形隐藏后，则显示默认地形
6.dispose全部清理
terrainManager.dispose();
说明：清除所有自定义地形后，则显示默认地形
7.代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="cesium开发加载地形" /> <meta name="keywords" content="microbee-http,软件开发框架,cesium,地形" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <title>加载地形-cesium</title> <style> body { position: relative; } .btnbar { position: absolute; top: 10px; left: 10px; } button { margin: 10px; border: solid 1px #ccc; border-radius: 3px; padding: 5px 10px; } </style> </head> <body> <div id="cesiumContainer"></div> <div class="btnbar"> <button onclick="hide()">隐藏自定义地形</button> <button onclick="show()">显示自定义地形</button> </div> <script> const view = MchCesium.init('cesiumContainer', true); // 创建地形管理器 const terrainManager = new MchCesium.TerrainManager(MchCesium.viewer); var terrainUrl = "http://127.0.0.1/terrain-ghcr.io"; // 四川 // 加载地形 - 四川省 terrainManager.addTerrain('terrain-Demo1', { url: terrainUrl, requestVertexNormals: true, requestWaterMask: true, terrainExaggeration: 5 }).then(terrain => { // console.log(terrain) // 加载完成 - 地形切换 terrainManager.setTerrain('terrain-Demo1'); // 聚焦四川 MchCesium.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 15000), // 成都中心点 orientation: { pitch: -Math.PI / 4 } // 45°倾角增强地形立体感 }); }); // 隐藏自定义地形 function hide() { terrainManager.toggleVisibility(false) } // 显示自定义地形 function show() { terrainManager.toggleVisibility(true) } </script> </body> </html>
8.效果展示：
Demo地址：
返回顶部
热线电话
微信
扫一扫