代码迁移

src/Obj/Base/Graffiti/index.js

@@ -0,0 +1,227 @@
+/**
+ * 涂鸦
+ */
+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 ewPlugins('colorpicker', {
+          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 ewPlugins('colorpicker', {
+        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