通过PolygonGeometry绘制立体扇形图,并实现填充效果

  let data = oList; //数据列表
  let labels = new Cesium.PrimitiveCollection()
  labels["id"] = "labelPrimitive";
  viewer.scene.primitives.add(labels);

  let PolygonInstances = [];
  for (let index = 0; index < data.length; index++) {
    const entityI = data[index];
    //根据type设置不同填充色
    let color = "";
    if (entityI.color === 1) {
      color = "rgba(0,191,255,1)";
    } else {
      if (entityI.type == "4G") {
        color = "rgba(0,128,0,1)";
      } else if (entityI.type == "5G") {
        color = "rgba(0,0,153,1)";
      }
    }
    // 通过turf计算扇形多边形坐标
    let center = turf.point([parseFloat(entityI.longitude), parseFloat(entityI.latitude)]);
    let radius = 0.05;
    //entityI.aoa:弧度
    let bearing1 = parseFloat(entityI.aoa) - 15;
    let bearing2 = parseFloat(entityI.aoa) + 15;
    let sector = turf.sector(center, radius, bearing1, bearing2);
    let positions = Array.prototype.concat.apply([], sector.geometry.coordinates[0]);
    PolygonInstances.push(new Cesium.GeometryInstance({
      geometry: new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(positions)),
        height: 0,
        extrudedHeight: 10
      }),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color))
      }
    }))
  }
  labels.add(
    new Cesium.Primitive({
      geometryInstances: PolygonInstances,
      appearance: new Cesium.PerInstanceColorAppearance()
    })
  );

在这里插入图片描述

通过EllipsoidGeometry绘制扇形图,并实现填充效果

  let data = oList; //数据列表
  let labels = new Cesium.PrimitiveCollection()
  labels["id"] = "labelPrimitive";
  viewer.scene.primitives.add(labels);

  let EllipsoidInstances = [];
  for (let index = 0; index < data.length; index++) {
    const entityI = data[index];
    //根据type设置不同填充色
    let color = "";
    if (entityI.color === 1) {
      color = "rgba(0,191,255,1)";
    } else {
      if (entityI.type == "4G") {
        color = "rgba(0,128,0,1)";
      } else if (entityI.type == "5G") {
        color = "rgba(0,0,153,1)";
      }
    }
    let position = Cesium.Cartesian3.fromDegrees(parseFloat(entityI.longitude), parseFloat(entityI.latitude), 0);
    //entityI.aoa:弧度
    let hpRoll = new Cesium.HeadingPitchRoll(
      Cesium.Math.toRadians(parseFloat(entityI.aoa)),
      0,
      0
    );
    EllipsoidInstances.push(new Cesium.GeometryInstance({
      geometry: new Cesium.EllipsoidGeometry({
        radii: new Cesium.Cartesian3(50.0, 50.0, 50.0),  // 扇形半径
        innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径
        minimumClock: Cesium.Math.toRadians(75), // 左右偏角
        maximumClock: Cesium.Math.toRadians(105),
        minimumCone: Cesium.Math.toRadians(80),// 上下偏角
        maximumCone: Cesium.Math.toRadians(90)
      }),
      modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color))
      }
    }));
  }
  labels.add(
    new Cesium.Primitive({
      geometryInstances: EllipsoidInstances,
      appearance: new Cesium.PerInstanceColorAppearance()
    })
  );

在这里插入图片描述

通过EllipsoidOutlineGeometry绘制扇形图,并实现描边效果

  let data = oList; //数据列表
  let labels = new Cesium.PrimitiveCollection()
  labels["id"] = "labelPrimitive";
  viewer.scene.primitives.add(labels);

  let EllipsoidOutlineInstances = [];
  for (let index = 0; index < data.length; index++) {
    const entityI = data[index];
    //根据type设置不同填充色
    let color = "";
    if (entityI.color === 1) {
      color = "rgba(0,191,255,1)";
    } else {
      if (entityI.type == "4G") {
        color = "rgba(0,128,0,1)";
      } else if (entityI.type == "5G") {
        color = "rgba(0,0,153,1)";
      }
    }
    let position = Cesium.Cartesian3.fromDegrees(parseFloat(entityI.longitude), parseFloat(entityI.latitude), 0);
    //entityI.aoa:弧度
    let hpRoll = new Cesium.HeadingPitchRoll(
      Cesium.Math.toRadians(parseFloat(entityI.aoa)),
      0,
      0
    );
    EllipsoidOutlineInstances.push(new Cesium.GeometryInstance({
      geometry: new Cesium.EllipsoidOutlineGeometry({
        radii: new Cesium.Cartesian3(50.0, 50.0, 50.0),  // 扇形半径
        innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径
        minimumClock: Cesium.Math.toRadians(75), // 左右偏角
        maximumClock: Cesium.Math.toRadians(105),
        minimumCone: Cesium.Math.toRadians(80),// 上下偏角
        maximumCone: Cesium.Math.toRadians(90)
      }),
      modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color))
      }
    }));
  }
  labels.add(
    new Cesium.Primitive({
      geometryInstances: EllipsoidOutlineInstances,
      appearance: new Cesium.PerInstanceColorAppearance({
        flat: true, //EllipsoidOutlineGeometry类型必须设置该参数,不然会出现下图错误
      })
    })
  );

An error occurred while rendering.  Rendering has stopped.
undefined
DeveloperError: Appearance/Geometry mismatch.  The appearance requires vertex shader attribute input 'compressedAttributes', which was not computed as part of the Geometry.  Use the appearance's vertexFormat property when constructing the geometry.
在这里插入图片描述

Logo

永洪科技,致力于打造全球领先的数据技术厂商,具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐