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

/*
 * @Author: cbwu 504-wuchengbo@htsdfp.com
 * @Date: 2024-03-27 08:43:44
 * @LastEditors: cbwu
 * @LastEditTime: 2024-04-12 09:06:27
 * @Description: 绘制Polyline类
 */
import {
  Viewer,
  ScreenSpaceEventHandler,
  Cartesian3,
  Color,
  ScreenSpaceEventType,
  Entity,
  CallbackProperty,
  PolylineDashMaterialProperty,
} from 'cesium'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
// import { PointEntity, PolylineEntity } from '@/utils/map/geometry'
import { PolylineEntity } from '../geometry/polylineEntity'
import { PointEntity } from '@/utils/map/geometry/pointEntity'
import EditGeometry from '@/utils/map/draw/editGeometry'
type EntityOptions = {
  id?: string
  name?: string
  show?: boolean
  pixelSize?: number
  color?: Color
  fillColor?: Color
  fill?: boolean
  width?: number
  outlineWidth?: number
}
export default class CreatePolyline {
  viewer: Viewer
  handler: ScreenSpaceEventHandler
  polyline: PolylineEntity | null
  dashLine: Entity | null
  trackingLine: Entity | null
  trackingLinePositions: Cartesian3[] = []
  controlPoints: Entity[] | null
  modifyPoint: any = null
  clickedGeometry: Entity | null = null
  moveSelectedPoint: PointEntity | null = null
  positions: Cartesian3[] = []
  bMove: boolean = false
  bLongClick: boolean = false
  clickTimeout: any
  // layer: CustomDataSource
  defaultStyle: EntityOptions = {
    // id: 'Polyline' + String(PolylineEntity.id),
    // name: 'Polyline' + String(PolylineEntity.id + 1),
    show: true,
    width: 2,
    color: Color.GREEN,
  }
  constructor(viewer: Viewer, options?: EntityOptions) {
    this.viewer = viewer
    this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
    this.polyline = null
    this.trackingLine = null
    this.dashLine = null

    this.controlPoints = []
    this.defaultStyle = { ...this.defaultStyle, ...options }
  }
  // 开始绘制
  public start() {
    // 左单击加点
    this.handler.setInputAction(
      this.leftClickCallBack,
      ScreenSpaceEventType.LEFT_CLICK,
    )
    // 移动动态绘制
    this.handler.setInputAction(
      this.moveCallBack,
      ScreenSpaceEventType.MOUSE_MOVE,
    )
    // 左双击结束
    this.handler.setInputAction(
      this.leftDoubleClickCallBack,
      ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
    )
    // 右击回退上一步
    this.handler.setInputAction(
      this.rightClickCallBack,
      ScreenSpaceEventType.RIGHT_CLICK,
    )
  }
  public end() {
    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
  }
  //左单击回调事件
  private leftClickCallBack = (
    event: ScreenSpaceEventHandler.PositionedEvent,
  ) => {
    const pickedObject = this.viewer.scene.pick(event.position)
    // console.log(pickedObject)
    if (pickedObject) {
      //点击同一位置，返回
      if (
        pickedObject.id.id ===
        this.polyline?.controlPointsID[this.positions.length - 1]
      ) {
        return
        // console.log('********click the same point')
      }
    }
    const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
    if (cartesian3 != undefined) {
      if (!this.polyline) {
        this.polyline = new PolylineEntity(this.positions)
        this.dashLine = this.createTrackingLine(this.positions)
        this.viewer.entities.add(this.dashLine)
        this.viewer.dataSources.add(this.polyline)
      }
      this.polyline.addPoint(cartesian3)
      this.trackingLinePositions[0] = cartesian3
      this.bMove = true

      this.viewer.scene.requestRender() //刷新
    }
  }
  // 移动回调事件
  private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
    if (this.bMove) {
      const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
      if (cartesian3 != undefined) {
        //更新追踪线坐标
        this.trackingLinePositions[1] = cartesian3
        if (!this.trackingLine) {
          //创建追踪线对象
          this.trackingLine = this.createTrackingLine(
            this.trackingLinePositions,
          )
          this.viewer.entities.add(this.trackingLine)
        }
      }
      this.viewer.scene.requestRender() //刷新
    }
  }
  // 左双击回调事件
  private leftDoubleClickCallBack = (
    event: ScreenSpaceEventHandler.PositionedEvent,
  ) => {
    // 清除可能已经设置的单击定时器
    // clearTimeout(this.clickTimeout)
    if (!this.polyline) return
    console.log('**************************** double click')
    this.bMove = false
    const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
    if (cartesian3 != undefined) {
      // 移除追踪线
      if (!this.trackingLine) {
        this.viewer.entities.remove(this.trackingLine!)
      }
    }

    this.clearEvent()
    console.log('end:' + this.positions.length.toString())
    console.log(this.positions)
    //结束绘制进入编辑模式
    this.polyline.removeControlPoints()
    const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
    editTool.start()
  }
  //   右击回调事件
  private rightClickCallBack = () => {
    if (!this.controlPoints) return
    if (this.controlPoints.length > 1) {
      const lastPoint = this.positions.pop()
      this.positions[this.positions.length - 1] = lastPoint!
      this.viewer.entities.remove(this.controlPoints.pop() as Entity)
    }
  }
  clearEvent() {
    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
    this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
  }
  //创建追踪线
  createTrackingLine(positions: Cartesian3[]) {
    return new Entity({
      polyline: {
        positions: new CallbackProperty(() => {
          return positions
        }, false),
        width: 2,
        material: new PolylineDashMaterialProperty({
          color: Color.GREEN,
          dashLength: 15, //短划线长度
        }),
        clampToGround: true,
      },
    })
  }
}