闭合路径修复
通过增加额外点确保路径首尾相接，彻底解决缺口问题
透明渐变效果
使用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>关键技术点
1. 路径闭合算法
通过将循环次数从 i < numPoints 改为 i <= numPoints，生成65个点而非64个，确保首尾相接。
2. 透明渐变实现
使用RGBA颜色模式 (rgba(0, 255, 0, 1) → rgba(0, 255, 0, 0)) 实现平滑过渡。
3. 材质优化
启用材质透明通道 transparent: true，并通过color属性叠加整体透明度效果。
参数调整指南
颜色修改
修改gradient.addColorStop中的颜色值改变基础色。
高度调整
调整maximumHeights改变墙高度。
尺寸控制
修改radius改变圆环直径。
平滑度优化
调整numPoints改变圆环平滑度（推荐≥64）。