当前位置：首页 > news >正文

Cesium 透明渐变墙解决方案

news 来源：原创 2025/5/29 12:10:14

闭合路径修复

通过增加额外点确保路径首尾相接

透明渐变效果

使用RGBA颜色模式实现从完全不透明到完全透明的平滑渐变

参数可调性

提供多个可调参数，轻松自定义颜色、高度和圆环尺寸

完整代码实现

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body><div id="cesiumContainer" style="width: 100%; height: 100vh;"></div><script>var viewer = new Cesium.Viewer('cesiumContainer');// 生成闭合圆形路径（修复缺口）var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);var tangentPlane = new Cesium.EllipsoidTangentPlane(center);var east = tangentPlane.xAxis;var north = tangentPlane.yAxis;var radius = 1000;var numPoints = 64;var positions = [];// 闭合路径：多生成一个点连接首尾for (var i = 0; i <= numPoints; i++) {var angle = (i / numPoints) * Math.PI * 2;var x = radius * Math.cos(angle);var y = radius * Math.sin(angle);var point = Cesium.Cartesian3.add(center,Cesium.Cartesian3.add(Cesium.Cartesian3.multiplyByScalar(east, x, new Cesium.Cartesian3()),Cesium.Cartesian3.multiplyByScalar(north, y, new Cesium.Cartesian3()),new Cesium.Cartesian3()),new Cesium.Cartesian3());positions.push(point);}// 创建透明渐变材质（绿色渐变到透明）var canvas = document.createElement('canvas');canvas.width = 1;canvas.height = 256;var ctx = canvas.getContext('2d');var gradient = ctx.createLinearGradient(0, 0, 0, 256);// 使用RGBA颜色模式gradient.addColorStop(0, 'rgba(0, 255, 0, 1)');   // 底部不透明绿色gradient.addColorStop(1, 'rgba(0, 255, 0, 0)');   // 顶部完全透明ctx.fillStyle = gradient;ctx.fillRect(0, 0, 1, 256);var gradientMaterial = new Cesium.ImageMaterialProperty({image: canvas,transparent: true,  // 启用透明通道color: Cesium.Color.WHITE.withAlpha(0.8)  // 叠加颜色透明效果});// 创建墙实体var wallEntity = viewer.entities.add({position: center,wall: {positions: positions,minimumHeights: positions.map(() => 0),maximumHeights: positions.map(() => 50),material: gradientMaterial}});viewer.zoomTo(wallEntity);</script>
</body>
</html>