cesium 半圆顶部凹陷效果

### Cesium 中实现半圆顶部凹陷的视觉效果 在 Cesium 中创建具有特定形状的效果（如半圆顶部凹陷），可以通过自定义几何体或使用 `Cesium.PolygonGeometry` 和 `Cesium.EllipseGeometry` 来实现。以下是具体的方法： #### 方法一：通过修改椭圆几何体 可以利用 `Cesium.EllipseGeometry` 创建一个完整的椭圆形，然后通过裁剪的方式移除不需要的部分来形成凹陷效果。 ```javascript // 定义椭圆参数 var ellipseOptions = { center: Cesium.Cartesian3.fromDegrees(-75.0, 40.0), // 圆心位置 semiMajorAxis: 100000.0, // 长轴长度 (单位米) semiMinorAxis: 50000.0, // 短轴长度 (单位米) extrudedHeight: 0 // 不设置高度拉伸 }; // 创建椭圆几何体 var ellipse = new Cesium.EllipseGeometry(ellipseOptions); // 将其转换为图形实例并添加到场景中 viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: ellipse, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5)) } }), appearance: new Cesium.PerInstanceColorAppearance() })); // 裁剪部分区域以模拟凹陷效果 var polygonHierarchy = { positions: [ Cesium.Cartesian3.fromDegrees(-75.0, 40.0), Cesium.Cartesian3.fromDegrees(-74.9, 40.0), Cesium.Cartesian3.fromDegrees(-74.9, 39.9), Cesium.Cartesian3.fromDegrees(-75.0, 39.9) ] }; var polygon = new Cesium.PolygonGeometry(polygonHierarchy); viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({geometry: polygon}), appearance: new Cesium.PerInstanceColorAppearance(), })); ``` 此代码片段展示了如何先绘制一个椭圆，再叠加一个多边形裁剪掉一部分，从而达到凹陷效果[^1]。 --- #### 方法二：基于顶点数组构建自定义几何体 如果需要更复杂的控制，可以直接定义一组顶点坐标并通过 `Cesium.Geometry` 构建自定义几何体。 ```javascript function createCustomShape() { var vertices = []; // 添加底部弧线上的点 for (var angle = Math.PI; angle >= 0; angle -= 0.1) { var x = Math.cos(angle) * 100000; var y = Math.sin(angle) * 50000; vertices.push(x, y, 0); // z 坐标设为零 } // 添加中间凹陷部分的额外点 vertices.push(80000, 20000, 0); // 自定义调整凹陷的位置和大小 vertices.push(20000, 20000, 0); // 使用这些顶点创建几何体 var customGeometry = new Cesium.Geometry({ attributes: { position: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.DOUBLE, componentsPerAttribute: 3, values: new Float64Array(vertices) }) }, indices: Cesium.IndexDatatype.createTypedArray(vertices.length / 3, []) }); viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: customGeometry }), appearance: new Cesium.PerInstanceColorAppearance({ flat: true, translucent: false, closed: true }) })); } createCustomShape(); ``` 这种方法允许完全自由地设计任何复杂形状，并且能够精确指定凹陷的具体形式[^2]。 --- #### 性能优化建议 当处理大量数据或者频繁更新时，应考虑以下几点： - **减少顶点数量**：对于简单的曲线，适当降低采样率即可满足需求。 - **缓存几何对象**：避免每次渲染都重新计算几何结构。 - **异步加载资源**：确保大模型不会阻塞主线程运行。 以上两种方式均可用于实现所需效果，开发者可根据实际项目需求选择合适方案。