Cesium 多边形网格填充面

### Cesium 中实现多边形网格表面填充的方法

在 Cesium 中，可以通过 `GridMaterialProperty` 来设置几何对象的材质属性来创建带有网格效果的多边形。具体来说，可以利用 `PolygonGraphics` 或者更底层的 `Primitive` 方式来进行绘制。

#### 使用 PolygonGraphics 方法

对于较为简单的场景，可以直接通过配置 `material` 属性为 `GridMaterialProperty` 的实例来快速应用网格样式到一个多边形上：

const polygon = viewer.entities.add({
  name : 'A grid material on a polygon',
  polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray([
      -72.0, 40.0,
      -70.0, 40.0,
      -70.0, 38.0,
      -72.0, 38.0
    ]),
    material : new Cesium.GridMaterialProperty() // 设置材料为网格状
  }
});
viewer.zoomTo(polygon);

此代码片段展示了如何定义一个四角形区域并为其指定网格样式的材质[^1]。

#### 使用 Primitive API 进行高级定制

如果需要更加灵活地控制渲染细节，则可以选择基于原始图形 (Primitives) 的方式进行开发。这种方式提供了更大的灵活性，允许开发者自定义顶点着色器和片元着色器等内容，从而达到更好的性能优化以及特殊视觉效果的支持。

以下是采用 Primitives 实现带网格纹理的多边形的一个简化例子：

// 定义多边形边界坐标数组
let positions = [
  ...Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-72.0, 40.0)),
  ...Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-70.0, 40.0)),
  ...Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-70.0, 38.0)),
  ...Cesium.Cartographic.toCartesian(Cesium.Cartographic.fromDegrees(-72.0, 38.0))
];

// 创建缓冲区存储位置数据
const positionBuffer = this.viewer.scene.context.createVertexBuffer(
  new Float64Array(positions),
  3 * Float64Array.BYTES_PER_ELEMENT);

// 构建几何体描述符
const geometryInstance = new Cesium.GeometryInstance({
  geometry: new Cesium.PolygonGeometry({
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    polygonHierarchy: new Cesium.PolygonHierarchy(new Cesium.Cartesian3[] { /* 边界 */ }),
    stRotation: Math.PI / 4.0
  })
});

// 应用 GridMaterialProperty 到 primitive 对象中
const appearance = new Cesium.MaterialAppearance({
  material: new Cesium.Material({
    fabric: {
      type: "Grid",
      uniforms: {}
    },
    translucent: false
  })
});

// 将上述组件组合成最终可渲染的对象
const primitive = new Cesium.Primitive({
  geometryInstances: geometryInstance,
  appearance: appearance
});

scene.primitives.add(primitive);

这段 TypeScript 代码说明了怎样构建一个多边形，并将其外观设为具有网格图案的形式[^3]。