Cesium 透明渐变墙解决方案

news2025/10/31 9:43:20

闭合路径修复

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

透明渐变效果

使用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>