Primitive加载多边形以及多边形轮廓流程

• Primitive画多边形，其面与轮廓需要分别添加，因此场景中添加了两个Primitive
• 面的实例中的几何体使用Cesium.PolygonGeometry来构建
• 轮廓的实例中的几何体使用Cesium.PolygonOutlineGeometry来构建
• 如果几何体高度为0以及拉伸高度为0时，可以使用Cesium.GroundPrimitive加载面使多边形贴地

代码实践

createPolygon(viewer, {
    coordinates: [
      116.41191042442674, 40.03433302415276, 1, 
      116.41218511530673,40.03431621816942, 1,
      116.4121891719234, 40.03434113738609, 1,
      116.4119127424934, 40.034363738532754, 1, 
      116.41191042442674,40.03433302415276, 1,
    ],
    heightAboveGround: 10,
    polyHeight: 25,
    color: "#dbd942",
    outLineColor: "#000000"
  })

interface polygonOptions {
  // 形成底面的坐标串
  coordinates: number[][]|number[];
  // 底面离地面高度
  heightAboveGround?: number;
  // 底面的拉伸高度
  polyHeight?: number;
  // 多边形面的颜色
  color?: string;
  // 多边形轮廓的颜色
  outLineColor?:string
}
export const createPolygon = (
  viewer: Cesium.Viewer,
  options: polygonOptions
) => {
  const {
    coordinates,
    color = "#1af35b",
    outLineColor= '#000',
    heightAboveGround = 0,
    polyHeight = 0,
  } = options;
  //多边形实例
  const geometryInstance = {
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArrayHeights(coordinates as number[])
        ),
        // 离地面高度
        height: heightAboveGround,
        // 离地面高度加上底面的拉伸高度
        extrudedHeight: heightAboveGround + polyHeight,
      }),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.fromCssColorString(color)
        ),
      },
    }),
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
      translucent: true, //是否透明
    }),
  };
  //轮廓实例
  const outLineInstance = {
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.PolygonOutlineGeometry({
        // 创建polygonHierarchy对象
        polygonHierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArrayHeights(coordinates as number[])
        ),
        height: heightAboveGround,
        extrudedHeight: heightAboveGround + polyHeight,
      }),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.fromCssColorString(outLineColor)
        ),
      },
    }),
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
      translucent: false, //是否透明
    }),
  };
  let primitive;
  let primitiveOutLine;
  if (heightAboveGround === 0 && polyHeight === 0) {
    //贴地面
    primitive = new Cesium.GroundPrimitive(geometryInstance);
    primitiveOutLine = new Cesium.Primitive(outLineInstance);
  } else {
    primitive = new Cesium.Primitive(geometryInstance);
    primitiveOutLine = new Cesium.Primitive(outLineInstance);
  }
  viewer.scene.primitives.add(primitive);
  viewer.scene.primitives.add(primitiveOutLine);
};