add @dc-modules/plot

modules/plot/Plot.js

@@ -0,0 +1,217 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 19:26:06
+ */
+
+import DrawPoint from './draw/DrawPoint'
+import DrawPolyline from './draw/DrawPolyline'
+import DrawPolygon from './draw/DrawPolygon'
+import DrawCircle from './draw/DrawCircle'
+import DrawRectangle from './draw/DrawRectangle'
+import DrawBillboard from './draw/DrawBillboard'
+import DrawAttackArrow from './draw/DrawAttackArrow'
+import DrawDoubleArrow from './draw/DrawDoubleArrow'
+import DrawFineArrow from './draw/DrawFineArrow'
+import DrawGatheringPlace from './draw/DrawGatheringPlace'
+import DrawTailedAttackArrow from './draw/DrawTailedAttackArrow'
+import EditPoint from './edit/EditPoint'
+import EditPolyline from './edit/EditPolyline'
+import EditPolygon from './edit/EditPolygon'
+import EditCircle from './edit/EditCircle'
+import EditRectangle from './edit/EditRectangle'
+import EditBillboard from './edit/EditBillboard'
+import EditAttackArrow from './edit/EditAttackArrow'
+import EditDoubleArrow from './edit/EditDoubleArrow'
+import EditFineArrow from './edit/EditFineArrow'
+import EditGatheringPlace from './edit/EditGatheringPlace'
+import EditTailedAttackArrow from './edit/EditTailedAttackArrow'
+
+const IMG_CIRCLE_RED = require('../images/circle_red.png')
+
+const IMG_CIRCLE_BLUE = require('../images/circle_blue.png')
+
+const IMG_CIRCLE_YELLOW = require('../images/circle_yellow.png')
+
+const { OverlayType } = DC
+
+const { Cesium } = DC.Namespace
+
+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-overlay-layer')
+    this._viewer.dataSources.add(this._anchorLayer)
+    this._state = undefined
+  }
+
+  get viewer() {
+    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 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)
+  }
+
+  _createDrawWorker(type, style) {
+    switch (type) {
+      case OverlayType.POINT:
+        this._drawWorker = new DrawPoint(style)
+        break
+      case OverlayType.POLYLINE:
+        this._drawWorker = new DrawPolyline(style)
+        break
+      case OverlayType.POLYGON:
+        this._drawWorker = new DrawPolygon(style)
+        break
+      case OverlayType.CIRCLE:
+        this._drawWorker = new DrawCircle(style)
+        break
+      case OverlayType.RECTANGLE:
+        this._drawWorker = new DrawRectangle(style)
+        break
+      case OverlayType.BILLBOARD:
+        this._drawWorker = new DrawBillboard(style)
+        break
+      case OverlayType.ATTACK_ARROW:
+        this._drawWorker = new DrawAttackArrow(style)
+        break
+      case OverlayType.DOUBLE_ARROW:
+        this._drawWorker = new DrawDoubleArrow(style)
+        break
+      case OverlayType.FINE_ARROW:
+        this._drawWorker = new DrawFineArrow(style)
+        break
+      case OverlayType.TAILED_ATTACK_ARROW:
+        this._drawWorker = new DrawTailedAttackArrow(style)
+        break
+      case OverlayType.GATHERING_PLACE:
+        this._drawWorker = new DrawGatheringPlace(style)
+        break
+      default:
+        break
+    }
+  }
+
+  _createEditWorker(overlay) {
+    switch (overlay.type) {
+      case OverlayType.POINT:
+        this._editWorker = new EditPoint(overlay)
+        break
+      case OverlayType.POLYLINE:
+        this._editWorker = new EditPolyline(overlay)
+        break
+      case OverlayType.POLYGON:
+        this._editWorker = new EditPolygon(overlay)
+        break
+      case OverlayType.CIRCLE:
+        this._editWorker = new EditCircle(overlay)
+        break
+      case OverlayType.RECTANGLE:
+        this._editWorker = new EditRectangle(overlay)
+        break
+      case OverlayType.BILLBOARD:
+        this._editWorker = new EditBillboard(overlay)
+        break
+      case OverlayType.ATTACK_ARROW:
+        this._editWorker = new EditAttackArrow(overlay)
+        break
+      case OverlayType.DOUBLE_ARROW:
+        this._editWorker = new EditDoubleArrow(overlay)
+        break
+      case OverlayType.FINE_ARROW:
+        this._editWorker = new EditFineArrow(overlay)
+        break
+      case OverlayType.TAILED_ATTACK_ARROW:
+        this._editWorker = new EditTailedAttackArrow(overlay)
+        break
+      case OverlayType.GATHERING_PLACE:
+        this._editWorker = new EditGatheringPlace(overlay)
+        break
+      default:
+        break
+    }
+  }
+
+  draw(type, callback, style) {
+    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)
+  }
+
+  edit(overlay, callback) {
+    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)
+  }
+
+  destroy() {
+    this._plotEvent.removeEventListener(this._completeCallback, this)
+    this._viewer.dataSources.remove(this._overlayLayer)
+    this._viewer.dataSources.remove(this._anchorLayer)
+    this._viewer = undefined
+    this._plotEvent = undefined
+  }
+}
+
+export default Plot

modules/plot/draw/Draw.js

@@ -0,0 +1,70 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-31 19:45:32
+ */
+
+const { MouseEventType } = DC
+const { Cesium } = DC.Namespace
+
+class Draw {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._floatingAnchor = undefined
+    this._clampToGround = true
+    this._tooltip = undefined
+    this._layer = undefined
+    this._plotEvent = undefined
+    this._options = {}
+  }
+
+  _mountEntity() {}
+
+  _onClick(e) {}
+
+  _onMouseMove(e) {}
+
+  _onRightClick(e) {}
+
+  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)
+  }
+
+  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)
+  }
+
+  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
+      }
+    })
+  }
+
+  start(plot) {
+    this._viewer = plot.viewer
+    this._tooltip = plot.viewer.tooltip
+    this._layer = plot.overlayLayer
+    this._plotEvent = plot.plotEvent
+    this._options = plot.options
+    this._clampToGround = plot.options.clampToGround ?? true
+    this._mountEntity()
+    this.bindEvent()
+  }
+}
+
+export default Draw

modules/plot/draw/DrawAttackArrow.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 16:43:12
+ */
+
+import Draw from './Draw'
+import AttackArrowGraphics from '@dc-modules/overlay/graphics/AttackArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6),
+  fill: true
+}
+
+class DrawAttackArrow extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._floatingAnchor = undefined
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+    this._graphics = new AttackArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polygon: {
+        ...this._style,
+        hierarchy: new Cesium.CallbackProperty(() => {
+          if (this._positions.length > 2) {
+            this._graphics.positions = this._positions
+            return this._graphics.hierarchy
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    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._graphics.positions = this._positions
+    this.createAnchor(position)
+    if (len > 2) {
+      this._positions.pop()
+      this.unbindEvent()
+      let attackArrow = new DC.AttackArrow(
+        Transform.transformCartesianArrayToWGS84Array(this._positions)
+      )
+      attackArrow.setStyle(this._style)
+      this._plotEvent.raiseEvent(attackArrow)
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+}
+
+export default DrawAttackArrow

modules/plot/draw/DrawBillboard.js

@@ -0,0 +1,56 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 20:29:59
+ */
+
+import Draw from './Draw'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {}
+
+const IMG_CIRCLE_RED = require('@dc-modules/images/circle_red.png')
+
+class DrawPoint extends Draw {
+  constructor(style) {
+    super()
+    this._position = Cesium.Cartesian3.ZERO
+    this._style = {
+      image: IMG_CIRCLE_RED,
+      ...DEF_STYLE,
+      ...style
+    }
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      position: new Cesium.CallbackProperty(() => {
+        return this._position
+      }, false),
+      billboard: {
+        ...this._style
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    this._position = this._clampToGround ? e.surfacePosition : e.position
+    this.unbindEvent()
+    let billboard = new DC.Billboard(
+      Transform.transformCartesianToWGS84(this._position),
+      this._style.image
+    )
+    billboard.setStyle(this._style)
+    this._plotEvent.raiseEvent(billboard)
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    this._position = this._clampToGround ? e.surfacePosition : e.position
+  }
+}
+
+export default DrawPoint

modules/plot/draw/DrawCircle.js

@@ -0,0 +1,99 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 21:24:55
+ */
+
+import Draw from './Draw'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6),
+  fill: true
+}
+
+class DrawCircle extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._radius = 0
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polygon: {
+        ...this._style,
+        hierarchy: new Cesium.CallbackProperty(() => {
+          if (this._positions.length > 1) {
+            this._radius = Cesium.Cartesian3.distance(
+              this._positions[0],
+              this._positions[1]
+            )
+            if (this._radius <= 0) {
+              return null
+            }
+            let cep = Cesium.EllipseGeometryLibrary.computeEllipsePositions(
+              {
+                center: this._positions[0],
+                semiMajorAxis: this._radius,
+                semiMinorAxis: this._radius,
+                rotation: 0,
+                granularity: 0.005
+              },
+              false,
+              true
+            )
+            let pnts = Cesium.Cartesian3.unpackArray(cep.outerPositions)
+            pnts.push(pnts[0])
+            return new Cesium.PolygonHierarchy(pnts)
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    let len = this._positions.length
+    let position = this._clampToGround ? e.surfacePosition : e.position
+    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._positions.pop()
+      this.unbindEvent()
+      let circle = new DC.Circle(
+        Transform.transformCartesianToWGS84(this._positions[0]),
+        this._radius
+      )
+      circle.setStyle(this._style)
+      this._plotEvent.raiseEvent(circle)
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+}
+
+export default DrawCircle

modules/plot/draw/DrawDoubleArrow.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 16:43:12
+ */
+
+import Draw from './Draw'
+import DoubleArrowGraphics from '@dc-modules/overlay/graphics/DoubleArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6),
+  fill: true
+}
+
+class DrawDoubleArrow extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._floatingAnchor = undefined
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+    this._graphics = new DoubleArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polygon: {
+        ...this._style,
+        hierarchy: new Cesium.CallbackProperty(() => {
+          if (this._positions.length > 2) {
+            this._graphics.positions = this._positions
+            return this._graphics.hierarchy
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    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._graphics.positions = this._positions
+    this.createAnchor(position)
+    if (len > 3) {
+      this._positions.pop()
+      this.unbindEvent()
+      let doubleArrow = new DC.DoubleArrow(
+        Transform.transformCartesianArrayToWGS84Array(this._positions)
+      )
+      doubleArrow.setStyle(this._style)
+      this._plotEvent.raiseEvent(doubleArrow)
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+}
+
+export default DrawDoubleArrow

modules/plot/draw/DrawFineArrow.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 16:43:12
+ */
+
+import Draw from './Draw'
+import FineArrowGraphics from '@dc-modules/overlay/graphics/FineArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6),
+  fill: true
+}
+
+class DrawFineArrow extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._floatingAnchor = undefined
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+    this._graphics = new FineArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polygon: {
+        ...this._style,
+        hierarchy: new Cesium.CallbackProperty(() => {
+          if (this._positions.length > 1) {
+            this._graphics.positions = this._positions
+            return this._graphics.hierarchy
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    let position = this._clampToGround ? e.surfacePosition : e.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._graphics.positions = this._positions
+    this.createAnchor(position)
+    if (len > 1) {
+      this._positions.pop()
+      this.unbindEvent()
+      let fineArrow = new DC.FineArrow(
+        Transform.transformCartesianArrayToWGS84Array(this._positions)
+      )
+      fineArrow.setStyle(this._style)
+      this._plotEvent.raiseEvent(fineArrow)
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+}
+
+export default DrawFineArrow

modules/plot/draw/DrawGatheringPlace.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 17:22:21
+ */
+
+import Draw from './Draw'
+import GatheringPlaceGraphics from '@dc-modules/overlay/graphics/GatheringPlaceGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6),
+  fill: true
+}
+
+class DrawGatheringPlace extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._floatingAnchor = undefined
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+    this._graphics = new GatheringPlaceGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polygon: {
+        ...this._style,
+        hierarchy: new Cesium.CallbackProperty(() => {
+          if (this._positions.length > 1) {
+            this._graphics.positions = this._positions
+            return this._graphics.hierarchy
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    let position = this._clampToGround ? e.surfacePosition : e.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._graphics.positions = this._positions
+    this.createAnchor(position)
+    if (len > 2) {
+      this._positions.pop()
+      this.unbindEvent()
+      let gatheringPlace = new DC.GatheringPlace(
+        Transform.transformCartesianArrayToWGS84Array(this._positions)
+      )
+      gatheringPlace.setStyle(this._style)
+      this._plotEvent.raiseEvent(gatheringPlace)
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+}
+
+export default DrawGatheringPlace

modules/plot/draw/DrawPoint.js

@@ -0,0 +1,56 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-31 16:25:29
+ */
+
+import Draw from './Draw'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  pixelSize: 10,
+  outlineColor: Cesium.Color.BLUE,
+  outlineWidth: 5
+}
+
+class DrawPoint extends Draw {
+  constructor(style) {
+    super()
+    this._position = Cesium.Cartesian3.ZERO
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      position: new Cesium.CallbackProperty(() => {
+        return this._position
+      }, false),
+      point: {
+        ...this._style
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    this._position = this._clampToGround ? e.surfacePosition : e.position
+    this.unbindEvent()
+    let point = new DC.Point(
+      Transform.transformCartesianToWGS84(this._position)
+    )
+    point.setStyle(this._style)
+    this._plotEvent.raiseEvent(point)
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    this._position = this._clampToGround ? e.surfacePosition : e.position
+  }
+}
+
+export default DrawPoint

modules/plot/draw/DrawPolygon.js

@@ -0,0 +1,75 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 20:55:14
+ */
+
+import Draw from './Draw'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6),
+  fill: true
+}
+
+class DrawPolygon extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polygon: {
+        ...this._style,
+        hierarchy: new Cesium.CallbackProperty(() => {
+          if (this._positions.length > 2) {
+            return new Cesium.PolygonHierarchy(this._positions)
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    let position = this._clampToGround ? e.surfacePosition : e.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)
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '左击选择点位,右击结束')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    let polygon = new DC.Polygon(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    )
+    polygon.setStyle(this._style)
+    this._plotEvent.raiseEvent(polygon)
+  }
+}
+
+export default DrawPolygon

modules/plot/draw/DrawPolyline.js

@@ -0,0 +1,71 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 20:54:37
+ */
+
+import Draw from './Draw'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  width: 3,
+  material: Cesium.Color.YELLOW.withAlpha(0.6)
+}
+
+class DrawPolyline extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polyline: {
+        ...this._style,
+        positions: new Cesium.CallbackProperty(() => {
+          return this._positions
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    let position = this._clampToGround ? e.surfacePosition : e.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)
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位,右击结束')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    let polyline = new DC.Polyline(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    )
+    polyline.setStyle(this._style)
+    this._plotEvent.raiseEvent(polyline)
+  }
+}
+
+export default DrawPolyline

modules/plot/draw/DrawRectangle.js

@@ -0,0 +1,74 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 21:30:41
+ */
+
+import Draw from './Draw'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6)
+}
+
+class DrawRectangle extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      rectangle: {
+        ...this._style,
+        coordinates: new Cesium.CallbackProperty(time => {
+          if (this._positions.length > 1) {
+            return Cesium.Rectangle.fromCartesianArray(this._positions)
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    let position = this._clampToGround ? e.surfacePosition : e.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._positions.pop()
+      this.unbindEvent()
+      let rectangle = new DC.Rectangle(
+        Transform.transformCartesianArrayToWGS84Array(this._positions)
+      )
+      rectangle.setStyle(this._style)
+      this._plotEvent.raiseEvent(rectangle)
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '左击选择点位')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+}
+
+export default DrawRectangle

modules/plot/draw/DrawTailedAttackArrow.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 16:43:12
+ */
+
+import Draw from './Draw'
+import TailedAttackArrowGraphics from '@dc-modules/overlay/graphics/TailedAttackArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  material: Cesium.Color.YELLOW.withAlpha(0.6),
+  fill: true
+}
+
+class DrawTailedAttackArrow extends Draw {
+  constructor(style) {
+    super()
+    this._positions = []
+    this._floatingAnchor = undefined
+    this._style = {
+      ...DEF_STYLE,
+      ...style
+    }
+    this._graphics = new TailedAttackArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity({
+      polygon: {
+        ...this._style,
+        hierarchy: new Cesium.CallbackProperty(() => {
+          if (this._positions.length > 2) {
+            this._graphics.positions = this._positions
+            return this._graphics.hierarchy
+          } else {
+            return null
+          }
+        }, false)
+      }
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onClick(e) {
+    let position = this._clampToGround ? e.surfacePosition : e.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._graphics.positions = this._positions
+    this.createAnchor(position)
+    if (len > 2) {
+      this._positions.pop()
+      this.unbindEvent()
+      let tailedAttackArrow = new DC.TailedAttackArrow(
+        Transform.transformCartesianArrayToWGS84Array(this._positions)
+      )
+      tailedAttackArrow.setStyle(this._style)
+      this._plotEvent.raiseEvent(tailedAttackArrow)
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '单击选择点位')
+    if (this._floatingAnchor) {
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._floatingAnchor.position.setValue(position)
+      this._positions.pop()
+      this._positions.push(position)
+    }
+  }
+}
+
+export default DrawTailedAttackArrow

modules/plot/edit/Edit.js

@@ -0,0 +1,99 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:50:53
+ */
+
+const { MouseEventType } = DC
+
+const { Cesium } = DC.Namespace
+
+class Edit {
+  constructor() {
+    this._viewer = undefined
+    this._overlay = undefined
+    this._anchors = []
+    this._delegate = undefined
+    this._pickedAnchor = undefined
+    this._isMoving = false
+    this._clampToGround = true
+    this._tooltip = undefined
+    this._layer = undefined
+    this._anchorLayer = undefined
+    this._layer = undefined
+    this._plotEvent = undefined
+    this._options = {}
+  }
+
+  _mountEntity() {}
+
+  _mountAnchor() {}
+
+  _onClick(e) {}
+
+  _onMouseMove(e) {}
+
+  _onRightClick(e) {}
+
+  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)
+  }
+
+  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)
+  }
+
+  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)
+  }
+
+  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)
+  }
+
+  start(plot) {
+    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 = plot.options.clampToGround ?? true
+    this._mountEntity()
+    this._mountAnchor()
+    this.bindEvent()
+  }
+}
+
+export default Edit

modules/plot/edit/EditAttackArrow.js

@@ -0,0 +1,90 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:46:07
+ */
+
+import Edit from './Edit'
+import AttackArrowGraphics from '@dc-modules/overlay/graphics/AttackArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditAttackArrow extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+    this._graphics = new AttackArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+      if (this._positions.length > 2) {
+        this._graphics.positions = this._positions
+        return this._graphics.hierarchy
+      } else {
+        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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._pickedAnchor.position.setValue(position)
+      this._positions[properties.index] = position
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditAttackArrow

modules/plot/edit/EditBillboard.js

@@ -0,0 +1,43 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 22:04:36
+ */
+
+import Edit from './Edit'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditBillboard extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._position = undefined
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._position = this._delegate.position.getValue(Cesium.JulianDate.now())
+    this._delegate.position = new Cesium.CallbackProperty(() => {
+      return this._position
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '右击结束编辑')
+    this._position = this._clampToGround ? e.surfacePosition : e.position
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.position = Transform.transformCartesianToWGS84(this._position)
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditBillboard

modules/plot/edit/EditCircle.js

@@ -0,0 +1,123 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-31 10:54:38
+ */
+
+import Edit from './Edit'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditCircle extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._center = undefined
+    this._radius = 0
+    this._positions = []
+  }
+
+  _mountEntity() {
+    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._positions = [].concat([
+      this._center,
+      this._computeCirclePoints(this._center, this._radius)[0]
+    ])
+    this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(time => {
+      if (this._positions.length > 1) {
+        this._radius = Cesium.Cartesian3.distance(
+          this._positions[0],
+          this._positions[1]
+        )
+        if (this._radius <= 0) {
+          return null
+        }
+        let pnts = this._computeCirclePoints(this._positions[0], this._radius)
+        pnts.push(pnts[0])
+        return new Cesium.PolygonHierarchy(pnts)
+      } else {
+        return null
+      }
+    }, false)
+    this._layer.add(this._delegate)
+  }
+
+  _mountAnchor() {
+    this._positions.forEach((item, index) => {
+      this.createAnchor(item, index, false, index % 2 === 0)
+    })
+  }
+
+  _computeCirclePoints(center, radius) {
+    let pnts = []
+    let cep = Cesium.EllipseGeometryLibrary.computeEllipsePositions(
+      {
+        center: center,
+        semiMajorAxis: radius,
+        semiMinorAxis: radius,
+        rotation: 0,
+        granularity: 0.005
+      },
+      false,
+      true
+    )
+    if (cep && cep.outerPositions) {
+      pnts = Cesium.Cartesian3.unpackArray(cep.outerPositions)
+    }
+    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
+        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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._pickedAnchor.position.setValue(position)
+      this._positions[properties.index] = position
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.center = Transform.transformCartesianToWGS84(
+      this._positions[0]
+    )
+    this._overlay.radius = this._radius
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditCircle

modules/plot/edit/EditDoubleArrow.js

@@ -0,0 +1,90 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:46:07
+ */
+
+import Edit from './Edit'
+import DoubleArrowGraphics from '@dc-modules/overlay/graphics/DoubleArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditDoubleArrow extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+    this._graphics = new DoubleArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+      if (this._positions.length > 2) {
+        this._graphics.positions = this._positions
+        return this._graphics.hierarchy
+      } else {
+        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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._pickedAnchor.position.setValue(position)
+      this._positions[properties.index] = position
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditDoubleArrow

modules/plot/edit/EditFineArrow.js

@@ -0,0 +1,90 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:46:07
+ */
+
+import Edit from './Edit'
+import FineArrowGraphics from '@dc-modules/overlay/graphics/FineArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditFineArrow extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+    this._graphics = new FineArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+      if (this._positions.length > 1) {
+        this._graphics.positions = this._positions
+        return this._graphics.hierarchy
+      } else {
+        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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._pickedAnchor.position.setValue(position)
+      this._positions[properties.index] = position
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditFineArrow

modules/plot/edit/EditGatheringPlace.js

@@ -0,0 +1,90 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:46:07
+ */
+
+import Edit from './Edit'
+import GatheringPlaceGraphics from '@dc-modules/overlay/graphics/GatheringPlaceGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditGatheringPlace extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+    this._graphics = new GatheringPlaceGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+      if (this._positions.length > 1) {
+        this._graphics.positions = this._positions
+        return this._graphics.hierarchy
+      } else {
+        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
+        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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._pickedAnchor.position.setValue(position)
+      this._positions[properties.index] = position
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditGatheringPlace

modules/plot/edit/EditPoint.js

@@ -0,0 +1,43 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 22:04:36
+ */
+
+import Edit from './Edit'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditPoint extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._position = undefined
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._position = this._delegate.position.getValue(Cesium.JulianDate.now())
+    this._delegate.position = new Cesium.CallbackProperty(() => {
+      return this._position
+    })
+    this._layer.add(this._delegate)
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '右击结束编辑')
+    this._position = this._clampToGround ? e.surfacePosition : e.position
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.position = Transform.transformCartesianToWGS84(this._position)
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditPoint

modules/plot/edit/EditPolygon.js

@@ -0,0 +1,166 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:12:09
+ */
+
+import Edit from './Edit'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditPolygon extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(time => {
+      if (this._positions.length > 2) {
+        return new Cesium.PolygonHierarchy(this._positions)
+      } else {
+        return null
+      }
+    }, false)
+    this._layer.add(this._delegate)
+  }
+
+  _mountAnchor() {
+    let positions = [].concat(
+      this._overlay.delegate.polygon.hierarchy.getValue(Cesium.JulianDate.now())
+        .positions
+    )
+    positions.push(positions[0])
+    for (let i = 0; i < positions.length - 1; i++) {
+      let mid = this.computeMidPosition(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)
+    })
+  }
+
+  _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()
+        )
+        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
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      let currentIndex = properties.index
+      this._pickedAnchor.position.setValue(position)
+      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 = this.computeMidPosition(
+          this._positions[preAnchorIndex],
+          this._positions[currentIndex]
+        )
+        let nextMidPosition = this.computeMidPosition(
+          this._positions[nextAnchorIndex],
+          this._positions[currentIndex]
+        )
+        this._positions[preMidAnchorIndex] = preMidPosition
+        this._positions[nextMidAnchorIndex] = nextMidPosition
+        this._anchors[preMidAnchorIndex].position.setValue(preMidPosition)
+        this._anchors[nextMidAnchorIndex].position.setValue(nextMidPosition)
+      }
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditPolygon

modules/plot/edit/EditPolyline.js

@@ -0,0 +1,155 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 22:39:34
+ */
+
+import Edit from './Edit'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditPolyline extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.polyline.positions = new Cesium.CallbackProperty(() => {
+      if (this._positions.length > 1) {
+        return this._positions
+      } else {
+        return null
+      }
+    }, false)
+    this._layer.add(this._delegate)
+  }
+
+  _mountAnchor() {
+    let positions = [].concat(
+      this._overlay.delegate.polyline.positions.getValue(
+        Cesium.JulianDate.now()
+      )
+    )
+    for (let i = 0; i < positions.length - 1; i++) {
+      let mid = this.computeMidPosition(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)
+    })
+  }
+
+  _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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+
+      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 (nextAnchorIndex > 0) {
+          let nextMidPosition = this.computeMidPosition(
+            this._positions[nextAnchorIndex],
+            this._positions[currentIndex]
+          )
+          this._positions[nextMidAnchorIndex] = nextMidPosition
+          this._anchors[nextMidAnchorIndex].position.setValue(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

@@ -0,0 +1,87 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:41:34
+ */
+
+import Edit from './Edit'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditRectangle extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.rectangle.coordinates = new Cesium.CallbackProperty(time => {
+      if (this._positions.length > 1) {
+        return Cesium.Rectangle.fromCartesianArray(this._positions)
+      } else {
+        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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._pickedAnchor.position.setValue(position)
+      this._positions[properties.index] = position
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditRectangle

modules/plot/edit/EditTailedAttackArrow.js

@@ -0,0 +1,90 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 23:46:07
+ */
+
+import Edit from './Edit'
+import TailedAttackArrowGraphics from '@dc-modules/overlay/graphics/TailedAttackArrowGraphics'
+
+const { Transform } = DC
+
+const { Cesium } = DC.Namespace
+
+class EditTailedAttackArrow extends Edit {
+  constructor(overlay) {
+    super()
+    this._overlay = overlay
+    this._positions = []
+    this._graphics = new TailedAttackArrowGraphics()
+  }
+
+  _mountEntity() {
+    this._delegate = new Cesium.Entity()
+    this._delegate.merge(this._overlay.delegate)
+    this._overlay.show = false
+    this._delegate.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+      if (this._positions.length > 2) {
+        this._graphics.positions = this._positions
+        return this._graphics.hierarchy
+      } else {
+        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
+        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
+    }
+  }
+
+  _onMouseMove(e) {
+    this._tooltip.showAt(e.windowPosition, '点击锚点移动,右击结束编辑')
+    if (!this._isMoving) {
+      return
+    }
+    if (this._pickedAnchor && this._pickedAnchor.position) {
+      let properties = this._pickedAnchor.properties.getValue(
+        Cesium.JulianDate.now()
+      )
+      let position = this._clampToGround ? e.surfacePosition : e.position
+      this._pickedAnchor.position.setValue(position)
+      this._positions[properties.index] = position
+    }
+  }
+
+  _onRightClick(e) {
+    this.unbindEvent()
+    this._overlay.positions = Transform.transformCartesianArrayToWGS84Array(
+      this._positions
+    )
+    this._overlay.show = true
+    this._plotEvent.raiseEvent(this._overlay)
+  }
+}
+
+export default EditTailedAttackArrow