improve the plot #39

modules/plot/Plot.js

@@ -30,35 +30,12 @@ import EditFineArrow from './edit/EditFineArrow'
 import EditGatheringPlace from './edit/EditGatheringPlace'
 import EditTailedAttackArrow from './edit/EditTailedAttackArrow'
 
-const IMG_CIRCLE_RED = require('@dc-modules/images/circle_red.png')
-
-const IMG_CIRCLE_BLUE = require('@dc-modules/images/circle_blue.png')
-
-const IMG_CIRCLE_YELLOW = require('@dc-modules/images/circle_yellow.png')
-
-const DEF_OPTS = {
-  icon_center: IMG_CIRCLE_YELLOW,
-  icon_anchor: IMG_CIRCLE_RED,
-  icon_midAnchor: IMG_CIRCLE_BLUE,
-  icon_size: [12, 12],
-  clampToGround: true
-}
-
 class Plot {
   constructor(viewer, options = {}) {
     this._viewer = viewer
-    this._options = {
-      ...DEF_OPTS,
-      ...options
-    }
-    this._plotEvent = new Cesium.Event()
-    this._callback = undefined
-    this._drawWorker = undefined
-    this._editWorker = undefined
-    this._overlayLayer = new Cesium.CustomDataSource('plot-overlay-layer')
-    this._viewer.dataSources.add(this._overlayLayer)
-    this._anchorLayer = new Cesium.CustomDataSource('plot-anchor-layer')
-    this._viewer.dataSources.add(this._anchorLayer)
+    this._options = options
+    this._layer = new Cesium.CustomDataSource('plot-layer')
+    this._viewer.dataSources.add(this._layer)
     this._state = undefined
   }
 
@@ -66,41 +43,14 @@ class Plot {
     return this._viewer
   }
 
-  get options() {
-    return this._options
-  }
-
-  get plotEvent() {
-    return this._plotEvent
-  }
-
-  get overlayLayer() {
-    return this._overlayLayer.entities
-  }
-
-  get anchorLayer() {
-    return this._anchorLayer.entities
+  get layer() {
+    return this._layer
   }
 
   get state() {
     return this._state
   }
 
-  _completeCallback(overlay) {
-    this._drawWorker = undefined
-    this._editWorker = undefined
-    this._viewer.tooltip.enable = false
-    this._overlayLayer.entities.removeAll()
-    this._anchorLayer.entities.removeAll()
-    this._callback && this._callback.call(this, overlay)
-  }
-
-  _bindEvent(callback) {
-    this._plotEvent.removeEventListener(this._completeCallback, this)
-    this._callback = callback
-    this._plotEvent.addEventListener(this._completeCallback, this)
-  }
-
   /**
    *
    * @param type
@@ -108,43 +58,45 @@ class Plot {
    * @private
    */
   _createDrawWorker(type, style) {
+    let drawWorker = undefined
     switch (type) {
       case OverlayType.POINT:
-        this._drawWorker = new DrawPoint(style)
+        drawWorker = new DrawPoint(style)
         break
       case OverlayType.POLYLINE:
-        this._drawWorker = new DrawPolyline(style)
+        drawWorker = new DrawPolyline(style)
         break
       case OverlayType.POLYGON:
-        this._drawWorker = new DrawPolygon(style)
+        drawWorker = new DrawPolygon(style)
         break
       case OverlayType.CIRCLE:
-        this._drawWorker = new DrawCircle(style)
+        drawWorker = new DrawCircle(style)
         break
       case OverlayType.RECTANGLE:
-        this._drawWorker = new DrawRectangle(style)
+        drawWorker = new DrawRectangle(style)
         break
       case OverlayType.BILLBOARD:
-        this._drawWorker = new DrawBillboard(style)
+        drawWorker = new DrawBillboard(style)
         break
       case OverlayType.ATTACK_ARROW:
-        this._drawWorker = new DrawAttackArrow(style)
+        drawWorker = new DrawAttackArrow(style)
         break
       case OverlayType.DOUBLE_ARROW:
-        this._drawWorker = new DrawDoubleArrow(style)
+        drawWorker = new DrawDoubleArrow(style)
         break
       case OverlayType.FINE_ARROW:
-        this._drawWorker = new DrawFineArrow(style)
+        drawWorker = new DrawFineArrow(style)
         break
       case OverlayType.TAILED_ATTACK_ARROW:
-        this._drawWorker = new DrawTailedAttackArrow(style)
+        drawWorker = new DrawTailedAttackArrow(style)
         break
       case OverlayType.GATHERING_PLACE:
-        this._drawWorker = new DrawGatheringPlace(style)
+        drawWorker = new DrawGatheringPlace(style)
         break
       default:
         break
     }
+    return drawWorker
   }
 
   /**
@@ -153,43 +105,45 @@ class Plot {
    * @private
    */
   _createEditWorker(overlay) {
+    let editWorker = undefined
     switch (overlay.type) {
       case OverlayType.POINT:
-        this._editWorker = new EditPoint(overlay)
+        editWorker = new EditPoint(overlay)
         break
       case OverlayType.POLYLINE:
-        this._editWorker = new EditPolyline(overlay)
+        editWorker = new EditPolyline(overlay)
         break
       case OverlayType.POLYGON:
-        this._editWorker = new EditPolygon(overlay)
+        editWorker = new EditPolygon(overlay)
         break
       case OverlayType.CIRCLE:
-        this._editWorker = new EditCircle(overlay)
+        editWorker = new EditCircle(overlay)
         break
       case OverlayType.RECTANGLE:
-        this._editWorker = new EditRectangle(overlay)
+        editWorker = new EditRectangle(overlay)
         break
       case OverlayType.BILLBOARD:
-        this._editWorker = new EditBillboard(overlay)
+        editWorker = new EditBillboard(overlay)
         break
       case OverlayType.ATTACK_ARROW:
-        this._editWorker = new EditAttackArrow(overlay)
+        editWorker = new EditAttackArrow(overlay)
         break
       case OverlayType.DOUBLE_ARROW:
-        this._editWorker = new EditDoubleArrow(overlay)
+        editWorker = new EditDoubleArrow(overlay)
         break
       case OverlayType.FINE_ARROW:
-        this._editWorker = new EditFineArrow(overlay)
+        editWorker = new EditFineArrow(overlay)
         break
       case OverlayType.TAILED_ATTACK_ARROW:
-        this._editWorker = new EditTailedAttackArrow(overlay)
+        editWorker = new EditTailedAttackArrow(overlay)
         break
       case OverlayType.GATHERING_PLACE:
-        this._editWorker = new EditGatheringPlace(overlay)
+        editWorker = new EditGatheringPlace(overlay)
         break
       default:
         break
     }
+    return editWorker
   }
 
   /**
@@ -197,20 +151,16 @@ class Plot {
    * @param type
    * @param callback
    * @param style
-   * @param clampToGround
+   * @param clampToModel
    * @returns {Plot}
    */
-  draw(type, callback, style, clampToGround) {
+  draw(type, callback, style = {}, clampToModel = false) {
     this._state = 'draw'
-    if (this._drawWorker) {
-      this._drawWorker.unbindEvent()
-      this._drawWorker = undefined
-    }
-    this._viewer.tooltip.enable = true
-    this._bindEvent(callback)
-    this._createDrawWorker(type, style)
-    this._drawWorker &&
-      this._drawWorker.start(this, clampToGround ?? this._options.clampToGround)
+    this._createDrawWorker(type, style)?.start(this, {
+      ...this._options,
+      onDrawStop: callback,
+      clampToModel: clampToModel ?? this._options.clampToModel
+    })
     return this
   }
 
@@ -218,20 +168,16 @@ class Plot {
    *
    * @param overlay
    * @param callback
-   * @param clampToGround
+   * @param clampToModel
    * @returns {Plot}
    */
-  edit(overlay, callback, clampToGround) {
+  edit(overlay, callback, clampToModel = false) {
     this._state = 'edit'
-    if (this._editWorker) {
-      this._editWorker.unbindEvent()
-      this._editWorker = undefined
-    }
-    this._viewer.tooltip.enable = true
-    this._bindEvent(callback)
-    this._createEditWorker(overlay)
-    this._editWorker &&
-      this._editWorker.start(this, clampToGround ?? this._options.clampToGround)
+    this._createEditWorker(overlay)?.start(this, {
+      ...this._options,
+      onEditStop: callback,
+      clampToModel: clampToModel ?? this._options.clampToModel
+    })
     return this
   }
 
@@ -240,11 +186,8 @@ class Plot {
    * @returns {Plot}
    */
   destroy() {
-    this._plotEvent.removeEventListener(this._completeCallback, this)
-    this._viewer.dataSources.remove(this._overlayLayer)
-    this._viewer.dataSources.remove(this._anchorLayer)
+    this._viewer.dataSources.remove(this._layer)
     this._viewer = undefined
-    this._plotEvent = undefined
     return this
   }
 }

modules/plot/draw/Draw.js

@@ -3,91 +3,100 @@
  * @Date: 2020-01-31 19:45:32
  */
 
-import { Cesium } from '@dc-modules/namespace'
-import { MouseEventType } from '@dc-modules/event'
+import { PlotEventType } from '@dc-modules/event'
 
 class Draw {
-  constructor() {
+  constructor(style) {
+    this._style = style
     this._viewer = undefined
-    this._delegate = undefined
-    this._floatingAnchor = undefined
-    this._clampToGround = true
-    this._tooltip = undefined
-    this._tooltipMess = '单击选择点位'
     this._layer = undefined
-    this._plotEvent = undefined
+    this._delegate = undefined
     this._options = {}
     this._positions = []
   }
 
-  _mountEntity() {}
+  get drawTool() {
+    return this._viewer.drawTool
+  }
 
-  _onClick(e) {}
+  /**
+   * The hook for mount viewer
+   * Subclasses need to be overridden
+   * @private
+   */
+  _mountedHook() {}
 
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, this._tooltipMess)
-    if (this._floatingAnchor) {
-      let position = this._clampToGround ? e.surfacePosition : e.position
-      if (!position) {
-        return false
-      }
-      this._floatingAnchor.position.setValue(position)
-      this._positions.pop()
-      this._positions.push(position)
-    }
-  }
+  /**
+   * The hook for mount stop
+   * Subclasses need to be overridden
+   * @private
+   */
+  _stopdHook() {}
 
-  _onRightClick(e) {}
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {}
 
-  bindEvent() {
-    this._viewer.on(MouseEventType.CLICK, this._onClick, this)
-    this._viewer.on(MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
-    this._viewer.on(MouseEventType.RIGHT_CLICK, this._onRightClick, this)
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onAnchorMoving(position) {
+    this._positions.pop()
+    this._positions.push(position)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _onDrawStop() {
+    this._unbindEvent()
+    this._viewer.drawTool.deactivate()
+    this._layer.entities.remove(this._delegate)
+    this._stopdHook()
   }
 
-  unbindEvent() {
-    this._viewer.off(MouseEventType.CLICK, this._onClick, this)
-    this._viewer.off(MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
-    this._viewer.off(MouseEventType.RIGHT_CLICK, this._onRightClick, this)
+  /**
+   *
+   * @private
+   */
+  _bindEvent() {
+    this.drawTool.on(PlotEventType.DRAW_ANCHOR, this._onDrawAnchor, this)
+    this.drawTool.on(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
+    this.drawTool.on(PlotEventType.DRAW_STOP, this._onDrawStop, this)
   }
 
   /**
    *
-   * @param position
-   * @param isCenter
-   * @returns {*}
+   * @private
    */
-  createAnchor(position, isCenter = false) {
-    return this._layer.add({
-      position: position,
-      billboard: {
-        image: isCenter ? this._options.icon_center : this._options.icon_anchor,
-        width: this._options.icon_size[0],
-        height: this._options.icon_size[1],
-        eyeOffset: new Cesium.Cartesian3(0, 0, -500),
-        heightReference:
-          this._viewer.scene.mode === Cesium.SceneMode.SCENE3D &&
-          this._clampToGround
-            ? Cesium.HeightReference.CLAMP_TO_GROUND
-            : Cesium.HeightReference.NONE
-      }
-    })
+  _unbindEvent() {
+    this.drawTool.off(PlotEventType.DRAW_ANCHOR, this._onDrawAnchor, this)
+    this.drawTool.off(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
+    this.drawTool.off(PlotEventType.DRAW_STOP, this._onDrawStop, this)
   }
 
   /**
    *
    * @param plot
-   * @param clampToGround
+   * @param options
+   * @returns {Draw}
    */
-  start(plot, clampToGround) {
+  start(plot, options) {
     this._viewer = plot.viewer
-    this._tooltip = plot.viewer.tooltip
-    this._layer = plot.overlayLayer
-    this._plotEvent = plot.plotEvent
-    this._options = plot.options
-    this._clampToGround = clampToGround
-    this._mountEntity()
-    this.bindEvent()
+    this._layer = plot.layer
+    this._options = options
+    this._viewer.editTool.deactivate()
+    this._viewer.drawTool.activate(options)
+    this._mountedHook()
+    this._unbindEvent()
+    this._bindEvent()
+    return this
   }
 }
 

modules/plot/draw/DrawAttackArrow.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { AttackArrow } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -17,7 +18,7 @@ const DEF_STYLE = {
 class DrawAttackArrow extends Draw {
   constructor(style) {
     super()
-    this._floatingAnchor = undefined
+    this._maxAnchorSize = 3
     this._style = {
       ...DEF_STYLE,
       ...style
@@ -25,7 +26,12 @@ class DrawAttackArrow extends Draw {
     this._graphics = new AttackArrowGraphics()
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '单击选择点位'
     this._delegate = new Cesium.Entity({
       polygon: {
         ...this._style,
@@ -39,31 +45,33 @@ class DrawAttackArrow extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let attackArrow = new AttackArrow(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(attackArrow)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
     let len = this._positions.length
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (!position) {
-      return false
-    }
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
     this._positions.push(position)
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
     this._graphics.positions = this._positions
-    this.createAnchor(position)
-    if (len > 2) {
+    if (len >= this._maxAnchorSize) {
       this._positions.pop()
-      this.unbindEvent()
-      let attackArrow = new AttackArrow(
-        Transform.transformCartesianArrayToWGS84Array(this._positions)
-      )
-      attackArrow.setStyle(this._style)
-      this._plotEvent.raiseEvent(attackArrow)
+      this.drawTool.fire(PlotEventType.DRAW_STOP)
     }
   }
 }

modules/plot/draw/DrawBillboard.js

@@ -4,26 +4,29 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { Billboard } from '@dc-modules/overlay'
 import Draw from './Draw'
 
 const IMG_CIRCLE_RED = require('@dc-modules/images/circle_red.png')
 
-const DEF_STYLE = {}
-
 class DrawPoint extends Draw {
   constructor(style) {
     super()
     this._position = Cesium.Cartesian3.ZERO
     this._style = {
       image: IMG_CIRCLE_RED,
-      ...DEF_STYLE,
       ...style
     }
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '单击选择点位'
     this._delegate = new Cesium.Entity({
       position: new Cesium.CallbackProperty(() => {
         return this._position
@@ -32,23 +35,38 @@ class DrawPoint extends Draw {
         ...this._style
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    this._position = this._clampToGround ? e.surfacePosition : e.position
-    this.unbindEvent()
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
     let billboard = new Billboard(
       Transform.transformCartesianToWGS84(this._position),
       this._style.image
-    )
-    billboard.setStyle(this._style)
-    this._plotEvent.raiseEvent(billboard)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(billboard)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
+    this._position = position
+    this.drawTool.fire(PlotEventType.DRAW_STOP)
   }
 
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, '单击选择点位')
-    this._position = this._clampToGround ? e.surfacePosition : e.position
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onAnchorMoving(position) {
+    this._position = position
   }
 }
 

modules/plot/draw/DrawCircle.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { Circle } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -16,6 +17,7 @@ const DEF_STYLE = {
 class DrawCircle extends Draw {
   constructor(style) {
     super()
+    this._maxAnchorSize = 2
     this._radius = 0
     this._style = {
       ...DEF_STYLE,
@@ -23,7 +25,12 @@ class DrawCircle extends Draw {
     }
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '单击选择点位'
     this._delegate = new Cesium.Entity({
       polygon: {
         ...this._style,
@@ -56,33 +63,36 @@ class DrawCircle extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let circle = new Circle(
+      Transform.transformCartesianToWGS84(this._positions[0]),
+      this._radius
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(circle)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
     let len = this._positions.length
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (!position) {
-      return false
-    }
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position, true)
-      this._floatingAnchor = this.createAnchor(position)
-    }
     this._positions.push(position)
-    if (len > 0) {
-      this.createAnchor(position)
-    }
-    if (len > 1) {
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, {
+      position,
+      isCenter: len === 1
+    })
+    if (len >= this._maxAnchorSize) {
       this._positions.pop()
-      this.unbindEvent()
-      let circle = new Circle(
-        Transform.transformCartesianToWGS84(this._positions[0]),
-        this._radius
-      )
-      circle.setStyle(this._style)
-      this._plotEvent.raiseEvent(circle)
+      this.drawTool.fire(PlotEventType.DRAW_STOP)
     }
   }
 }

modules/plot/draw/DrawDoubleArrow.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { DoubleArrow } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -17,7 +18,7 @@ const DEF_STYLE = {
 class DrawDoubleArrow extends Draw {
   constructor(style) {
     super()
-    this._floatingAnchor = undefined
+    this._maxAnchorSize = 4
     this._style = {
       ...DEF_STYLE,
       ...style
@@ -25,7 +26,12 @@ class DrawDoubleArrow extends Draw {
     this._graphics = new DoubleArrowGraphics()
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '单击选择点位'
     this._delegate = new Cesium.Entity({
       polygon: {
         ...this._style,
@@ -39,28 +45,33 @@ class DrawDoubleArrow extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let doubleArrow = new DoubleArrow(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(doubleArrow)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
     let len = this._positions.length
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
     this._positions.push(position)
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
     this._graphics.positions = this._positions
-    this.createAnchor(position)
-    if (len > 3) {
+    if (len >= this._maxAnchorSize) {
       this._positions.pop()
-      this.unbindEvent()
-      let doubleArrow = new DoubleArrow(
-        Transform.transformCartesianArrayToWGS84Array(this._positions)
-      )
-      doubleArrow.setStyle(this._style)
-      this._plotEvent.raiseEvent(doubleArrow)
+      this.drawTool.fire(PlotEventType.DRAW_STOP)
     }
   }
 }

modules/plot/draw/DrawFineArrow.js

@@ -5,6 +5,7 @@
 
 import { Cesium } from '@dc-modules/namespace'
 import { Transform } from '@dc-modules/transform'
+import { PlotEventType } from '@dc-modules/event'
 import { FineArrow } from '@dc-modules/overlay'
 import Draw from './Draw'
 import FineArrowGraphics from '../graphics/FineArrowGraphics'
@@ -17,7 +18,7 @@ const DEF_STYLE = {
 class DrawFineArrow extends Draw {
   constructor(style) {
     super()
-    this._floatingAnchor = undefined
+    this._maxAnchorSize = 2
     this._style = {
       ...DEF_STYLE,
       ...style
@@ -25,7 +26,12 @@ class DrawFineArrow extends Draw {
     this._graphics = new FineArrowGraphics()
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '单击选择点位'
     this._delegate = new Cesium.Entity({
       polygon: {
         ...this._style,
@@ -39,31 +45,33 @@ class DrawFineArrow extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (!position) {
-      return false
-    }
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let fineArrow = new FineArrow(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(fineArrow)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
     let len = this._positions.length
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
     this._positions.push(position)
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
     this._graphics.positions = this._positions
-    this.createAnchor(position)
-    if (len > 1) {
+    if (len >= this._maxAnchorSize) {
       this._positions.pop()
-      this.unbindEvent()
-      let fineArrow = new FineArrow(
-        Transform.transformCartesianArrayToWGS84Array(this._positions)
-      )
-      fineArrow.setStyle(this._style)
-      this._plotEvent.raiseEvent(fineArrow)
+      this.drawTool.fire(PlotEventType.DRAW_STOP)
     }
   }
 }

modules/plot/draw/DrawGatheringPlace.js

@@ -5,6 +5,7 @@
 
 import { Cesium } from '@dc-modules/namespace'
 import { Transform } from '@dc-modules/transform'
+import { PlotEventType } from '@dc-modules/event'
 import { GatheringPlace } from '@dc-modules/overlay'
 import Draw from './Draw'
 import GatheringPlaceGraphics from '../graphics/GatheringPlaceGraphics'
@@ -17,7 +18,7 @@ const DEF_STYLE = {
 class DrawGatheringPlace extends Draw {
   constructor(style) {
     super()
-    this._floatingAnchor = undefined
+    this._maxAnchorSize = 3
     this._style = {
       ...DEF_STYLE,
       ...style
@@ -25,7 +26,12 @@ class DrawGatheringPlace extends Draw {
     this._graphics = new GatheringPlaceGraphics()
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '单击选择点位'
     this._delegate = new Cesium.Entity({
       polygon: {
         ...this._style,
@@ -39,28 +45,33 @@ class DrawGatheringPlace extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    let position = this._clampToGround ? e.surfacePosition : e.position
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let gatheringPlace = new GatheringPlace(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(gatheringPlace)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
     let len = this._positions.length
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
     this._positions.push(position)
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
     this._graphics.positions = this._positions
-    this.createAnchor(position)
-    if (len > 2) {
+    if (len >= this._maxAnchorSize) {
       this._positions.pop()
-      this.unbindEvent()
-      let gatheringPlace = new GatheringPlace(
-        Transform.transformCartesianArrayToWGS84Array(this._positions)
-      )
-      gatheringPlace.setStyle(this._style)
-      this._plotEvent.raiseEvent(gatheringPlace)
+      this.drawTool.fire(PlotEventType.DRAW_STOP)
     }
   }
 }

modules/plot/draw/DrawPoint.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { Point } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -24,7 +25,12 @@ class DrawPoint extends Draw {
     }
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '单击选择点位'
     this._delegate = new Cesium.Entity({
       position: new Cesium.CallbackProperty(() => {
         return this._position
@@ -33,20 +39,37 @@ class DrawPoint extends Draw {
         ...this._style
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    this._position = this._clampToGround ? e.surfacePosition : e.position
-    this.unbindEvent()
-    let point = new Point(Transform.transformCartesianToWGS84(this._position))
-    point.setStyle(this._style)
-    this._plotEvent.raiseEvent(point)
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let point = new Point(
+      Transform.transformCartesianToWGS84(this._position)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(point)
   }
 
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, this._tooltipMess)
-    this._position = this._clampToGround ? e.surfacePosition : e.position
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
+    this._position = position
+    this.drawTool.fire(PlotEventType.DRAW_STOP, position)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onAnchorMoving(position) {
+    this._position = position
   }
 }
 

modules/plot/draw/DrawPolygon.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { Polygon } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -20,10 +21,14 @@ class DrawPolygon extends Draw {
       ...DEF_STYLE,
       ...style
     }
-    this._tooltipMess = '左击选择点位,右击结束'
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '左击选择点位,右击结束'
     this._delegate = new Cesium.Entity({
       polygon: {
         ...this._style,
@@ -36,31 +41,28 @@ class DrawPolygon extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (!position) {
-      return false
-    }
-    let len = this._positions.length
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
-    this._positions.push(position)
-    this.createAnchor(position)
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
     let polygon = new Polygon(
       Transform.transformCartesianArrayToWGS84Array(this._positions)
-    )
-    polygon.setStyle(this._style)
-    this._plotEvent.raiseEvent(polygon)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(polygon)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
+    this._positions.push(position)
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
   }
 }
 

modules/plot/draw/DrawPolyline.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { Polyline } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -20,10 +21,14 @@ class DrawPolyline extends Draw {
       ...DEF_STYLE,
       ...style
     }
-    this._tooltipMess = '左击选择点位,右击结束'
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '左击选择点位,右击结束'
     this._delegate = new Cesium.Entity({
       polyline: {
         ...this._style,
@@ -32,31 +37,29 @@ class DrawPolyline extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (!position) {
-      return false
-    }
-    let len = this._positions.length
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
-    this._positions.push(position)
-    this.createAnchor(position)
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
     let polyline = new Polyline(
       Transform.transformCartesianArrayToWGS84Array(this._positions)
-    )
-    polyline.setStyle(this._style)
-    this._plotEvent.raiseEvent(polyline)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(polyline)
+  }
+
+  /**
+   *
+   * @param position
+   * @returns {boolean}
+   * @private
+   */
+  _onDrawAnchor(position) {
+    this._positions.push(position)
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
   }
 }
 

modules/plot/draw/DrawRectangle.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { Rectangle } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -15,13 +16,19 @@ const DEF_STYLE = {
 class DrawRectangle extends Draw {
   constructor(style) {
     super()
+    this._maxAnchorSize = 2
     this._style = {
       ...DEF_STYLE,
       ...style
     }
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.drawTool.tooltipMess = '左击选择点位'
     this._delegate = new Cesium.Entity({
       rectangle: {
         ...this._style,
@@ -34,30 +41,32 @@ class DrawRectangle extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (!position) {
-      return false
-    }
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let rectangle = new Rectangle(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(rectangle)
+  }
+
+  /**
+   *
+   * @param position
+   * @private
+   */
+  _onDrawAnchor(position) {
     let len = this._positions.length
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
     this._positions.push(position)
-    this.createAnchor(position)
-    if (len > 1) {
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
+    if (len >= this._maxAnchorSize) {
       this._positions.pop()
-      this.unbindEvent()
-      let rectangle = new Rectangle(
-        Transform.transformCartesianArrayToWGS84Array(this._positions)
-      )
-      rectangle.setStyle(this._style)
-      this._plotEvent.raiseEvent(rectangle)
+      this.drawTool.fire(PlotEventType.DRAW_STOP)
     }
   }
 }

modules/plot/draw/DrawTailedAttackArrow.js

@@ -4,6 +4,7 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import { TailedAttackArrow } from '@dc-modules/overlay'
 import Draw from './Draw'
@@ -17,7 +18,7 @@ const DEF_STYLE = {
 class DrawTailedAttackArrow extends Draw {
   constructor(style) {
     super()
-    this._floatingAnchor = undefined
+    this._maxAnchorSize = 3
     this._style = {
       ...DEF_STYLE,
       ...style
@@ -25,7 +26,12 @@ class DrawTailedAttackArrow extends Draw {
     this._graphics = new TailedAttackArrowGraphics()
   }
 
+  /**
+   *
+   * @private
+   */
   _mountEntity() {
+    this.drawTool.tooltipMess = '左击选择点位'
     this._delegate = new Cesium.Entity({
       polygon: {
         ...this._style,
@@ -39,31 +45,34 @@ class DrawTailedAttackArrow extends Draw {
         }, false)
       }
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onClick(e) {
-    let position = this._clampToGround ? e.surfacePosition : e.position
-    if (!position) {
-      return false
-    }
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    let tailedAttackArrow = new TailedAttackArrow(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    ).setStyle(this._style)
+    this._options.onDrawStop && this._options.onDrawStop(tailedAttackArrow)
+  }
+
+  /**
+   *
+   * @param position
+   * @returns {boolean}
+   * @private
+   */
+  _onDrawAnchor(position) {
     let len = this._positions.length
-    if (len === 0) {
-      this._positions.push(position)
-      this.createAnchor(position)
-      this._floatingAnchor = this.createAnchor(position)
-    }
     this._positions.push(position)
+    this.drawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
     this._graphics.positions = this._positions
-    this.createAnchor(position)
-    if (len > 2) {
+    if (len >= this._maxAnchorSize) {
       this._positions.pop()
-      this.unbindEvent()
-      let tailedAttackArrow = new TailedAttackArrow(
-        Transform.transformCartesianArrayToWGS84Array(this._positions)
-      )
-      tailedAttackArrow.setStyle(this._style)
-      this._plotEvent.raiseEvent(tailedAttackArrow)
+      this.drawTool.fire(PlotEventType.DRAW_STOP)
     }
   }
 }

modules/plot/edit/Edit.js

@@ -4,130 +4,148 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
-import { MouseEventType } from '@dc-modules/event'
+import { PlotEventType } from '@dc-modules/event'
+import { Transform } from '@dc-modules/transform'
 
 class Edit {
-  constructor() {
+  constructor(overlay) {
     this._viewer = undefined
-    this._overlay = undefined
-    this._anchors = []
-    this._delegate = undefined
-    this._pickedAnchor = undefined
-    this._isMoving = false
-    this._clampToGround = true
-    this._tooltip = undefined
-    this._tooltipMess = '点击锚点移动,右击结束编辑'
     this._layer = undefined
-    this._anchorLayer = undefined
-    this._layer = undefined
-    this._plotEvent = undefined
+    this._overlay = overlay
+    this._overlay.show = false
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(overlay.delegate)
     this._options = {}
     this._positions = []
   }
 
-  _mountEntity() {}
-
-  _mountAnchor() {}
+  get editTool() {
+    return this._viewer.editTool
+  }
 
-  _onClick(e) {}
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._options.onEditStop && this._options.onEditStop(this._overlay)
+  }
 
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, this._tooltipMess)
-    if (!this._isMoving) {
-      return false
-    }
-    if (this._pickedAnchor && this._pickedAnchor.position) {
-      let properties = this._pickedAnchor.properties.getValue(
-        Cesium.JulianDate.now()
-      )
-      let position = this._clampToGround ? e.surfacePosition : e.position
-      if (!position) {
-        return false
-      }
-      this._pickedAnchor.position.setValue(position)
-      this._positions[properties.index] = position
-    }
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._options.onEditStop && this._options.onEditStop(this._overlay)
   }
 
-  _onRightClick(e) {}
+  /**
+   *
+   * @private
+   */
+  _mountAnchor() {
+    this._positions = [].concat(
+      Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
+    )
+    this._positions.forEach((item, index) => {
+      this.editTool.fire(PlotEventType.CREATE_ANCHOR, {
+        position: item,
+        index: index
+      })
+    })
+  }
 
-  bindEvent() {
-    this._viewer.on(MouseEventType.CLICK, this._onClick, this)
-    this._viewer.on(MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
-    this._viewer.on(MouseEventType.RIGHT_CLICK, this._onRightClick, this)
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @returns {boolean}
+   * @private
+   */
+  _onEditAnchorStop({ pickedAnchor, position }) {
+    let properties = pickedAnchor.properties.getValue(Cesium.JulianDate.now())
+    this._positions[properties.index] = position
   }
 
-  unbindEvent() {
-    this._viewer.off(MouseEventType.CLICK, this._onClick, this)
-    this._viewer.off(MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
-    this._viewer.off(MouseEventType.RIGHT_CLICK, this._onRightClick, this)
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @private
+   */
+  _onAnchorMoving({ pickedAnchor, position }) {
+    let properties = pickedAnchor.properties.getValue(Cesium.JulianDate.now())
+    this._positions[properties.index] = position
   }
 
   /**
    *
+   * @param pickedAnchor
    * @param position
-   * @param index
-   * @param isMid
-   * @param isCenter
+   * @private
    */
-  createAnchor(position, index, isMid = false, isCenter = false) {
-    let image = isMid
-      ? this._options.icon_midAnchor
-      : isCenter
-      ? this._options.icon_center
-      : this._options.icon_anchor
-    let anchor = this._anchorLayer.add({
-      position: position,
-      billboard: {
-        image: image,
-        width: 12,
-        height: 12,
-        eyeOffset: new Cesium.ConstantProperty(
-          new Cesium.Cartesian3(0, 0, -500)
-        ),
-        heightReference:
-          this._viewer.scene.mode === Cesium.SceneMode.SCENE3D &&
-          this._clampToGround
-            ? Cesium.HeightReference.CLAMP_TO_GROUND
-            : Cesium.HeightReference.NONE
-      },
-      properties: {
-        isMid: isMid,
-        index: index
-      }
-    })
-    this._anchors.push(anchor)
+  _onEditStop({ pickedAnchor, position }) {
+    this._unbindEvent()
+    this._viewer.editTool.deactivate()
+    this._layer.entities.remove(this._delegate)
+    this._stopdHook()
+  }
+
+  /**
+   *
+   * @returns {Edit}
+   * @private
+   */
+  _bindEvent() {
+    this.editTool.on(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
+    this.editTool.on(
+      PlotEventType.EDIT_ANCHOR_STOP,
+      this._onEditAnchorStop,
+      this
+    )
+    this.editTool.on(PlotEventType.EDIT_STOP, this._onEditStop, this)
+    return this
   }
 
   /**
    *
-   * @param p1
-   * @param p2
-   * @returns {Cartesian3}
+   * @private
    */
-  computeMidPosition(p1, p2) {
-    let c1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(p1)
-    let c2 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(p2)
-    let cm = new Cesium.EllipsoidGeodesic(c1, c2).interpolateUsingFraction(0.5)
-    return Cesium.Ellipsoid.WGS84.cartographicToCartesian(cm)
+  _unbindEvent() {
+    this.editTool.off(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
+    this.editTool.off(
+      PlotEventType.EDIT_ANCHOR_STOP,
+      this._onEditAnchorStop,
+      this
+    )
+    this.editTool.off(PlotEventType.EDIT_STOP, this._onEditStop, this)
   }
 
   /**
    *
-   * @param plot
-   * @param clampToGround
+   * @param measure
+   * @param options
+   * @returns {Edit}
    */
-  start(plot, clampToGround) {
-    this._viewer = plot.viewer
-    this._tooltip = plot.viewer.tooltip
-    this._layer = plot.overlayLayer
-    this._anchorLayer = plot.anchorLayer
-    this._plotEvent = plot.plotEvent
-    this._options = plot.options
-    this._clampToGround = clampToGround
-    this._mountEntity()
+  start(measure, options) {
+    this._viewer = measure.viewer
+    this._layer = measure.layer
+    this._options = options
+    this._viewer.editTool.tooltipMess = '点击锚点移动,右击结束编辑'
+    this._viewer.editTool.activate(options)
+    this._mountedHook()
     this._mountAnchor()
-    this.bindEvent()
+    this._unbindEvent()
+    this._bindEvent()
+    return this
   }
 }
 

modules/plot/edit/EditAttackArrow.js

@@ -4,21 +4,20 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
-import { Transform } from '@dc-modules/transform'
 import Edit from './Edit'
 import AttackArrowGraphics from '../graphics/AttackArrowGraphics'
 
 class EditAttackArrow extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
+    super(overlay)
     this._graphics = new AttackArrowGraphics()
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
       if (this._positions.length > 2) {
         this._graphics.positions = this._positions
@@ -27,48 +26,7 @@ class EditAttackArrow extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
-  }
-
-  _mountAnchor() {
-    this._positions = [].concat(
-      Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
-    )
-    this._positions.forEach((item, index) => {
-      this.createAnchor(item, index)
-    })
-  }
-
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        if (!position) {
-          return false
-        }
-        this._pickedAnchor.position.setValue(position)
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        this._positions[properties.index] = position
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target || !e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._layer.entities.add(this._delegate)
   }
 }
 

modules/plot/edit/EditBillboard.js

@@ -9,33 +9,41 @@ import Edit from './Edit'
 
 class EditBillboard extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
+    super(overlay)
     this._position = undefined
-    this._tooltipMess = '右击结束编辑'
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.editTool.tooltipMess = '右击结束编辑'
     this._position = this._delegate.position.getValue(Cesium.JulianDate.now())
     this._delegate.position = new Cesium.CallbackProperty(() => {
       return this._position
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, this._tooltipMess)
-    this._position = this._clampToGround ? e.surfacePosition : e.position
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
     this._overlay.position = Transform.transformCartesianToWGS84(this._position)
     this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._options.onEditStop && this._options.onEditStop(this._overlay)
+  }
+
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @private
+   */
+  _onAnchorMoving({ pickedAnchor, position }) {
+    this._position = position
   }
 }
 

modules/plot/edit/EditCircle.js

@@ -4,26 +4,29 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import Edit from './Edit'
 
 class EditCircle extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
+    super(overlay)
     this._center = undefined
     this._radius = 0
   }
 
-  _mountEntity() {
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._radius = this._overlay.radius
     this._center = Transform.transformWGS84ToCartesian(this._overlay.center)
-    this._overlay.show = false
-    this._delegate = new Cesium.Entity({
-      polygon: {
-        material: this._overlay.delegate?.polygon?.material
-      }
-    })
+    // this._delegate = new Cesium.Entity({
+    //   polygon: {
+    //     material: this._overlay.delegate?.polygon?.material
+    //   }
+    // })
     this._positions = [].concat([
       this._center,
       this._computeCirclePoints(this._center, this._radius)[0]
@@ -44,15 +47,16 @@ class EditCircle extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
-  }
-
-  _mountAnchor() {
-    this._positions.forEach((item, index) => {
-      this.createAnchor(item, index, false, index % 2 === 0)
-    })
+    this._layer.entities.add(this._delegate)
   }
 
+  /**
+   *
+   * @param center
+   * @param radius
+   * @returns {*[]}
+   * @private
+   */
   _computeCirclePoints(center, radius) {
     let pnts = []
     let cep = Cesium.EllipseGeometryLibrary.computeEllipsePositions(
@@ -72,36 +76,31 @@ class EditCircle extends Edit {
     return pnts
   }
 
-  _onClick(e) {
-    let now = Cesium.JulianDate.now()
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        if (!position) {
-          return false
-        }
-        this._pickedAnchor.position.setValue(position)
-        let properties = this._pickedAnchor.properties.getValue(now)
-        this._positions[properties.index] = position
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target || !e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
     this._overlay.center = Transform.transformCartesianToWGS84(
       this._positions[0]
     )
     this._overlay.radius = this._radius
     this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._options.onEditStop && this._options.onEditStop(this._overlay)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _mountAnchor() {
+    this._positions.forEach((item, index) => {
+      this.editTool.fire(PlotEventType.CREATE_ANCHOR, {
+        position: item,
+        index: index,
+        isCenter: index % 2 === 0
+      })
+    })
   }
 }
 

modules/plot/edit/EditDoubleArrow.js

@@ -4,21 +4,20 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
-import { Transform } from '@dc-modules/transform'
 import Edit from './Edit'
 import DoubleArrowGraphics from '../graphics/DoubleArrowGraphics'
 
 class EditDoubleArrow extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
+    super(overlay)
     this._graphics = new DoubleArrowGraphics()
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
       if (this._positions.length > 2) {
         this._graphics.positions = this._positions
@@ -27,45 +26,7 @@ class EditDoubleArrow extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
-  }
-
-  _mountAnchor() {
-    this._positions = [].concat(
-      Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
-    )
-    this._positions.forEach((item, index) => {
-      this.createAnchor(item, index)
-    })
-  }
-
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        this._pickedAnchor.position.setValue(position)
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        this._positions[properties.index] = position
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target || !e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._layer.entities.add(this._delegate)
   }
 }
 

modules/plot/edit/EditFineArrow.js

@@ -4,21 +4,22 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
 import Edit from './Edit'
 import FineArrowGraphics from '../graphics/FineArrowGraphics'
 
 class EditFineArrow extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
+    super(overlay)
     this._graphics = new FineArrowGraphics()
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
       if (this._positions.length > 1) {
         this._graphics.positions = this._positions
@@ -27,45 +28,7 @@ class EditFineArrow extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
-  }
-
-  _mountAnchor() {
-    this._positions = [].concat(
-      Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
-    )
-    this._positions.forEach((item, index) => {
-      this.createAnchor(item, index)
-    })
-  }
-
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        this._pickedAnchor.position.setValue(position)
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        this._positions[properties.index] = position
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target || !e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._layer.entities.add(this._delegate)
   }
 }
 

modules/plot/edit/EditGatheringPlace.js

@@ -4,21 +4,20 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
-import { Transform } from '@dc-modules/transform'
 import Edit from './Edit'
 import GatheringPlaceGraphics from '../graphics/GatheringPlaceGraphics'
 
 class EditGatheringPlace extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
+    super(overlay)
     this._graphics = new GatheringPlaceGraphics()
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
       if (this._positions.length > 1) {
         this._graphics.positions = this._positions
@@ -27,48 +26,7 @@ class EditGatheringPlace extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
-  }
-
-  _mountAnchor() {
-    this._positions = [].concat(
-      Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
-    )
-    this._positions.forEach((item, index) => {
-      this.createAnchor(item, index)
-    })
-  }
-
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        if (!position) {
-          return false
-        }
-        this._pickedAnchor.position.setValue(position)
-        this._positions[properties.index] = position
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target || !e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._layer.entities.add(this._delegate)
   }
 }
 

modules/plot/edit/EditPoint.js

@@ -9,33 +9,41 @@ import Edit from './Edit'
 
 class EditPoint extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
+    super(overlay)
     this._position = undefined
-    this._tooltipMess = '右击结束编辑'
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
+    this.editTool.tooltipMess = '右击结束编辑'
     this._position = this._delegate.position.getValue(Cesium.JulianDate.now())
     this._delegate.position = new Cesium.CallbackProperty(() => {
       return this._position
     })
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, this._tooltipMess)
-    this._position = this._clampToGround ? e.surfacePosition : e.position
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
+  /**
+   *
+   * @private
+   */
+  _stopdHook() {
     this._overlay.position = Transform.transformCartesianToWGS84(this._position)
     this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._options.onEditStop && this._options.onEditStop(this._overlay)
+  }
+
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @private
+   */
+  _onAnchorMoving({ pickedAnchor, position }) {
+    this._position = position
   }
 }
 

modules/plot/edit/EditPolygon.js

@@ -4,20 +4,21 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
+import { PlotEventType } from '@dc-modules/event'
 import { Transform } from '@dc-modules/transform'
+import { midCartesian } from '@dc-modules/math'
 import Edit from './Edit'
 
 class EditPolygon extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
-    this._positions = []
+    super(overlay)
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(time => {
       if (this._positions.length > 2) {
         return new Cesium.PolygonHierarchy(this._positions)
@@ -25,9 +26,13 @@ class EditPolygon extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
+  /**
+   *
+   * @private
+   */
   _mountAnchor() {
     let positions = [].concat(
       this._overlay.delegate.polygon.hierarchy.getValue(Cesium.JulianDate.now())
@@ -35,135 +40,121 @@ class EditPolygon extends Edit {
     )
     positions.push(positions[0])
     for (let i = 0; i < positions.length - 1; i++) {
-      let mid = this.computeMidPosition(positions[i], positions[i + 1])
+      let mid = midCartesian(positions[i], positions[i + 1])
       this._positions.push(positions[i])
       this._positions.push(mid)
     }
     this._positions.forEach((item, index) => {
-      this.createAnchor(item, index, index % 2 !== 0)
+      this.editTool.fire(PlotEventType.CREATE_ANCHOR, {
+        position: item,
+        index: index,
+        isMid: index % 2 !== 0
+      })
     })
   }
 
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        if (!position) {
-          return false
-        }
-        this._pickedAnchor.position.setValue(position)
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        let currentIndex = properties.index
-        if (properties.isMid) {
-          let preMidPosition
-          let nextMidPosition
-          let len = this._positions.length
-          if (currentIndex === len - 1) {
-            preMidPosition = this.computeMidPosition(
-              this._positions[currentIndex],
-              this._positions[currentIndex - 1]
-            )
-            nextMidPosition = this.computeMidPosition(
-              this._positions[currentIndex],
-              this._positions[0]
-            )
-          } else {
-            preMidPosition = this.computeMidPosition(
-              this._positions[currentIndex],
-              this._positions[currentIndex - 1]
-            )
-            nextMidPosition = this.computeMidPosition(
-              this._positions[currentIndex],
-              this._positions[currentIndex + 1]
-            )
-          }
-          this._positions.splice(
-            properties.index,
-            1,
-            preMidPosition,
-            position,
-            nextMidPosition
-          )
-          this._anchorLayer.removeAll()
-          this._anchors = []
-          this._positions.forEach((item, index) => {
-            this.createAnchor(item, index, index % 2 !== 0)
-          })
-        }
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
-    if (!this._isMoving) {
-      return false
-    }
-    if (this._pickedAnchor && this._pickedAnchor.position) {
-      let properties = this._pickedAnchor.properties.getValue(
-        Cesium.JulianDate.now()
-      )
-      let position = this._clampToGround ? e.surfacePosition : e.position
-      if (!position) {
-        return false
-      }
-      let currentIndex = properties.index
-      this._pickedAnchor.position.setValue(position)
-      this._positions[currentIndex] = position
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @returns {boolean}
+   * @private
+   */
+  _onEditAnchorStop({ pickedAnchor, position }) {
+    let properties = pickedAnchor.properties.getValue(Cesium.JulianDate.now())
+    let currentIndex = properties.index
+    if (properties.isMid) {
+      let preMidPosition
+      let nextMidPosition
       let len = this._positions.length
-      if (!properties.isMid) {
-        let preAnchorIndex = -1
-        let preMidAnchorIndex = -1
-        let nextAnchorIndex = -1
-        let nextMidAnchorIndex = -1
-        if (currentIndex === 0) {
-          preAnchorIndex = len - 2
-          preMidAnchorIndex = len - 1
-          nextAnchorIndex = currentIndex + 2
-          nextMidAnchorIndex = currentIndex + 1
-        } else if (currentIndex === len - 2) {
-          preAnchorIndex = currentIndex - 2
-          preMidAnchorIndex = currentIndex - 1
-          nextAnchorIndex = 0
-          nextMidAnchorIndex = len - 1
-        } else {
-          preAnchorIndex = currentIndex - 2
-          preMidAnchorIndex = currentIndex - 1
-          nextAnchorIndex = currentIndex + 2
-          nextMidAnchorIndex = currentIndex + 1
-        }
-        let preMidPosition = this.computeMidPosition(
-          this._positions[preAnchorIndex],
-          this._positions[currentIndex]
+      if (currentIndex === len - 1) {
+        preMidPosition = midCartesian(
+          this._positions[currentIndex],
+          this._positions[currentIndex - 1]
         )
-        let nextMidPosition = this.computeMidPosition(
-          this._positions[nextAnchorIndex],
-          this._positions[currentIndex]
+        nextMidPosition = midCartesian(
+          this._positions[currentIndex],
+          this._positions[0]
+        )
+      } else {
+        preMidPosition = midCartesian(
+          this._positions[currentIndex],
+          this._positions[currentIndex - 1]
+        )
+        nextMidPosition = midCartesian(
+          this._positions[currentIndex],
+          this._positions[currentIndex + 1]
         )
-        this._positions[preMidAnchorIndex] = preMidPosition
-        this._positions[nextMidAnchorIndex] = nextMidPosition
-        this._anchors[preMidAnchorIndex].position.setValue(preMidPosition)
-        this._anchors[nextMidAnchorIndex].position.setValue(nextMidPosition)
       }
+      this._positions.splice(
+        currentIndex,
+        1,
+        preMidPosition,
+        position,
+        nextMidPosition
+      )
+      this.editTool.fire(PlotEventType.CLEAR_ANCHOR)
+      this._positions.forEach((item, index) => {
+        this.editTool.fire(PlotEventType.CREATE_ANCHOR, {
+          position: item,
+          index: index,
+          isMid: index % 2 !== 0
+        })
+      })
     }
   }
 
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @private
+   */
+  _onAnchorMoving({ pickedAnchor, position }) {
+    let properties = pickedAnchor.properties.getValue(Cesium.JulianDate.now())
+    let currentIndex = properties.index
+    this._positions[currentIndex] = position
+    let len = this._positions.length
+    if (!properties.isMid) {
+      let preAnchorIndex = -1
+      let preMidAnchorIndex = -1
+      let nextAnchorIndex = -1
+      let nextMidAnchorIndex = -1
+      if (currentIndex === 0) {
+        preAnchorIndex = len - 2
+        preMidAnchorIndex = len - 1
+        nextAnchorIndex = currentIndex + 2
+        nextMidAnchorIndex = currentIndex + 1
+      } else if (currentIndex === len - 2) {
+        preAnchorIndex = currentIndex - 2
+        preMidAnchorIndex = currentIndex - 1
+        nextAnchorIndex = 0
+        nextMidAnchorIndex = len - 1
+      } else {
+        preAnchorIndex = currentIndex - 2
+        preMidAnchorIndex = currentIndex - 1
+        nextAnchorIndex = currentIndex + 2
+        nextMidAnchorIndex = currentIndex + 1
+      }
+      let preMidPosition = midCartesian(
+        this._positions[preAnchorIndex],
+        this._positions[currentIndex]
+      )
+      let nextMidPosition = midCartesian(
+        this._positions[nextAnchorIndex],
+        this._positions[currentIndex]
+      )
+      this._positions[preMidAnchorIndex] = preMidPosition
+      this._positions[nextMidAnchorIndex] = nextMidPosition
+      this.editTool.fire(PlotEventType.UPDATE_ANCHOR, {
+        index: preMidAnchorIndex,
+        position: preMidPosition
+      })
+      this.editTool.fire(PlotEventType.UPDATE_ANCHOR, {
+        index: nextMidAnchorIndex,
+        position: nextMidPosition
+      })
+    }
   }
 }
 

modules/plot/edit/EditPolyline.js

@@ -4,20 +4,20 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
-import { Transform } from '@dc-modules/transform'
+import { PlotEventType } from '@dc-modules/event'
+import { midCartesian } from '@dc-modules/math'
 import Edit from './Edit'
 
 class EditPolyline extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
-    this._positions = []
+    super(overlay)
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.polyline.positions = new Cesium.CallbackProperty(() => {
       if (this._positions.length > 1) {
         return this._positions
@@ -25,9 +25,13 @@ class EditPolyline extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
+    this._layer.entities.add(this._delegate)
   }
 
+  /**
+   *
+   * @private
+   */
   _mountAnchor() {
     let positions = [].concat(
       this._overlay.delegate.polyline.positions.getValue(
@@ -35,121 +39,112 @@ class EditPolyline extends Edit {
       )
     )
     for (let i = 0; i < positions.length - 1; i++) {
-      let mid = this.computeMidPosition(positions[i], positions[i + 1])
+      let mid = midCartesian(positions[i], positions[i + 1])
       this._positions.push(positions[i])
       this._positions.push(mid)
     }
     this._positions.push(positions[positions.length - 1])
     this._positions.forEach((item, index) => {
-      this.createAnchor(item, index, index % 2 !== 0)
+      this.editTool.fire(PlotEventType.CREATE_ANCHOR, {
+        position: item,
+        index: index,
+        isMid: index % 2 !== 0
+      })
     })
   }
 
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        this._pickedAnchor.position.setValue(position)
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        if (properties.isMid) {
-          let preMidPosition = this.computeMidPosition(
-            this._positions[properties.index],
-            this._positions[properties.index - 1]
-          )
-          let nextMidPosition = this.computeMidPosition(
-            this._positions[properties.index],
-            this._positions[properties.index + 1]
-          )
-          this._anchorLayer.removeAll()
-          this._anchors = []
-          this._positions.splice(
-            properties.index,
-            1,
-            preMidPosition,
-            position,
-            nextMidPosition
-          )
-          this._positions.forEach((item, index) => {
-            this.createAnchor(item, index, index % 2 !== 0)
-          })
-        }
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @returns {boolean}
+   * @private
+   */
+  _onEditAnchorStop({ pickedAnchor, position }) {
+    let properties = pickedAnchor.properties.getValue(Cesium.JulianDate.now())
+    let currentIndex = properties.index
+    if (properties.isMid) {
+      let preMidPosition = midCartesian(
+        this._positions[currentIndex],
+        this._positions[currentIndex - 1]
+      )
+      let nextMidPosition = midCartesian(
+        this._positions[currentIndex],
+        this._positions[currentIndex + 1]
+      )
+      this._positions.splice(
+        currentIndex,
+        1,
+        preMidPosition,
+        position,
+        nextMidPosition
+      )
+      this.editTool.fire(PlotEventType.CLEAR_ANCHOR)
+      this._positions.forEach((item, index) => {
+        this.editTool.fire(PlotEventType.CREATE_ANCHOR, {
+          position: item,
+          index: index,
+          isMid: index % 2 !== 0
+        })
+      })
     }
   }
 
-  _onMouseMove(e) {
-    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
-    if (!this._isMoving) {
-      return false
-    }
-    if (this._pickedAnchor && this._pickedAnchor.position) {
-      let properties = this._pickedAnchor.properties.getValue(
-        Cesium.JulianDate.now()
-      )
-      let position = this._clampToGround ? e.surfacePosition : e.position
-      if (!position) {
-        return false
+  /**
+   *
+   * @param pickedAnchor
+   * @param position
+   * @private
+   */
+  _onAnchorMoving({ pickedAnchor, position }) {
+    let properties = pickedAnchor.properties.getValue(Cesium.JulianDate.now())
+    let currentIndex = properties.index
+    this._positions[currentIndex] = position
+    if (!properties.isMid && this._options.maxAnchorSize > 2) {
+      let preAnchorIndex = -1
+      let preMidAnchorIndex = -1
+      let nextAnchorIndex = -1
+      let nextMidAnchorIndex = -1
+      let len = this._positions.length
+
+      if (currentIndex === 0) {
+        nextAnchorIndex = currentIndex + 2
+        nextMidAnchorIndex = currentIndex + 1
+      } else if (properties.index === len - 1) {
+        preAnchorIndex = currentIndex - 2
+        preMidAnchorIndex = currentIndex - 1
+      } else {
+        preAnchorIndex = currentIndex - 2
+        preMidAnchorIndex = currentIndex - 1
+        nextAnchorIndex = currentIndex + 2
+        nextMidAnchorIndex = currentIndex + 1
       }
-      this._pickedAnchor.position.setValue(position)
-      this._positions[properties.index] = position
-      if (!properties.isMid) {
-        let currentIndex = properties.index
-        let preAnchorIndex = -1
-        let preMidAnchorIndex = -1
-        let nextAnchorIndex = -1
-        let nextMidAnchorIndex = -1
-        let len = this._positions.length
-        if (currentIndex === 0) {
-          nextAnchorIndex = currentIndex + 2
-          nextMidAnchorIndex = currentIndex + 1
-        } else if (properties.index === len - 1) {
-          preAnchorIndex = currentIndex - 2
-          preMidAnchorIndex = currentIndex - 1
-        } else {
-          preAnchorIndex = currentIndex - 2
-          preMidAnchorIndex = currentIndex - 1
-          nextAnchorIndex = currentIndex + 2
-          nextMidAnchorIndex = currentIndex + 1
-        }
 
-        if (preAnchorIndex > 0) {
-          let preMidPosition = this.computeMidPosition(
-            this._positions[preAnchorIndex],
-            this._positions[currentIndex]
-          )
-          this._positions[preMidAnchorIndex] = preMidPosition
-          this._anchors[preMidAnchorIndex].position.setValue(preMidPosition)
-        }
+      if (preAnchorIndex > 0) {
+        let preMidPosition = midCartesian(
+          this._positions[preAnchorIndex],
+          this._positions[currentIndex]
+        )
+        this._positions[preMidAnchorIndex] = preMidPosition
+        this.editTool.fire(PlotEventType.UPDATE_ANCHOR, {
+          index: preMidAnchorIndex,
+          position: preMidPosition
+        })
+      }
 
-        if (nextAnchorIndex > 0) {
-          let nextMidPosition = this.computeMidPosition(
-            this._positions[nextAnchorIndex],
-            this._positions[currentIndex]
-          )
-          this._positions[nextMidAnchorIndex] = nextMidPosition
-          this._anchors[nextMidAnchorIndex].position.setValue(nextMidPosition)
-        }
+      if (nextAnchorIndex > 0) {
+        let nextMidPosition = midCartesian(
+          this._positions[nextAnchorIndex],
+          this._positions[currentIndex]
+        )
+        this._positions[nextMidAnchorIndex] = nextMidPosition
+        this.editTool.fire(PlotEventType.UPDATE_ANCHOR, {
+          index: nextMidAnchorIndex,
+          position: nextMidPosition
+        })
       }
     }
   }
-
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
-  }
 }
 
 export default EditPolyline

modules/plot/edit/EditRectangle.js

@@ -9,15 +9,15 @@ import Edit from './Edit'
 
 class EditRectangle extends Edit {
   constructor(overlay) {
-    super()
+    super(overlay)
     this._overlay = overlay
-    this._positions = []
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.rectangle.coordinates = new Cesium.CallbackProperty(time => {
       if (this._positions.length > 1) {
         return Cesium.Rectangle.fromCartesianArray(this._positions)
@@ -25,48 +25,7 @@ class EditRectangle extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
-  }
-
-  _mountAnchor() {
-    this._positions = [].concat(
-      Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
-    )
-    this._positions.forEach((item, index) => {
-      this.createAnchor(item, index)
-    })
-  }
-
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        if (!position) {
-          return false
-        }
-        this._pickedAnchor.position.setValue(position)
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        this._positions[properties.index] = position
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target || !e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._layer.entities.add(this._delegate)
   }
 }
 

modules/plot/edit/EditTailedAttackArrow.js

@@ -4,22 +4,20 @@
  */
 
 import { Cesium } from '@dc-modules/namespace'
-import { Transform } from '@dc-modules/transform'
 import Edit from './Edit'
 import TailedAttackArrowGraphics from '../graphics/TailedAttackArrowGraphics'
 
 class EditTailedAttackArrow extends Edit {
   constructor(overlay) {
-    super()
-    this._overlay = overlay
-    this._positions = []
+    super(overlay)
     this._graphics = new TailedAttackArrowGraphics()
   }
 
-  _mountEntity() {
-    this._delegate = new Cesium.Entity()
-    this._delegate.merge(this._overlay.delegate)
-    this._overlay.show = false
+  /**
+   *
+   * @private
+   */
+  _mountedHook() {
     this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
       if (this._positions.length > 2) {
         this._graphics.positions = this._positions
@@ -28,48 +26,7 @@ class EditTailedAttackArrow extends Edit {
         return null
       }
     }, false)
-    this._layer.add(this._delegate)
-  }
-
-  _mountAnchor() {
-    this._positions = [].concat(
-      Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
-    )
-    this._positions.forEach((item, index) => {
-      this.createAnchor(item, index)
-    })
-  }
-
-  _onClick(e) {
-    if (this._isMoving) {
-      this._isMoving = false
-      if (this._pickedAnchor && this._pickedAnchor.position) {
-        let position = this._clampToGround ? e.surfacePosition : e.position
-        if (!position) {
-          return false
-        }
-        let properties = this._pickedAnchor.properties.getValue(
-          Cesium.JulianDate.now()
-        )
-        this._pickedAnchor.position.setValue(position)
-        this._positions[properties.index] = position
-      }
-    } else {
-      this._isMoving = true
-      if (!e.target || !e.target.id) {
-        return false
-      }
-      this._pickedAnchor = e.target.id
-    }
-  }
-
-  _onRightClick(e) {
-    this.unbindEvent()
-    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
-      this._positions
-    )
-    this._overlay.show = true
-    this._plotEvent.raiseEvent(this._overlay)
+    this._layer.entities.add(this._delegate)
   }
 }
 

modules/tools/DrawTool.js

@@ -86,7 +86,7 @@ class DrawTool {
    * @private
    */
   _onCreateAnchor({ position, isCenter = false }) {
-    this._anchorLayer.entities.add({
+    return this._anchorLayer.entities.add({
       position: position,
       billboard: {
         image: isCenter ? this._options.icon_center : this._options.icon_anchor,
@@ -191,6 +191,7 @@ class DrawTool {
     this._unbindEvent()
     this._viewer.tooltip.enable = false
     this._anchorLayer.entities.removeAll()
+    this._floatingAnchor = undefined
     return this
   }
 

modules/tools/EditTool.js

@@ -60,7 +60,7 @@ class EditTool {
         this._pickedAnchor.position.setValue(position)
         this._plotEvent.fire(PlotEventType.EDIT_ANCHOR_STOP, {
           pickedAnchor: this._pickedAnchor,
-          position: position
+          position
         })
       }
       this._isMoving = false
@@ -80,7 +80,7 @@ class EditTool {
    */
   _onMouseMove(e) {
     this._viewer.tooltip.showAt(e.windowPosition, this._tooltipMess)
-    if (!this._isMoving) {
+    if (!this._isMoving && this._anchors.length !== 0) {
       return false
     }
     let position =
@@ -96,7 +96,11 @@ class EditTool {
       this._pickedAnchor.position.setValue(position)
       this._plotEvent.fire(PlotEventType.ANCHOR_MOVING, {
         pickedAnchor: this._pickedAnchor,
-        position: position
+        position
+      })
+    } else if (this._anchors.length === 0) {
+      this._plotEvent.fire(PlotEventType.ANCHOR_MOVING, {
+        position
       })
     }
   }
@@ -111,7 +115,7 @@ class EditTool {
       this._options.clampToModel && e.position ? e.position : e.surfacePosition
     this._plotEvent.fire(PlotEventType.EDIT_STOP, {
       pickedAnchor: this._pickedAnchor,
-      position: position
+      position
     })
   }