VUE3-Cesium（entities-创建多边形实体、折线实体）

1. 创建多边形实体

使用polygon : PolygonGraphics 创建多边形实体，polygon主要包含以下属性：

 

1.1 创建一个多边形实体

//创建一个多边形实体 
// const bluePolygon = viewer.entities.add({
  //   name: "bluePolygon",
  //   polygon: {
  //     // 多边形顶点属性设置
  //     hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
  //       116.39, 39.9, 100, 116.38, 39.85, 300, 116.41, 39.86, 600, 116.41,
  //       39.88, 900,
  //     ]),
  //     material: Cesium.Color.BLUE.withAlpha(0.5),
  //     // 是否使用预先设置的高度
  //     perPositionHeight: true,
  //     // 挤出高度
  //     extrudedHeight: 0,
  //   },
  // });

1.2 设置多边形打洞多边形

//设置多边形打洞多边形
  const bluePolygon = viewer.entities.add({
    name: "bluePolygon",
    polygon: {
      // 多边形顶点属性设置
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          116.39, 39.9, 116.38, 39.85, 116.41, 39.86, 116.41, 39.88,
        ]),
        holes: [
          {
            positions: Cesium.Cartesian3.fromDegreesArray([
              116.385, 39.88, 116.385, 39.865, 116.388, 39.865, 116.388, 39.88,
            ]),
          },
        ],
      },
      material: Cesium.Color.BLUE.withAlpha(0.5),
    },
  });

2.创建折线实体

使用polyline : PolylineGraphics创建折线实体，polyline主要提供以下属性：

 

2.1 折线

  const redLine = viewer.entities.add({
    name: "redLine",
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        116.39, 39.9, 116.38, 39.85, 116.41, 39.86, 116.41, 39.88,
      ]),
      width: 10,
      material: Cesium.Color.RED.withAlpha(0.5),
      // 设置折线固定在地面上
      // clampToGround: true,
    },
  });

2.2 带边框折线（红色折线，白色边框）

  const redLine = viewer.entities.add({
    name: "redLine",
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
        39.88, 100,
      ]),
      width: 10,
      // 飞线效果
      material: new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.RED,
        // 设置中间间隙的颜色
        outlineWidth: 5,
        outlineColor: Cesium.Color.WHITE,
      }),
    },
  });

2.3 箭头折线

const redLine = viewer.entities.add({
    name: "redLine",
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
        39.88, 100,
      ]),
      width: 20,
      // 飞线效果
      material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.SKYBLUE),
      // 设置折线固定在地面上
      // clampToGround: true,
    },
  });

2.3 红白间隔折线

const redLine = viewer.entities.add({
    name: "redLine",
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
        39.88, 100,
      ]),
      width: 5,
      // 飞线效果
      material: new Cesium.PolylineDashMaterialProperty({
        dashLength: 20,
        color: Cesium.Color.RED,
        // 设置中间间隙的颜色
        gapColor: Cesium.Color.WHITE,
      }),
      // 设置折线固定在地面上
      // clampToGround: true,
    },
  });

2.4 锥形飞线（由宽至窄）

const redLine = viewer.entities.add({
    name: "redLine",
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        116.39, 39.9, 100, 116.38, 39.85, 100, 116.41, 39.86, 100, 116.41,
        39.88, 100,
      ]),
      width: 10,
      // 飞线效果
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.5,
        // 设置锥型的比例
        taperPower: 0.5,
        color: Cesium.Color.RED,
      }),
      // 设置折线固定在地面上
      // clampToGround: true,
    },
  });