sdk4.0/src/Obj/Base/Graffiti/index.js

/**
 * 涂鸦
 */
import Draw from '../../../Draw/draw'
import MouseTip from '../../../MouseTip'
import MouseEvent from '../../../Event'
import Dialog from '../../../BaseDialog';
import EventBinding from '../../Element/Dialog/eventBinding';
import { html } from "./_element";
import { CameraController } from '../../../Global/global'

class Graffiti extends Draw {
  /**
   * @constructor
   * @param sdk 
   * @description 涂鸦
   * @param options {object} 线属性
   * @param options.width=10{number} 宽度
   * @param options.color=#ff0000{string} 宽度
   * */
  constructor(sdk, options = {}) {
    super(sdk, options);
    this.options.width = options.width || 1
    this.options.color = options.color || '#ff0000'
    this._elms = {};
    this._EventBinding = new EventBinding()
    Graffiti.edit(this, true)
  }

  get color() {
    return this.options.color
  }
  set color(v) {
    if(!this.options.color) {
      return
    }
    this.options.color = v
    if (this._elms.color) {
      this._elms.color.forEach((item, i) => {
        let colorPicker = new YJColorPicker({
          el: item.el,
          size: 'mini',//颜色box类型
          alpha: true,//是否开启透明度
          defaultColor: v,
          disabled: false,//是否禁止打开颜色选择器
          openPickerAni: 'opacity',//打开颜色选择器动画
          sure: (c) => {
            this.color = c
          },//点击确认按钮事件回调
          clear: () => {
            this.color = 'rgba(255,255,255,1)'
          },//点击清空按钮事件回调
        })
        this._elms.color[i] = colorPicker
      })
    }
  }

  get width() {
    return this.options.width
  }
  set width(v) {
    this.options.width = v
    this._elms.width && this._elms.width.forEach((item) => {
      item.value = v
    })
  }

  // 编辑框
  static async edit(that, state) {
    if (state) {
      that._DialogObject = await new Dialog(that.sdk.viewer._container, {
        title: '涂鸦参数',
      })
      await that._DialogObject.init()
      let contentElm = document.createElement('div');
      contentElm.innerHTML = html()
      that._DialogObject.contentAppChild(contentElm)
      // 颜色组件
      let colorPicker = new YJColorPicker({
        el: contentElm.getElementsByClassName("color")[0],
        size: 'mini',//颜色box类型
        alpha: true,//是否开启透明度
        defaultColor: that.color,
        disabled: false,//是否禁止打开颜色选择器
        openPickerAni: 'opacity',//打开颜色选择器动画
        sure: (color) => {
          that.color = color
        },//点击确认按钮事件回调
        clear: () => {
          that.color = 'rgba(255,255,255,1)'
        },//点击清空按钮事件回调
      })
      that._DialogObject._element.body.className = that._DialogObject._element.body.className + ' graffiti'
      let all_elm = contentElm.getElementsByTagName("*")
      that._EventBinding.on(that, all_elm)
      that._elms = that._EventBinding.element
      that._elms.color = [colorPicker]

      let confirmBtn = document.createElement('button');
      confirmBtn.className = 'confirm';
      confirmBtn.innerHTML = '确认'
      that._DialogObject.footAppChild(confirmBtn)
      confirmBtn.addEventListener('click', () => {
        that.start()
        Graffiti.edit(that, false)
      });
    }
    else {
      if (that._DialogObject && that._DialogObject.close) {
        that._DialogObject.close()
        that._DialogObject = null
      }
    }
  }

  /**
   * @desc 开始动态获绘制线
   * @method start
   * })
   * */
  start() {
    let _this = this
    if (YJ.Measure.GetMeasureStatus()) {
      console.log('上一次测量未结束')
    } else {
      let viewer = this.sdk.viewer
      CameraController(this.sdk, false)
      super.start()
      YJ.Measure.SetMeasureStatus(true)
      this.tip = new MouseTip('长按左键，拖动鼠标进行涂鸦，右键结束涂鸦', this.sdk)
      this.event = new MouseEvent(this.sdk)
      this.positions = []
      this.points_ids = [] //存放左键点击时临时添加的point的id
      let polylineArray = []
      let positions = []

      this.event.mouse_left_down((movement, cartesian) => {
        positions = []
        let line = this.sdk.viewer.entities.add({
          name: '涂鸦',
          polyline: {
            positions: new Cesium.CallbackProperty(function () {
              return positions
            }, false),
            width: this.width,
            clampToGround: true,
            material: Cesium.Color.fromCssColorString(this.color),
            zIndex: 99999999
          }
        })
        polylineArray.push(line)
        this.event.mouse_move((movement, cartesian) => {
          this.tip.setPosition(
            cartesian,
            movement.endPosition.x,
            movement.endPosition.y
          )
          positions.push(cartesian)
        })
      })
      this.event.mouse_left_up((movement, cartesian) => {
        polylineArray[polylineArray.length-1].polyline.positions = positions
        this.event.mouse_move((movement, cartesian) => {
          this.tip.setPosition(
            cartesian,
            movement.endPosition.x,
            movement.endPosition.y
          )
        })
      })
      this.event.mouse_move((movement, cartesian) => {
        this.tip.setPosition(
          cartesian,
          movement.endPosition.x,
          movement.endPosition.y
        )
      })
      this.event.mouse_right((movement, cartesian) => {
        this.end()
      })

      this.event.gesture_pinck_start((movement, cartesian) => {
        let startTime = new Date()
        this.event.gesture_pinck_end(() => {
          let endTime = new Date()
          if (endTime - startTime >= 500) {
            // 长按取消
            this.end()
          }
        })
      })
    }
  }

  /**
   * @desc 结束制线
   * @method end
   * })
   * */
  end() {
    YJ.Measure.SetMeasureStatus(false)
    this.event && this.event.destroy()
    this.event = undefined
    this.tip && this.tip.destroy()
    this.tip = undefined
    CameraController(this.sdk, true)
  }

  remove() {
    this.end()
    if (this._DialogObject && this._DialogObject.close) {
      this._DialogObject.close()
      this._DialogObject = null
    }
    let entities = this.sdk.viewer.entities.values
    for (let i = entities.length - 1; i >= 0; i--) {
      if (entities[i].name === '涂鸦') {
        this.sdk.viewer.entities.remove(entities[i])
      }
    }
  }

  flicker() {}
}

export default Graffiti