sdk4.0/src/Draw/drawCircle.js

/**
 * @name: drawCircle
 * @author: Administrator
 * @date: 2022-06-15 14:55
 * @description：drawCircle
 * @update: 2022-06-15 14:55
 */
import Draw from './draw'
import MouseTip from '../MouseTip'
import MouseEvent from '../Event'

export default class DrawCircle extends Draw {
  constructor(sdk, options = {}) {
    super(sdk, options)
  }

  start(cb) {
    if (YJ.Measure.GetMeasureStatus()) {
      cb('上一次测量未结束')
    } else {
      super.start()
      let into
      YJ.Measure.SetMeasureStatus(true)
      this.tip = new MouseTip('左键开始，右键取消', this.sdk)
      this.event = new MouseEvent(this.sdk)
      let clickNum = 0
      this.circle_id = this.randomString() //圆id
      let radius_points = []
      let cache_points = []
      let radius = 1 //默认半径
      let positions = []
      let center = {}
      let endpoint = null

      this.event.mouse_left((movement, cartesian) => {
        if(into === '2D') {
          return
        }
        into = '3D'
        this.tip.set_text('再次左键，完成绘制；右键取消')
        clickNum++
        if (clickNum === 1) {
          this.point_id = this.create_point(cartesian)
          center = this.cartesian3Towgs84(cartesian, this.viewer)
          positions = this.createCircle(center, 0.01)
          cache_points.push(cartesian)
          createCirclePolygon()
        }
        if (clickNum === 2) {
          radius_points = cache_points.concat(cartesian)
          endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
          radius = this.computeDistance2([center, endpoint])
          positions = this.createCircle(center, radius)
          this.end()
          cb(null, { center, radius: Number(radius) })
        }
      })
      this.event.mouse_right((movement, cartesian) => {
        if(into === '2D') {
          return
        }
        this.end()
        cb(false)
      })
      this.event.mouse_move((movement, cartesian) => {
        if(into === '2D') {
          return
        }
        this.tip.setPosition(
          cartesian,
          movement.endPosition.x,
          movement.endPosition.y
        )
        if (clickNum) {
          radius_points = cache_points.concat(cartesian)
          endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
          radius = this.computeDistance2([center, endpoint])
          positions = this.createCircle(center, radius)
        }

      })

      this.event.gesture_pinck_start((movement, cartesian) => {
        if(into === '2D') {
          return
        }
        let startTime = new Date()
        this.event.gesture_pinck_end(() => {
          let endTime = new Date()
          if (endTime - startTime >= 500) {
            this.end()
            cb(false)
          }
          else {
            this.tip.set_text('再次左键，完成绘制；右键取消')
            clickNum++
            if (clickNum === 1) {
              this.point_id = this.create_point(cartesian)
              center = this.cartesian3Towgs84(cartesian, this.viewer)
              cache_points.push(cartesian)
              createCirclePolygon()
              this.tip.setPosition(
                cartesian,
                (movement.position1.x + movement.position2.x) / 2,
                (movement.position1.y + movement.position2.y) / 2
              )
            }
            if (clickNum === 2) {
              radius_points = cache_points.concat(cartesian)
              endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
              radius = this.computeDistance2([center, endpoint])
              positions = this.createCircle(center, radius)
              this.end()
              cb(null, { center, radius: Number(radius) })
            }
          }
        })
      })

      if (!this._is2D && this._sdk2D) {
        this.event2D = new MouseEvent(this._sdk2D)
        this.event2D.mouse_left((movement, cartesian) => {
          if(into === '3D') {
            return
          }
          into = '2D'
          this.tip.set_text('再次左键，完成绘制；右键取消')
          clickNum++
          if (clickNum === 1) {
            this.point_id = this.create_point(cartesian, this._sdk2D.viewer)
            center = this.cartesian3Towgs84(cartesian, this.viewer)
            positions = this.createCircle(center, 0.01)
            cache_points.push(cartesian)
            createCirclePolygon(this._sdk2D.viewer)
          }
          if (clickNum === 2) {
            radius_points = cache_points.concat(cartesian)
            endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
            radius = this.computeDistance2([center, endpoint])
            positions = this.createCircle(center, radius)
            this.end()
            cb(null, { center, radius: Number(radius) })
          }
        })
        this.event2D.mouse_right((movement, cartesian) => {
          if(into === '3D') {
            return
          }
          this.end()
          cb(false)
        })
        this.event2D.mouse_move((movement, cartesian) => {
          if(into === '3D') {
            return
          }
          this.tip.setPosition(
            cartesian,
            movement.endPosition.x + this.viewer.canvas.width,
            movement.endPosition.y
          )
          if (clickNum) {
            radius_points = cache_points.concat(cartesian)
            endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
            radius = this.computeDistance2([center, endpoint])
            positions = this.createCircle(center, radius)
          }

        })

        this.event2D.gesture_pinck_start((movement, cartesian) => {
          if(into === '3D') {
            return
          }
          let startTime = new Date()
          this.event2D.gesture_pinck_end(() => {
            let endTime = new Date()
            if (endTime - startTime >= 500) {
              this.end()
              cb(false)
            }
            else {
              this.tip.set_text('再次左键，完成绘制；右键取消')
              clickNum++
              if (clickNum === 1) {
                this.point_id = this.create_point(cartesian, this._sdk2D.viewer)
                center = this.cartesian3Towgs84(cartesian, this.viewer)
                cache_points.push(cartesian)
                createCirclePolygon(this._sdk2D.viewer)
                this.tip.setPosition(
                  cartesian,
                  ((movement.position1.x + movement.position2.x) / 2) + this.viewer.canvas.width,
                  (movement.position1.y + movement.position2.y) / 2
                )
              }
              if (clickNum === 2) {
                radius_points = cache_points.concat(cartesian)
                endpoint = this.cartesian3Towgs84(cartesian, this.viewer)
                radius = this.computeDistance2([center, endpoint])
                positions = this.createCircle(center, radius)
                this.end()
                cb(null, { center, radius: Number(radius) })
              }
            }
          })
        })
      }

      let that = this

      function createCirclePolygon(viewer = that.viewer) {
        let a = viewer.entities.add(
          new Cesium.Entity({
            id: that.circle_id,
            position: new Cesium.CallbackProperty((e) => {
              if (endpoint) {
                let c = that.computeMidpoint(center, endpoint)
                return Cesium.Cartesian3.fromDegrees(c.lng, c.lat, endpoint.alt)
              } else {
                return Cesium.Cartesian3()
              }
            }, false),
            label: {
              text: new Cesium.CallbackProperty((e) => {
                if (radius > 1000) {
                  return '半径：' + (radius / 1000).toFixed(2) + ' 公里'
                }
                return '半径：' + radius + ' 米'
              }, false),
              font: '20px Microsoft YaHei',
              distanceDisplayCondition: 10000000,
              scale: 1,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              fillColor: Cesium.Color.fromCssColorString('#f5ce0a'),
              style: Cesium.LabelStyle.FILL_AND_OUTLINE
            },
            polygon: {
              classificationType: Cesium.ClassificationType.BOTH,
              hierarchy: new Cesium.CallbackProperty((e) => {
                return new Cesium.PolygonHierarchy(
                  Cesium.Cartesian3.fromDegreesArray(positions)
                )
              }, false),
              material: Cesium.Color.fromCssColorString(that.color),
              zIndex: 99999999
            },
            polyline: {
              positions: new Cesium.CallbackProperty((e) => {
                return radius_points
              }, false),
              width: 2,
              material:
                Cesium.Color.fromCssColorString('#c1c505').withAlpha(0.5),
              clampToGround: true,
              zIndex: 99999999
            }
          })
        )
      }
    }
  }

  end() {
    this.remove_entity(this.circle_id)
    this.remove_entity(this.point_id)
    YJ.Measure.SetMeasureStatus(false)
    this.tip && this.tip.destroy()
    this.event && this.event.destroy()
    this.event2D && this.event2D.destroy()
  }
}