GCSGUI/src/utils/map/draw/geometry.ts

/*
 * @Author: cbwu 504-wuchengbo@htsdfp.com
 * @Date: 2024-03-28 09:14:45
 * @LastEditors: cbwu
 * @LastEditTime: 2024-03-28 17:40:14
 * @Description: 封装的几何类型类
 */
import {
  Entity,
  EntityCollection,
  Cartesian3,
  Color,
  PrimitiveCollection,
  PointPrimitiveCollection,
  PolylineGeometry,
  PointGraphics,
  Property,
  PositionProperty,
  LabelGraphics,
  PolylineGraphics,
  PolygonGraphics,
  Cartesian2,
  ConstantPositionProperty,
  CallbackProperty,
} from 'cesium'
type EntityOptions = {
  id?: string
  name?: string
  show?: boolean
  pixelSize?: number
  outlineColor?: Color
  color?: Color
  fillColor?: Color
  fill?: boolean
  width?: number
  outlineWidth?: number
  text?: string
  font?: string
  pixelOffset?: Cartesian2
}
// 点
class PointEntity extends Entity {
  static ID: number = 0
  public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
  options: EntityOptions = {
    id: 'Point' + String(PointEntity.ID),
    name: 'Point' + String(PointEntity.ID + 1),
    show: true,
    pixelSize: 10,
    color: Color.GREEN,
    outlineWidth: 0,
  }
  constructor(
    position: PositionProperty | Cartesian3,
    options?: EntityOptions,
  ) {
    super({
      position: position,
    })

    this.options = { ...this.options, ...options }
    //点对象
    this.point = new PointGraphics({
      pixelSize: this.options.pixelSize,
      color: this.options.color,
      outlineColor: this.options.outlineColor,
      outlineWidth: this.options.outlineWidth,
    })
    // 标注对象
    this.label = new LabelGraphics({
      text: this.options.text,
      font: this.options.font,
      pixelOffset: this.options.pixelOffset,
    })

    PointEntity.ID++
  }
}
// 线
class PolylineEntity extends EntityCollection {
  static ID: number = 0
  positions: Cartesian3[] = []
  controlPointsID: string[] = []
  options: EntityOptions = {
    id: 'Polyline' + String(PolylineEntity.ID),
    name: 'Polyline' + String(PolylineEntity.ID + 1),
    show: true,
    width: 2,
    color: Color.GREEN,
  }
  constructor(ptArr: Cartesian3[], options?: EntityOptions) {
    super()
    this.options = { ...this.options, ...options }
    this.positions = ptArr
    const polyline = new Entity({
      name: this.options.name,
      polyline: {
        positions: new CallbackProperty(() => {
          return this.positions
        }, false),
        show: this.options.show,
        width: this.options.width,
        material: this.options.color,
      },
    })
    this.add(polyline)
    ptArr.forEach((pt, index) => {
      this.createPoint(pt, index)
    })

    PolylineEntity.ID++
  }
  /**
   * 新增一个节点,默认插入在尾部，
   * @param pos 点坐标
   * @param index 插入的位置，0起步
   */
  public addPoint(pos: Cartesian3, index: number = -1) {
    if (index === -1) {
      //插入尾部
      this.positions.push(pos)
      this.createPoint(pos, this.positions.length - 1)
    } else if (index >= 0 && index < this.positions.length) {
      this.positions.splice(index, 0, pos)
      this.createPoint(pos, index)
    } else {
      return
    }
  }
  /**
   * 移除点
   * @param index 移除点的位置
   * @returns
   */
  public removePoint(index: number = -1) {
    if (index === -1 || index === this.positions.length - 1) {
      //移除尾部元素
      this.positions.pop()
    } else if (index >= 0 && index < this.positions.length) {
      this.positions.splice(index, 1)
      this.removeById(this.controlPointsID[index])
      this.controlPointsID.splice(index, 1)
    } else {
      return
    }
  }
  /**
   * 修改某点的坐标
   * @param pos 修改点的坐标
   * @param index 修改点的位置
   */
  public modifyPoint(pos: Cartesian3, index: number) {
    if (index >= 0 && index < this.positions.length) {
      this.positions.splice(index, 1, pos)
      //修改控制点坐标
      const point = this.getById(this.controlPointsID[index])
      if (point) {
        point.position = new ConstantPositionProperty(pos)
      }
    }
  }
  /**
   * 新加一个点
   * @param pos 点的坐标
   * @param index 插入的位置,0起步
   */
  createPoint(pos: Cartesian3, index: number) {
    const point = new PointEntity(pos)
    point.subId = index + 1
    this.add(point)
    this.controlPointsID.splice(index, 0, point.id)
  }
}

// 多边形
class PolygonEntity extends Entity {
  static id: number = 0
  options: EntityOptions = {
    id: 'Polygon' + String(PolygonEntity.id),
    name: 'Polygon' + String(PolygonEntity.id + 1),
    show: true,
    width: 2,
    color: Color.RED,
    fillColor: Color.RED.withAlpha(0.5),
    fill: true,
  }
  constructor(ptArr: Cartesian3[] | Property, options?: EntityOptions) {
    super({
      // id: options?.id || String(PolygonEntity.id),
    })
    this.options = { ...this.options, ...options }
    this.name = this.options.name
    this.polygon = new PolygonGraphics({
      show: this.options.show,
      hierarchy: ptArr,
      material: this.options.fillColor, //填充颜色
      fill: this.options.fill, //是否填充
      outlineWidth: this.options.width, //线宽
      outlineColor: this.options.color, //线颜色
    })
    PolygonEntity.id++
  }
}
// 线
class Polyline extends PrimitiveCollection {
  constructor(ptArr: Cartesian3[]) {
    super()
    this.add(this.createPoints(ptArr))
    this.add(this.createPolyline(ptArr))
    // this.id
  }
  private createPoints(posArr: Cartesian3[]) {
    const points = new PointPrimitiveCollection()
    for (const pos in posArr) {
      points.add({
        position: pos,
        color: Color.RED,
        pixelSize: 10,
      })
    }
    return points
  }
  private createPolyline(posArr: Cartesian3[]) {
    return new PolylineGeometry({
      positions: posArr,
      width: 2,
      colors: new Array(posArr.length).fill(Color.fromCssColorString('green')),
    })
  }
}
export { PointEntity, Polyline, PolylineEntity, PolygonEntity }