在cesium中绘制带边框的多边形并设置贴地后，边框不展示，该怎么配置呢？

Question

当我使用以下代码绘制多边形：

const entity = new Cesium.Entity({
  id: id,
  polygon: {
    hierarchy: new Cesium.CallbackProperty(() => {
      return new Cesium.PolygonHierarchy(positions);
    }, false),
    outline: true,
    outlineColor: Cesium.Color.YELLOW,
    material: Cesium.Color.YELLOW.withAlpha(0.5),
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
  }
});
this.viewer.entities.add(entity)

按照文档说，需要设置高度，但是设置了高度后heightReference:只能设置为Cesium.HeightReference.NONE，
贴地效果没了，绘制的图像会因为高度的原因，出现被遮挡的情况，
后面我通过曲线救国的方式完成了该功能：在绘制不规则面时，也绘制一个相同坐标的不规则线条，在线条的末尾动态插入起始的坐标，以展示为闭合的效果。如下：

const entity = new Cesium.Entity({
  id: id,
  polygon: {
    hierarchy: new Cesium.CallbackProperty(() => {
      return new Cesium.PolygonHierarchy(positions);
    }, false),
    outline: true,
    outlineColor: Cesium.Color.YELLOW,
    material: Cesium.Color.YELLOW.withAlpha(0.5),
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
  },
  polyline: {
    positions: new Cesium.CallbackProperty(() => {
      const pos = [...positions, positions[0]]
      return pos;
    }, false),
    width: 3,
    clampToGround: true,
    material: Cesium.Color.RED
  }
});
this.viewer.entities.add(entity)

不知道这个方式合理不，正确的姿势时什么呢？

Answer 1

用 GroundPrimitive：

const viewer = new Cesium.Viewer('cesiumContainer');

const positions = [
  Cesium.Cartesian3.fromDegrees(-115.0, 37.0),
  Cesium.Cartesian3.fromDegrees(-115.0, 32.0),
  Cesium.Cartesian3.fromDegrees(-107.0, 33.0),
  Cesium.Cartesian3.fromDegrees(-102.0, 31.0),
  Cesium.Cartesian3.fromDegrees(-102.0, 35.0)
];

const polygon = new Cesium.GroundPrimitive({
  geometryInstances: new Cesium.GeometryInstance({
    geometry: new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(positions),
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    }),
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOW.withAlpha(0.5))
    }
  }),
  appearance: new Cesium.PerInstanceColorAppearance({
    closed: true
  })
});

viewer.scene.groundPrimitives.add(polygon);

const polyline = new Cesium.Entity({
  polyline: {
    positions: new Cesium.CallbackProperty(() => {
      const pos = [...positions, positions[0]];
      return pos;
    }, false),
    width: 3,
    clampToGround: true,
    material: Cesium.Color.RED
  }
});

viewer.entities.add(polyline);