cesium实现动态水位变化

### 实现 Cesium 中动态水位变化效果 为了实现在 Cesium 中展示动态水位变化的效果，可以通过结合地形高程数据以及自定义几何体来模拟水面的变化。以下是具体的实现方式： #### 创建并更新水面高度 通过监听滑动条事件改变全局变量 `waterLevel` 的值，并利用此值调整水面的高度。 ```javascript let waterLevel = 0; // 假设有一个 HTML 滑块用于控制水位 document.getElementById('slider').addEventListener('input', function(event) { waterLevel = parseFloat(event.target.value); updateWaterSurface(); }); ``` #### 查询指定位置的高程数据 使用 Cesium 提供的方法获取地面的真实海拔高度作为基础参考点[^2]。 ```javascript function getGroundHeight(longitude, latitude) { const terrainProvider = new Cesium.CesiumTerrainProvider({ url: 'https://assets.cesium.com/stk-terrain/tilesets/world/terrarium/' }); let position = Cesium.Cartographic.fromDegrees(longitude, latitude); return Cesium.sampleTerrainMostDetailed(terrainProvider, [position]).then(function (updatedPositions) { return updatedPositions[0].height; }); } ``` #### 绘制水面实体 根据当前设定的水位参数绘制覆盖整个视图范围内的矩形平面表示水面，并设置其透明度以便观察底下的地理特征[^3]。 ```javascript let viewer = new Cesium.Viewer('cesiumContainer'); async function createWaterSurface() { let rectangle = Cesium.Rectangle.fromDegrees( -72.0, 38.0, -69.0, 41.0 // 定义显示区域边界框 ); let west = Cesium.Math.toRadians(rectangle.west); let south = Cesium.Math.toRadians(rectangle.south); let east = Cesium.Math.toRadians(rectangle.east); let north = Cesium.Math.toRadians(rectangle.north); await Promise.all([ getGroundHeight(west, south), getGroundHeight(east, south), getGroundHeight(east, north), getGroundHeight(west, north) ]).then((heights) => { let averageHeight = heights.reduce((a, b) => a + b, 0) / heights.length; let waterEntity = viewer.entities.add({ name : "Dynamic Water Surface", availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start : Cesium.JulianDate.now(), stop : Cesium.JulianDate.addSeconds(Cesium.JulianDate.now(), 1000, new Cesium.JulianDate()) })]), polygon : { hierarchy : new Cesium.PolygonHierarchy(new Cesium.Cartesian3[] { Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-72.0, 38.0)), Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-69.0, 38.0)), Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-69.0, 41.0)), Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-72.0, 41.0)) }), material : new Cesium.ColorMaterialProperty(Cesium.Color.BLUE.withAlpha(0.5)), extrudedHeight : averageHeight + waterLevel } }); viewer.zoomTo(viewer.entities); function updateWaterSurface(){ waterEntity.polygon.extrudedHeight = averageHeight + waterLevel; } }); } createWaterSurface(); ``` 这段代码展示了如何在给定区域内创建一个随时间变化而浮动的蓝色半透明多边形来代表水面。每当用户移动滑块时都会触发一次重新计算和渲染过程，从而达到视觉上的动态效果[^1]。