add @dc-modules/overlay

modules/overlay/Overlay.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-03 12:18:17
+ */
+
+import { Util } from '../utils'
+import { OverlayEventType, OverlayEvent } from '../event'
+import State from '../state/State'
+import OverlayType from './OverlayType'
+
+class Overlay {
+  constructor() {
+    this._id = Util.uuid()
+    this._bid = Util.uuid() // Business id
+    this._delegate = undefined
+    this._layer = undefined
+    this._state = undefined
+    this._show = true
+    this._style = {}
+    this._attr = {}
+    this._allowDrillPicking = false
+    this._contextMenu = []
+    this._overlayEvent = new OverlayEvent()
+    this.type = undefined
+    this.on(OverlayEventType.ADD, this._onAdd, this)
+    this.on(OverlayEventType.REMOVE, this._onRemove, this)
+  }
+
+  get overlayId() {
+    return this._id
+  }
+
+  set id(id) {
+    this._bid = id
+    return this
+  }
+
+  get id() {
+    return this._bid
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate && (this._delegate.show = this._show)
+    return this
+  }
+
+  get show() {
+    return this._show
+  }
+
+  set attr(attr) {
+    this._attr = attr
+    return this
+  }
+
+  get attr() {
+    return this._attr
+  }
+
+  set allowDrillPicking(allowDrillPicking) {
+    this._allowDrillPicking = allowDrillPicking
+    return this
+  }
+
+  get allowDrillPicking() {
+    return this._allowDrillPicking
+  }
+
+  get overlayEvent() {
+    return this._overlayEvent
+  }
+
+  get delegate() {
+    return this._delegate
+  }
+
+  get state() {
+    return this._state
+  }
+
+  set contextMenu(menus) {
+    this._contextMenu = menus
+    return this
+  }
+
+  get contextMenu() {
+    return this._contextMenu
+  }
+
+  /**
+   * The hook for mount layer
+   * Subclasses need to be overridden
+   * @private
+   */
+  _mountedHook() {}
+
+  /**
+   * The hook for added
+   * @returns {boolean}
+   * @private
+   */
+  _addedHook() {
+    if (!this._delegate) {
+      return false
+    }
+    this._delegate.layerId = this._layer?.layerId
+    this._delegate.overlayId = this._id
+  }
+
+  /**
+   * The hook for removed
+   * Subclasses need to be overridden
+   * @private
+   */
+  _removedHook() {}
+
+  /**
+   * Add handler
+   * @param layer
+   * @private
+   */
+  _onAdd(layer) {
+    if (!layer) {
+      return
+    }
+    this._layer = layer
+    this._mountedHook && this._mountedHook()
+    // for Entity
+    if (this._layer?.delegate?.entities && this._delegate) {
+      this._layer.delegate.entities.add(this._delegate)
+    } else if (this._layer?.delegate?.add && this._delegate) {
+      // for Primitive
+      this._layer.delegate.add(this._delegate)
+    }
+    this._addedHook && this._addedHook()
+    this._state = State.ADDED
+  }
+
+  /**
+   * Remove handler
+   * @private
+   */
+  _onRemove() {
+    if (!this._layer || !this._delegate) {
+      return
+    }
+    // for Entity
+    if (this._layer?.delegate?.entities) {
+      this._layer.delegate.entities.remove(this._delegate)
+    } else if (this._layer?.delegate?.remove) {
+      // for Primitive
+      this._layer.delegate.remove(this._delegate)
+    }
+    this._removedHook && this._removedHook()
+    this._state = State.REMOVED
+  }
+
+  /**
+   * Sets Text with Style
+   * @param text
+   * @param textStyle
+   * @returns {Overlay}
+   */
+  setLabel(text, textStyle) {
+    this._delegate &&
+      (this._delegate.label = {
+        ...textStyle,
+        text: text
+      })
+    return this
+  }
+
+  /**
+   * Sets style
+   * @param style
+   * @returns {Overlay}
+   */
+  setStyle(style) {
+    return this
+  }
+
+  /**
+   * Removes from layer
+   * @returns {Overlay}
+   */
+  remove() {
+    if (this._layer) {
+      this._layer.removeOverlay(this)
+    }
+    return this
+  }
+
+  /**
+   * adds to layer
+   * @param layer
+   * @returns {Overlay}
+   */
+  addTo(layer) {
+    if (layer && layer.addOverlay) {
+      layer.addOverlay(this)
+    }
+    return this
+  }
+
+  /**
+   * Subscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {Overlay}
+   */
+  on(type, callback, context) {
+    this._overlayEvent.on(type, callback, context || this)
+    return this
+  }
+
+  /**
+   * Unsubscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {Overlay}
+   */
+  off(type, callback, context) {
+    this._overlayEvent.off(type, callback, context || this)
+    return this
+  }
+
+  /**
+   * Trigger subscription event
+   * @param type
+   * @param params
+   * @returns {Overlay}
+   */
+  fire(type, params) {
+    this._overlayEvent.fire(type, params)
+    return this
+  }
+
+  /**
+   *
+   * @param type
+   */
+  static registerType(type) {
+    if (type) {
+      OverlayType[type.toLocaleUpperCase()] = type.toLocaleLowerCase()
+    }
+  }
+
+  /**
+   *
+   * @param type
+   * @returns {*|undefined}
+   */
+  static getOverlayType(type) {
+    return OverlayType[type.toLocaleUpperCase()] || undefined
+  }
+}
+
+export default Overlay

modules/overlay/OverlayType.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-15 11:57:02
+ */
+
+let OverlayType = {}
+
+export default OverlayType

modules/overlay/custom/CustomBillboard.js

+/**
+ * @Author: Caven
+ * @Date: 2020-02-12 21:44:24
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class CustomBillboard extends Overlay {
+  constructor(position, icon) {
+    super()
+    this._delegate = new Cesium.Entity({ billboard: {} })
+    this._position = Parse.parsePosition(position)
+    this._icon = icon
+    this._size = [32, 32]
+    this.type = Overlay.getOverlayType('custom_billboard')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set icon(icon) {
+    this._icon = icon
+    this._delegate.billboard.image = this._icon
+    return this
+  }
+
+  get icon() {
+    return this._icon
+  }
+
+  set size(size) {
+    if (!Array.isArray(size)) {
+      throw new Error('Billboard: the size invalid')
+    }
+    this._size = size
+    this._delegate.billboard.width = this._size[0] || 32
+    this._delegate.billboard.height = this._size[1] || 32
+    return this
+  }
+
+  get size() {
+    return this._size
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.icon = this._icon
+    this.size = this._size
+  }
+
+  /**
+   * Sets label
+   * @param text
+   * @param textStyle
+   * @returns {CustomBillboard}
+   */
+  setLabel(text, textStyle) {
+    this._delegate.label = {
+      ...textStyle,
+      text: text
+    }
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {CustomBillboard}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['image'] && delete style['width'] && delete style['height']
+    this._style = style
+    Util.merge(this._delegate.billboard, this._style)
+    return this
+  }
+
+  /**
+   * Sets VLine style
+   * @param style
+   * @returns {CustomBillboard}
+   */
+  setVLine(style = {}) {
+    if (this._position.alt > 0 && !this._delegate.polyline) {
+      let position = this._position.copy()
+      position.alt = style.height || 0
+      this._delegate.polyline = {
+        ...style,
+        positions: Transform.transformWGS84ArrayToCartesianArray([
+          position,
+          this._position
+        ])
+      }
+    }
+    return this
+  }
+
+  /**
+   * @param {*} radius
+   * @param {*} style
+   * @param {*} rotateAmount
+   */
+  setBottomCircle(radius, style = {}, rotateAmount = 0) {
+    let stRotation = 0
+    let amount = rotateAmount
+    this._delegate.ellipse = {
+      ...style,
+      semiMajorAxis: radius,
+      semiMinorAxis: radius,
+      stRotation: new Cesium.CallbackProperty(time => {
+        stRotation += amount
+        if (stRotation >= 360 || stRotation <= -360) {
+          stRotation = 0
+        }
+        return stRotation
+      })
+    }
+    return this
+  }
+}
+
+Overlay.registerType('custom_billboard')
+
+export default CustomBillboard

modules/overlay/custom/CustomLabel.js

+/**
+ * @Author: Caven
+ * @Date: 2020-07-28 18:37:59
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class CustomLabel extends Overlay {
+  constructor(position, text) {
+    super()
+    this._delegate = new Cesium.Entity({ label: {} })
+    this._position = Parse.parsePosition(position)
+    this._text = text
+    this.type = Overlay.getOverlayType('custom_label')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set text(text) {
+    this._text = text
+    this._delegate.label.text = this._text
+    return this
+  }
+
+  get text() {
+    return this._text
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.text = this._text
+  }
+
+  /**
+   *
+   * @param {*} style
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['text']
+    this._style = style
+    Util.merge(this._delegate.label, this._style)
+    return this
+  }
+
+  /**
+   * Sets  VLine style
+   * @param style
+   * @returns {CustomLabel}
+   */
+  setVLine(style = {}) {
+    if (this._position.alt > 0 && !this._delegate.polyline) {
+      let position = this._position.copy()
+      position.alt = style.height || 0
+      this._delegate.polyline = {
+        ...style,
+        positions: Transform.transformWGS84ArrayToCartesianArray([
+          position,
+          this._position
+        ])
+      }
+    }
+    return this
+  }
+
+  /**
+   * Sets bottom circle
+   * @param radius
+   * @param style
+   * @param rotateAmount
+   * @returns {CustomLabel}
+   */
+  setBottomCircle(radius, style = {}, rotateAmount = 0) {
+    let stRotation = 0
+    let amount = rotateAmount
+    this._delegate.ellipse = {
+      ...style,
+      semiMajorAxis: radius,
+      semiMinorAxis: radius,
+      stRotation: new Cesium.CallbackProperty(time => {
+        stRotation += amount
+        if (stRotation >= 360 || stRotation <= -360) {
+          stRotation = 0
+        }
+        return stRotation
+      })
+    }
+    return this
+  }
+}
+
+Overlay.registerType('custom_label')
+
+export default CustomLabel

modules/overlay/graphics/AttackArrowGraphics.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 16:22:50
+ */
+
+const { Transform, Parse, PlotUtil } = DC
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+class AttackArrowGraphics {
+  constructor(options) {
+    this._positions = options?.positions || []
+    this.headHeightFactor = 0.18
+    this.headWidthFactor = 0.3
+    this.neckHeightFactor = 0.85
+    this.neckWidthFactor = 0.15
+    this.headTailFactor = 0.8
+  }
+
+  set positions(positions) {
+    this._positions = positions
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  get hierarchy() {
+    return this._createHierarchy()
+  }
+
+  _getArrowHeadPoints(points, tailLeft, tailRight) {
+    let len = PlotUtil.getBaseLength(points)
+    let headHeight = len * this.headHeightFactor
+    let headPnt = points[points.length - 1]
+    len = PlotUtil.distance(headPnt, points[points.length - 2])
+    let tailWidth = PlotUtil.distance(tailLeft, tailRight)
+    if (headHeight > tailWidth * this.headTailFactor) {
+      headHeight = tailWidth * this.headTailFactor
+    }
+    let headWidth = headHeight * this.headWidthFactor
+    let neckWidth = headHeight * this.neckWidthFactor
+    headHeight = headHeight > len ? len : headHeight
+    let neckHeight = headHeight * this.neckHeightFactor
+    let headEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      headHeight,
+      true
+    )
+    let neckEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      neckHeight,
+      true
+    )
+    let headLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      false
+    )
+    let headRight = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      true
+    )
+    let neckLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      false
+    )
+    let neckRight = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      true
+    )
+    return [neckLeft, headLeft, headPnt, headRight, neckRight]
+  }
+
+  _getArrowBodyPoints(points, neckLeft, neckRight, tailWidthFactor) {
+    let allLen = PlotUtil.wholeDistance(points)
+    let len = PlotUtil.getBaseLength(points)
+    let tailWidth = len * tailWidthFactor
+    let neckWidth = PlotUtil.distance(neckLeft, neckRight)
+    let widthDif = (tailWidth - neckWidth) / 2
+    let tempLen = 0
+    let leftBodyPnts = []
+    let rightBodyPnts = []
+    for (let i = 1; i < points.length - 1; i++) {
+      let angle =
+        PlotUtil.getAngleOfThreePoints(
+          points[i - 1],
+          points[i],
+          points[i + 1]
+        ) / 2
+      tempLen += PlotUtil.distance(points[i - 1], points[i])
+      let w = (tailWidth / 2 - (tempLen / allLen) * widthDif) / Math.sin(angle)
+      let left = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        Math.PI - angle,
+        w,
+        true
+      )
+      let right = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        angle,
+        w,
+        false
+      )
+      leftBodyPnts.push(left)
+      rightBodyPnts.push(right)
+    }
+    return leftBodyPnts.concat(rightBodyPnts)
+  }
+
+  _createHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    )[0]
+    let tailLeft = pnts[0]
+    let tailRight = pnts[1]
+    if (PlotUtil.isClockWise(pnts[0], pnts[1], pnts[2])) {
+      tailLeft = pnts[1]
+      tailRight = pnts[0]
+    }
+    let midTail = PlotUtil.mid(tailLeft, tailRight)
+    let bonePnts = [midTail].concat(pnts.slice(2))
+    // 计算箭头
+    let headPnts = this._getArrowHeadPoints(bonePnts, tailLeft, tailRight)
+    let neckLeft = headPnts[0]
+    let neckRight = headPnts[4]
+    let tailWidthFactor =
+      PlotUtil.distance(tailLeft, tailRight) / PlotUtil.getBaseLength(bonePnts)
+    // 计算箭身
+    let bodyPnts = this._getArrowBodyPoints(
+      bonePnts,
+      neckLeft,
+      neckRight,
+      tailWidthFactor
+    )
+    // 整合
+    let count = bodyPnts.length
+    let leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2))
+    leftPnts.push(neckLeft)
+    let rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count))
+    rightPnts.push(neckRight)
+    leftPnts = PlotUtil.getQBSplinePoints(leftPnts)
+    rightPnts = PlotUtil.getQBSplinePoints(rightPnts)
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions(leftPnts.concat(headPnts, rightPnts.reverse()))
+      )
+    )
+  }
+}
+
+export default AttackArrowGraphics

modules/overlay/graphics/DoubleArrowGraphics.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 16:27:29
+ */
+const { Transform, Parse, PlotUtil } = DC
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+class DoubleArrowGraphics {
+  constructor(options) {
+    this._positions = options?.positions || []
+    this.headHeightFactor = 0.25
+    this.headWidthFactor = 0.3
+    this.neckHeightFactor = 0.85
+    this.neckWidthFactor = 0.15
+  }
+
+  set positions(positions) {
+    this._positions = positions
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  get hierarchy() {
+    return this._createHierarchy()
+  }
+
+  _getArrowPoints(pnt1, pnt2, pnt3, clockWise) {
+    let midPnt = PlotUtil.mid(pnt1, pnt2)
+    let len = PlotUtil.distance(midPnt, pnt3)
+    let midPnt1 = PlotUtil.getThirdPoint(pnt3, midPnt, 0, len * 0.3, true)
+    let midPnt2 = PlotUtil.getThirdPoint(pnt3, midPnt, 0, len * 0.5, true)
+    midPnt1 = PlotUtil.getThirdPoint(
+      midPnt,
+      midPnt1,
+      HALF_PI,
+      len / 5,
+      clockWise
+    )
+    midPnt2 = PlotUtil.getThirdPoint(
+      midPnt,
+      midPnt2,
+      HALF_PI,
+      len / 4,
+      clockWise
+    )
+    let points = [midPnt, midPnt1, midPnt2, pnt3]
+    // 计算箭头部分
+    let arrowPnts = this._getArrowHeadPoints(points)
+    let neckLeftPoint = arrowPnts[0]
+    let neckRightPoint = arrowPnts[4]
+    // 计算箭身部分
+    let tailWidthFactor =
+      PlotUtil.distance(pnt1, pnt2) / PlotUtil.getBaseLength(points) / 2
+    let bodyPnts = this._getArrowBodyPoints(
+      points,
+      neckLeftPoint,
+      neckRightPoint,
+      tailWidthFactor
+    )
+    let n = bodyPnts.length
+    let lPoints = bodyPnts.slice(0, n / 2)
+    let rPoints = bodyPnts.slice(n / 2, n)
+    lPoints.push(neckLeftPoint)
+    rPoints.push(neckRightPoint)
+    lPoints = lPoints.reverse()
+    lPoints.push(pnt2)
+    rPoints = rPoints.reverse()
+    rPoints.push(pnt1)
+    return lPoints.reverse().concat(arrowPnts, rPoints)
+  }
+
+  _getArrowHeadPoints(points) {
+    let len = PlotUtil.getBaseLength(points)
+    let headHeight = len * this.headHeightFactor
+    let headPnt = points[points.length - 1]
+    let headWidth = headHeight * this.headWidthFactor
+    let neckWidth = headHeight * this.neckWidthFactor
+    let neckHeight = headHeight * this.neckHeightFactor
+    let headEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      headHeight,
+      true
+    )
+    let neckEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      neckHeight,
+      true
+    )
+    let headLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      false
+    )
+    let headRight = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      true
+    )
+    let neckLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      false
+    )
+    let neckRight = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      true
+    )
+    return [neckLeft, headLeft, headPnt, headRight, neckRight]
+  }
+
+  _getArrowBodyPoints(points, neckLeft, neckRight, tailWidthFactor) {
+    let allLen = PlotUtil.wholeDistance(points)
+    let len = PlotUtil.getBaseLength(points)
+    let tailWidth = len * tailWidthFactor
+    let neckWidth = PlotUtil.distance(neckLeft, neckRight)
+    let widthDif = (tailWidth - neckWidth) / 2
+    let tempLen = 0
+    let leftBodyPnts = []
+    let rightBodyPnts = []
+    for (let i = 1; i < points.length - 1; i++) {
+      let angle =
+        PlotUtil.getAngleOfThreePoints(
+          points[i - 1],
+          points[i],
+          points[i + 1]
+        ) / 2
+      tempLen += PlotUtil.distance(points[i - 1], points[i])
+      let w = (tailWidth / 2 - (tempLen / allLen) * widthDif) / Math.sin(angle)
+      let left = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        Math.PI - angle,
+        w,
+        true
+      )
+      let right = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        angle,
+        w,
+        false
+      )
+      leftBodyPnts.push(left)
+      rightBodyPnts.push(right)
+    }
+    return leftBodyPnts.concat(rightBodyPnts)
+  }
+
+  _getTempPoint4(linePnt1, linePnt2, point) {
+    let midPnt = PlotUtil.mid(linePnt1, linePnt2)
+    let len = PlotUtil.distance(midPnt, point)
+    let angle = PlotUtil.getAngleOfThreePoints(linePnt1, midPnt, point)
+    let symPnt, distance1, distance2, mid
+    if (angle < HALF_PI) {
+      distance1 = len * Math.sin(angle)
+      distance2 = len * Math.cos(angle)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, false)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, true)
+    } else if (angle >= HALF_PI && angle < Math.PI) {
+      distance1 = len * Math.sin(Math.PI - angle)
+      distance2 = len * Math.cos(Math.PI - angle)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, false)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, false)
+    } else if (angle >= Math.PI && angle < Math.PI * 1.5) {
+      distance1 = len * Math.sin(angle - Math.PI)
+      distance2 = len * Math.cos(angle - Math.PI)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, true)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, true)
+    } else {
+      distance1 = len * Math.sin(Math.PI * 2 - angle)
+      distance2 = len * Math.cos(Math.PI * 2 - angle)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, true)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, false)
+    }
+    return symPnt
+  }
+
+  _createHierarchy() {
+    let count = this._positions.length
+    let tempPoint4 = undefined
+    let connPoint = undefined
+    let pnts = Parse.parsePolygonCoordToArray(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    )[0]
+    let pnt1 = pnts[0]
+    let pnt2 = pnts[1]
+    let pnt3 = pnts[2]
+    if (count === 3) tempPoint4 = this._getTempPoint4(pnt1, pnt2, pnt3)
+    else tempPoint4 = pnts[3]
+    if (count === 3 || count === 4) connPoint = PlotUtil.mid(pnt1, pnt2)
+    else connPoint = pnts[4]
+    let leftArrowPnts, rightArrowPnts
+    if (PlotUtil.isClockWise(pnt1, pnt2, pnt3)) {
+      leftArrowPnts = this._getArrowPoints(pnt1, connPoint, tempPoint4, false)
+      rightArrowPnts = this._getArrowPoints(connPoint, pnt2, pnt3, true)
+    } else {
+      leftArrowPnts = this._getArrowPoints(pnt2, connPoint, pnt3, false)
+      rightArrowPnts = this._getArrowPoints(connPoint, pnt1, tempPoint4, true)
+    }
+    let m = leftArrowPnts.length
+    let t = (m - 5) / 2
+    let llBodyPnts = leftArrowPnts.slice(0, t)
+    let lArrowPnts = leftArrowPnts.slice(t, t + 5)
+    let lrBodyPnts = leftArrowPnts.slice(t + 5, m)
+    let rlBodyPnts = rightArrowPnts.slice(0, t)
+    let rArrowPnts = rightArrowPnts.slice(t, t + 5)
+    let rrBodyPnts = rightArrowPnts.slice(t + 5, m)
+    rlBodyPnts = PlotUtil.getBezierPoints(rlBodyPnts)
+    let bodyPnts = PlotUtil.getBezierPoints(
+      rrBodyPnts.concat(llBodyPnts.slice(1))
+    )
+    lrBodyPnts = PlotUtil.getBezierPoints(lrBodyPnts)
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions(
+          rlBodyPnts.concat(rArrowPnts, bodyPnts, lArrowPnts, lrBodyPnts)
+        )
+      )
+    )
+  }
+}
+
+export default DoubleArrowGraphics

modules/overlay/graphics/FineArrowGraphics.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 17:10:33
+ */
+
+const { Transform, Parse, PlotUtil } = DC
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+class FineArrowGraphics {
+  constructor(options) {
+    this._positions = options?.positions || []
+    this.tailWidthFactor = 0.15
+    this.neckWidthFactor = 0.2
+    this.headWidthFactor = 0.25
+    this.headAngle = Math.PI / 8.5
+    this.neckAngle = Math.PI / 13
+  }
+
+  set positions(positions) {
+    this._positions = positions
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  get hierarchy() {
+    return this._createHierarchy()
+  }
+
+  _createHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    )[0]
+    let pnt1 = pnts[0]
+    let pnt2 = pnts[1]
+    let len = PlotUtil.getBaseLength(pnts)
+    let tailWidth = len * this.tailWidthFactor
+    let neckWidth = len * this.neckWidthFactor
+    let headWidth = len * this.headWidthFactor
+    let tailLeft = PlotUtil.getThirdPoint(pnt2, pnt1, HALF_PI, tailWidth, true)
+    let tailRight = PlotUtil.getThirdPoint(
+      pnt2,
+      pnt1,
+      HALF_PI,
+      tailWidth,
+      false
+    )
+    let headLeft = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.headAngle,
+      headWidth,
+      false
+    )
+    let headRight = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.headAngle,
+      headWidth,
+      true
+    )
+    let neckLeft = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.neckAngle,
+      neckWidth,
+      false
+    )
+    let neckRight = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.neckAngle,
+      neckWidth,
+      true
+    )
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions([
+          tailLeft,
+          neckLeft,
+          headLeft,
+          pnt2,
+          headRight,
+          neckRight,
+          tailRight
+        ])
+      )
+    )
+  }
+}
+
+export default FineArrowGraphics

modules/overlay/graphics/GatheringPlaceGraphics.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 17:17:52
+ */
+
+const { Transform, Parse, PlotUtil } = DC
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+const FITTING_COUNT = 100
+
+class GatheringPlaceGraphics {
+  constructor(options) {
+    this._positions = options?.positions || []
+    this.t = 0.4
+  }
+
+  set positions(positions) {
+    this._positions = positions
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  get hierarchy() {
+    return this._createHierarchy()
+  }
+
+  _createHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    )[0]
+    if (this._positions.length === 2) {
+      let mid = PlotUtil.mid(pnts[0], pnts[1])
+      let d = PlotUtil.distance(pnts[0], mid) / 0.9
+      let pnt = PlotUtil.getThirdPoint(pnts[0], mid, HALF_PI, d, true)
+      pnts = [pnts[0], pnt, pnts[1]]
+    }
+    let mid = PlotUtil.mid(pnts[0], pnts[2])
+    pnts.push(mid, pnts[0], pnts[1])
+    let normals = []
+    for (let i = 0; i < pnts.length - 2; i++) {
+      let pnt1 = pnts[i]
+      let pnt2 = pnts[i + 1]
+      let pnt3 = pnts[i + 2]
+      let normalPoints = PlotUtil.getBisectorNormals(this.t, pnt1, pnt2, pnt3)
+      normals = normals.concat(normalPoints)
+    }
+    let count = normals.length
+    normals = [normals[count - 1]].concat(normals.slice(0, count - 1))
+    let pList = []
+    for (let i = 0; i < pnts.length - 2; i++) {
+      let pnt1 = pnts[i]
+      let pnt2 = pnts[i + 1]
+      pList.push(pnt1)
+      for (let t = 0; t <= FITTING_COUNT; t++) {
+        let pnt = PlotUtil.getCubicValue(
+          t / FITTING_COUNT,
+          pnt1,
+          normals[i * 2],
+          normals[i * 2 + 1],
+          pnt2
+        )
+        pList.push(pnt)
+      }
+      pList.push(pnt2)
+    }
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(Parse.parsePositions(pList))
+    )
+  }
+}
+
+export default GatheringPlaceGraphics

modules/overlay/graphics/TailedAttackArrowGraphics.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-30 17:26:34
+ */
+
+import AttackArrowGraphics from './AttackArrowGraphics'
+
+const { Transform, Parse, PlotUtil } = DC
+
+const { Cesium } = DC.Namespace
+
+class TailedAttackArrowGraphics extends AttackArrowGraphics {
+  constructor(options) {
+    super(options)
+    this.headHeightFactor = 0.18
+    this.headWidthFactor = 0.3
+    this.neckHeightFactor = 0.85
+    this.neckWidthFactor = 0.15
+    this.tailWidthFactor = 0.1
+    this.headTailFactor = 0.8
+    this.swallowTailFactor = 1
+  }
+
+  _createHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(
+      Transform.transformCartesianArrayToWGS84Array(this._positions)
+    )[0]
+    let tailLeft = pnts[0]
+    let tailRight = pnts[1]
+    if (PlotUtil.isClockWise(pnts[0], pnts[1], pnts[2])) {
+      tailLeft = pnts[1]
+      tailRight = pnts[0]
+    }
+    let midTail = PlotUtil.mid(tailLeft, tailRight)
+    let bonePnts = [midTail].concat(pnts.slice(2))
+    let headPnts = this._getArrowHeadPoints(bonePnts, tailLeft, tailRight)
+    let neckLeft = headPnts[0]
+    let neckRight = headPnts[4]
+    let tailWidth = PlotUtil.distance(tailLeft, tailRight)
+    let allLen = PlotUtil.getBaseLength(bonePnts)
+    let len = allLen * this.tailWidthFactor * this.swallowTailFactor
+    let swallowTailPnt = PlotUtil.getThirdPoint(
+      bonePnts[1],
+      bonePnts[0],
+      0,
+      len,
+      true
+    )
+    let factor = tailWidth / allLen
+    let bodyPnts = this._getArrowBodyPoints(
+      bonePnts,
+      neckLeft,
+      neckRight,
+      factor
+    )
+    let count = bodyPnts.length
+    let leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2))
+    leftPnts.push(neckLeft)
+    let rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count))
+    rightPnts.push(neckRight)
+    leftPnts = PlotUtil.getQBSplinePoints(leftPnts)
+    rightPnts = PlotUtil.getQBSplinePoints(rightPnts)
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions(
+          leftPnts.concat(headPnts, rightPnts.reverse(), [
+            swallowTailPnt,
+            leftPnts[0]
+          ])
+        )
+      )
+    )
+  }
+}
+
+export default TailedAttackArrowGraphics

modules/overlay/index.js

+/**
+ * @Author: Caven
+ * @Date: 2020-04-15 20:57:22
+ */
+
+export { default as OverlayType } from './OverlayType'
+export { default as Overlay } from './Overlay'
+
+/**
+ * custom
+ */
+export { default as CustomBillboard } from './custom/CustomBillboard'
+export { default as CustomLabel } from './custom/CustomLabel'
+
+/**
+ * model
+ */
+export { default as Model } from './model/Model'
+export { default as Tileset } from './model/Tileset'
+
+/**
+ * plot
+ */
+export { default as AttackArrow } from './plot/AttackArrow'
+export { default as DoubleArrow } from './plot/DoubleArrow'
+export { default as FineArrow } from './plot/FineArrow'
+export { default as GatheringPlace } from './plot/GatheringPlace'
+export { default as TailedAttackArrow } from './plot/TailedAttackArrow'
+
+/**
+ * primitive
+ */
+export { default as ElecEllipsoidPrimitive } from './primitive/ElecEllipsoidPrimitive'
+export { default as FlowLinePrimitive } from './primitive/FlowLinePrimitive'
+export { default as ScanCirclePrimitive } from './primitive/ScanCirclePrimitive'
+export { default as TrailLinePrimitive } from './primitive/TrailLinePrimitive'
+export { default as VideoPrimitive } from './primitive/VideoPrimitive'
+export { default as WaterPrimitive } from './primitive/WaterPrimitive'
+
+/**
+ * vector
+ */
+export { default as Billboard } from './vector/Billboard'
+export { default as Box } from './vector/Box'
+export { default as Circle } from './vector/Circle'
+export { default as Corridor } from './vector/Corridor'
+export { default as Cylinder } from './vector/Cylinder'
+export { default as DivIcon } from './vector/DivIcon'
+export { default as Ellipse } from './vector/Ellipse'
+export { default as Ellipsoid } from './vector/Ellipsoid'
+export { default as Label } from './vector/Label'
+export { default as Plane } from './vector/Plane'
+export { default as Point } from './vector/Point'
+export { default as Polygon } from './vector/Polygon'
+export { default as Polyline } from './vector/Polyline'
+export { default as PolylineVolume } from './vector/PolylineVolume'
+export { default as Rectangle } from './vector/Rectangle'
+export { default as Wall } from './vector/Wall'

modules/overlay/model/Model.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-06 20:03:25
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Model extends Overlay {
+  constructor(position, modelUrl) {
+    super()
+    this._delegate = new Cesium.Entity({ model: {} })
+    this._position = Parse.parsePosition(position)
+    this._modelUrl = modelUrl
+    this._rotateAmount = 0
+    this.type = Overlay.getOverlayType('model')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    if (this._rotateAmount === 0) {
+      this._delegate.orientation = Cesium.Transforms.headingPitchRollQuaternion(
+        Transform.transformWGS84ToCartesian(this._position),
+        new Cesium.HeadingPitchRoll(
+          Cesium.Math.toRadians(this._position.heading),
+          Cesium.Math.toRadians(this._position.pitch),
+          Cesium.Math.toRadians(this._position.roll)
+        )
+      )
+    }
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set modelUrl(modelUrl) {
+    this._modelUrl = modelUrl
+    this._delegate.model.uri = this._modelUrl
+    return this
+  }
+
+  get modelUrl() {
+    return this._modelUrl
+  }
+
+  set rotateAmount(amount) {
+    this._rotateAmount = +amount
+    this._delegate.orientation = new Cesium.CallbackProperty(time => {
+      this._position.heading += this._rotateAmount
+      if (this._position.heading >= 360 || this._position.heading <= -360) {
+        this._position.heading = 0
+      }
+      return Cesium.Transforms.headingPitchRollQuaternion(
+        Transform.transformWGS84ToCartesian(this._position),
+        new Cesium.HeadingPitchRoll(
+          Cesium.Math.toRadians(this._position.heading),
+          Cesium.Math.toRadians(this._position.pitch),
+          Cesium.Math.toRadians(this._position.roll)
+        )
+      )
+    })
+    return this
+  }
+
+  get rotateAmount() {
+    return this._rotateAmount
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.modelUrl = this._modelUrl
+  }
+
+  /**
+   * Sets style
+   * @param style
+   * @returns {Model}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['uri']
+    this._style = style
+    Util.merge(this._delegate.model, this._style)
+    return this
+  }
+
+  /**
+   * Parse from entity
+   * @param entity
+   * @param modelUrl
+   * @returns {Model}
+   */
+  static fromEntity(entity, modelUrl) {
+    let now = Cesium.JulianDate.now()
+    let position = Transform.transformCartesianToWGS84(
+      entity.position.getValue(now)
+    )
+    let model = new Model(position, modelUrl)
+    model.attr = {
+      ...entity.properties.getValue(now)
+    }
+    return model
+  }
+}
+
+Overlay.registerType('model')
+
+export default Model

modules/overlay/model/Tileset.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-07 20:51:56
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Tileset extends Overlay {
+  constructor(url, options = {}) {
+    super()
+    this._delegate = new Cesium.Cesium3DTileset({
+      ...options,
+      url: url
+    })
+    this._tileVisibleCallback = undefined
+    this._properties = undefined
+    this._customShader = undefined
+    this.type = Overlay.getOverlayType('tileset')
+    this._state = State.INITIALIZED
+  }
+
+  get readyPromise() {
+    return this._delegate.readyPromise
+  }
+
+  /**
+   *
+   * @private
+   */
+  _bindVisibleEvent() {
+    this._tileVisibleCallback && this._tileVisibleCallback()
+    this._tileVisibleCallback = this._delegate.tileVisible.addEventListener(
+      this._updateTile,
+      this
+    )
+  }
+
+  /**
+   * Updates tile
+   * @param tile
+   * @private
+   */
+  _updateTile(tile) {
+    let content = tile.content
+    for (let i = 0; i < content.featuresLength; i++) {
+      let feature = content.getFeature(i)
+      let model = feature.content._model
+      // sets properties
+      if (this._properties && this._properties.length) {
+        this._properties.forEach(property => {
+          if (
+            feature.hasProperty(property['key']) &&
+            feature.getProperty(property['key']) === property['keyValue']
+          ) {
+            feature.setProperty(
+              property['propertyName'],
+              property['propertyValue']
+            )
+          }
+        })
+      }
+      // sets customShader
+      if (
+        this._customShader &&
+        model &&
+        model._sourcePrograms &&
+        model._rendererResources
+      ) {
+        Object.keys(model._sourcePrograms).forEach(key => {
+          let program = model._sourcePrograms[key]
+          model._rendererResources.sourceShaders[
+            program.fragmentShader
+          ] = this._customShader
+        })
+        model._shouldRegenerateShaders = true
+      }
+    }
+  }
+
+  /**
+   * Sets position
+   * @param position
+   * @returns {Tileset}
+   */
+  setPosition(position) {
+    position = Parse.parsePosition(position)
+    this.readyPromise.then(tileset => {
+      let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
+        Cesium.Cartesian3.fromDegrees(position.lng, position.lat, position.alt)
+      )
+      let rotationX = Cesium.Matrix4.fromRotationTranslation(
+        Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(position.heading))
+      )
+      Cesium.Matrix4.multiply(modelMatrix, rotationX, modelMatrix)
+      tileset.root.transform = modelMatrix
+    })
+    return this
+  }
+
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Clamps To Ground
+   * @returns {Tileset}
+   */
+  clampToGround() {
+    this.readyPromise.then(tileset => {
+      let center = Cesium.Cartographic.fromCartesian(
+        tileset.boundingSphere.center
+      )
+      let surface = Cesium.Cartesian3.fromRadians(
+        center.longitude,
+        center.latitude,
+        center.height
+      )
+      let offset = Cesium.Cartesian3.fromRadians(
+        center.longitude,
+        center.latitude,
+        0
+      )
+      let translation = Cesium.Cartesian3.subtract(
+        offset,
+        surface,
+        new Cesium.Cartesian3()
+      )
+      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
+    })
+    return this
+  }
+
+  /**
+   * Sets height
+   * @param height
+   * @param isAbsolute
+   * @returns {Tileset}
+   */
+  setHeight(height, isAbsolute = false) {
+    this.readyPromise.then(tileset => {
+      let center = Cesium.Cartographic.fromCartesian(
+        tileset.boundingSphere.center
+      )
+      let surface = Cesium.Cartesian3.fromRadians(
+        center.longitude,
+        center.latitude,
+        center.height
+      )
+      let offset = Cesium.Cartesian3.fromRadians(
+        center.longitude,
+        center.latitude,
+        isAbsolute ? height : center.height + height
+      )
+      let translation = Cesium.Cartesian3.subtract(
+        offset,
+        surface,
+        new Cesium.Cartesian3()
+      )
+      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
+    })
+    return this
+  }
+
+  /**
+   * Sets scale
+   * @param scale
+   * @returns {Tileset}
+   */
+  setScale(scale) {
+    this.readyPromise.then(tileset => {
+      let modelMatrix = tileset.root.transform
+      if (scale > 0 && scale !== 1) {
+        Cesium.Matrix4.multiplyByUniformScale(modelMatrix, scale, modelMatrix)
+      }
+      tileset.root.transform = modelMatrix
+    })
+    return this
+  }
+
+  /**
+   * Sets feature property
+   * @param properties
+   * @returns {Tileset}
+   */
+  setProperties(properties) {
+    this._properties = properties
+    this._bindVisibleEvent()
+    return this
+  }
+
+  /**
+   * Sets feature FS
+   * @param customShader
+   * @returns {Tileset}
+   */
+  setCustomShader(customShader) {
+    this._customShader = customShader
+    this._bindVisibleEvent()
+    return this
+  }
+
+  /**
+   * Sets style
+   * @param style
+   * @returns {Tileset}
+   */
+  setStyle(style) {
+    if (style && style instanceof Cesium.Cesium3DTileStyle) {
+      this._style = style
+      this._delegate.style = this._style
+    }
+    return this
+  }
+}
+
+Overlay.registerType('tileset')
+
+export default Tileset

modules/overlay/plot/AttackArrow.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 21:45:14
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util, PlotUtil } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+class AttackArrow extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ polygon: {} })
+    this.headHeightFactor = 0.18
+    this.headWidthFactor = 0.3
+    this.neckHeightFactor = 0.85
+    this.neckWidthFactor = 0.15
+    this.headTailFactor = 0.8
+    this.type = Overlay.getOverlayType('attack_arrow')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polygon.hierarchy = this._getHierarchy()
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _getArrowHeadPoints(points, tailLeft, tailRight) {
+    let len = PlotUtil.getBaseLength(points)
+    let headHeight = len * this.headHeightFactor
+    let headPnt = points[points.length - 1]
+    len = PlotUtil.distance(headPnt, points[points.length - 2])
+    let tailWidth = PlotUtil.distance(tailLeft, tailRight)
+    if (headHeight > tailWidth * this.headTailFactor) {
+      headHeight = tailWidth * this.headTailFactor
+    }
+    let headWidth = headHeight * this.headWidthFactor
+    let neckWidth = headHeight * this.neckWidthFactor
+    headHeight = headHeight > len ? len : headHeight
+    let neckHeight = headHeight * this.neckHeightFactor
+    let headEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      headHeight,
+      true
+    )
+    let neckEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      neckHeight,
+      true
+    )
+    let headLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      false
+    )
+    let headRight = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      true
+    )
+    let neckLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      false
+    )
+    let neckRight = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      true
+    )
+    return [neckLeft, headLeft, headPnt, headRight, neckRight]
+  }
+
+  _getArrowBodyPoints(points, neckLeft, neckRight, tailWidthFactor) {
+    let allLen = PlotUtil.wholeDistance(points)
+    let len = PlotUtil.getBaseLength(points)
+    let tailWidth = len * tailWidthFactor
+    let neckWidth = PlotUtil.distance(neckLeft, neckRight)
+    let widthDif = (tailWidth - neckWidth) / 2
+    let tempLen = 0
+    let leftBodyPnts = []
+    let rightBodyPnts = []
+    for (let i = 1; i < points.length - 1; i++) {
+      let angle =
+        PlotUtil.getAngleOfThreePoints(
+          points[i - 1],
+          points[i],
+          points[i + 1]
+        ) / 2
+      tempLen += PlotUtil.distance(points[i - 1], points[i])
+      let w = (tailWidth / 2 - (tempLen / allLen) * widthDif) / Math.sin(angle)
+      let left = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        Math.PI - angle,
+        w,
+        true
+      )
+      let right = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        angle,
+        w,
+        false
+      )
+      leftBodyPnts.push(left)
+      rightBodyPnts.push(right)
+    }
+    return leftBodyPnts.concat(rightBodyPnts)
+  }
+
+  _getHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(this._positions)[0]
+    let tailLeft = pnts[0]
+    let tailRight = pnts[1]
+    if (PlotUtil.isClockWise(pnts[0], pnts[1], pnts[2])) {
+      tailLeft = pnts[1]
+      tailRight = pnts[0]
+    }
+    let midTail = PlotUtil.mid(tailLeft, tailRight)
+    let bonePnts = [midTail].concat(pnts.slice(2))
+    // 计算箭头
+    let headPnts = this._getArrowHeadPoints(bonePnts, tailLeft, tailRight)
+    let neckLeft = headPnts[0]
+    let neckRight = headPnts[4]
+    let tailWidthFactor =
+      PlotUtil.distance(tailLeft, tailRight) / PlotUtil.getBaseLength(bonePnts)
+    // 计算箭身
+    let bodyPnts = this._getArrowBodyPoints(
+      bonePnts,
+      neckLeft,
+      neckRight,
+      tailWidthFactor
+    )
+    // 整合
+    let count = bodyPnts.length
+    let leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2))
+    leftPnts.push(neckLeft)
+    let rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count))
+    rightPnts.push(neckRight)
+    leftPnts = PlotUtil.getQBSplinePoints(leftPnts)
+    rightPnts = PlotUtil.getQBSplinePoints(rightPnts)
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions(leftPnts.concat(headPnts, rightPnts.reverse()))
+      )
+    )
+  }
+
+  _mountedHook() {
+    /**
+     *  set the location
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   *
+   * @param text
+   * @param textStyle
+   * @returns {AttackArrow}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {AttackArrow}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.polygon, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('attack_arrow')
+
+export default AttackArrow

modules/overlay/plot/DoubleArrow.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 22:15:47
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util, PlotUtil } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+class DoubleArrow extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ polygon: {} })
+    this.headHeightFactor = 0.25
+    this.headWidthFactor = 0.3
+    this.neckHeightFactor = 0.85
+    this.neckWidthFactor = 0.15
+    this.type = Overlay.getOverlayType('double_arrow')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polygon.hierarchy = this._getHierarchy()
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _getArrowPoints(pnt1, pnt2, pnt3, clockWise) {
+    let midPnt = PlotUtil.mid(pnt1, pnt2)
+    let len = PlotUtil.distance(midPnt, pnt3)
+    let midPnt1 = PlotUtil.getThirdPoint(pnt3, midPnt, 0, len * 0.3, true)
+    let midPnt2 = PlotUtil.getThirdPoint(pnt3, midPnt, 0, len * 0.5, true)
+    midPnt1 = PlotUtil.getThirdPoint(
+      midPnt,
+      midPnt1,
+      HALF_PI,
+      len / 5,
+      clockWise
+    )
+    midPnt2 = PlotUtil.getThirdPoint(
+      midPnt,
+      midPnt2,
+      HALF_PI,
+      len / 4,
+      clockWise
+    )
+    let points = [midPnt, midPnt1, midPnt2, pnt3]
+    // 计算箭头部分
+    let arrowPnts = this._getArrowHeadPoints(points)
+    let neckLeftPoint = arrowPnts[0]
+    let neckRightPoint = arrowPnts[4]
+    // 计算箭身部分
+    let tailWidthFactor =
+      PlotUtil.distance(pnt1, pnt2) / PlotUtil.getBaseLength(points) / 2
+    let bodyPnts = this._getArrowBodyPoints(
+      points,
+      neckLeftPoint,
+      neckRightPoint,
+      tailWidthFactor
+    )
+    let n = bodyPnts.length
+    let lPoints = bodyPnts.slice(0, n / 2)
+    let rPoints = bodyPnts.slice(n / 2, n)
+    lPoints.push(neckLeftPoint)
+    rPoints.push(neckRightPoint)
+    lPoints = lPoints.reverse()
+    lPoints.push(pnt2)
+    rPoints = rPoints.reverse()
+    rPoints.push(pnt1)
+    return lPoints.reverse().concat(arrowPnts, rPoints)
+  }
+
+  _getArrowHeadPoints(points) {
+    let len = PlotUtil.getBaseLength(points)
+    let headHeight = len * this.headHeightFactor
+    let headPnt = points[points.length - 1]
+    let headWidth = headHeight * this.headWidthFactor
+    let neckWidth = headHeight * this.neckWidthFactor
+    let neckHeight = headHeight * this.neckHeightFactor
+    let headEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      headHeight,
+      true
+    )
+    let neckEndPnt = PlotUtil.getThirdPoint(
+      points[points.length - 2],
+      headPnt,
+      0,
+      neckHeight,
+      true
+    )
+    let headLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      false
+    )
+    let headRight = PlotUtil.getThirdPoint(
+      headPnt,
+      headEndPnt,
+      HALF_PI,
+      headWidth,
+      true
+    )
+    let neckLeft = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      false
+    )
+    let neckRight = PlotUtil.getThirdPoint(
+      headPnt,
+      neckEndPnt,
+      HALF_PI,
+      neckWidth,
+      true
+    )
+    return [neckLeft, headLeft, headPnt, headRight, neckRight]
+  }
+
+  _getArrowBodyPoints(points, neckLeft, neckRight, tailWidthFactor) {
+    let allLen = PlotUtil.wholeDistance(points)
+    let len = PlotUtil.getBaseLength(points)
+    let tailWidth = len * tailWidthFactor
+    let neckWidth = PlotUtil.distance(neckLeft, neckRight)
+    let widthDif = (tailWidth - neckWidth) / 2
+    let tempLen = 0
+    let leftBodyPnts = []
+    let rightBodyPnts = []
+    for (let i = 1; i < points.length - 1; i++) {
+      let angle =
+        PlotUtil.getAngleOfThreePoints(
+          points[i - 1],
+          points[i],
+          points[i + 1]
+        ) / 2
+      tempLen += PlotUtil.distance(points[i - 1], points[i])
+      let w = (tailWidth / 2 - (tempLen / allLen) * widthDif) / Math.sin(angle)
+      let left = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        Math.PI - angle,
+        w,
+        true
+      )
+      let right = PlotUtil.getThirdPoint(
+        points[i - 1],
+        points[i],
+        angle,
+        w,
+        false
+      )
+      leftBodyPnts.push(left)
+      rightBodyPnts.push(right)
+    }
+    return leftBodyPnts.concat(rightBodyPnts)
+  }
+
+  _getTempPoint4(linePnt1, linePnt2, point) {
+    let midPnt = PlotUtil.mid(linePnt1, linePnt2)
+    let len = PlotUtil.distance(midPnt, point)
+    let angle = PlotUtil.getAngleOfThreePoints(linePnt1, midPnt, point)
+    let symPnt, distance1, distance2, mid
+    if (angle < HALF_PI) {
+      distance1 = len * Math.sin(angle)
+      distance2 = len * Math.cos(angle)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, false)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, true)
+    } else if (angle >= HALF_PI && angle < Math.PI) {
+      distance1 = len * Math.sin(Math.PI - angle)
+      distance2 = len * Math.cos(Math.PI - angle)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, false)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, false)
+    } else if (angle >= Math.PI && angle < Math.PI * 1.5) {
+      distance1 = len * Math.sin(angle - Math.PI)
+      distance2 = len * Math.cos(angle - Math.PI)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, true)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, true)
+    } else {
+      distance1 = len * Math.sin(Math.PI * 2 - angle)
+      distance2 = len * Math.cos(Math.PI * 2 - angle)
+      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, true)
+      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, false)
+    }
+    return symPnt
+  }
+
+  _getHierarchy() {
+    let count = this._positions.length
+    let tempPoint4 = undefined
+    let connPoint = undefined
+    let pnts = Parse.parsePolygonCoordToArray(this._positions)[0]
+    let pnt1 = pnts[0]
+    let pnt2 = pnts[1]
+    let pnt3 = pnts[2]
+    if (count === 3) tempPoint4 = this._getTempPoint4(pnt1, pnt2, pnt3)
+    else tempPoint4 = pnts[3]
+    if (count === 3 || count === 4) connPoint = PlotUtil.mid(pnt1, pnt2)
+    else connPoint = pnts[4]
+    let leftArrowPnts, rightArrowPnts
+    if (PlotUtil.isClockWise(pnt1, pnt2, pnt3)) {
+      leftArrowPnts = this._getArrowPoints(pnt1, connPoint, tempPoint4, false)
+      rightArrowPnts = this._getArrowPoints(connPoint, pnt2, pnt3, true)
+    } else {
+      leftArrowPnts = this._getArrowPoints(pnt2, connPoint, pnt3, false)
+      rightArrowPnts = this._getArrowPoints(connPoint, pnt1, tempPoint4, true)
+    }
+    let m = leftArrowPnts.length
+    let t = (m - 5) / 2
+    let llBodyPnts = leftArrowPnts.slice(0, t)
+    let lArrowPnts = leftArrowPnts.slice(t, t + 5)
+    let lrBodyPnts = leftArrowPnts.slice(t + 5, m)
+    let rlBodyPnts = rightArrowPnts.slice(0, t)
+    let rArrowPnts = rightArrowPnts.slice(t, t + 5)
+    let rrBodyPnts = rightArrowPnts.slice(t + 5, m)
+    rlBodyPnts = PlotUtil.getBezierPoints(rlBodyPnts)
+    let bodyPnts = PlotUtil.getBezierPoints(
+      rrBodyPnts.concat(llBodyPnts.slice(1))
+    )
+    lrBodyPnts = PlotUtil.getBezierPoints(lrBodyPnts)
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions(
+          rlBodyPnts.concat(rArrowPnts, bodyPnts, lArrowPnts, lrBodyPnts)
+        )
+      )
+    )
+  }
+
+  _mountedHook() {
+    /**
+     *  set the location
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   *
+   * @param text
+   * @param textStyle
+   * @returns {DoubleArrow}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {DoubleArrow}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.polygon, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('double_arrow')
+
+export default DoubleArrow

modules/overlay/plot/FineArrow.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 22:38:10
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util, PlotUtil } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+class FineArrow extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ polygon: {} })
+    this.tailWidthFactor = 0.15
+    this.neckWidthFactor = 0.2
+    this.headWidthFactor = 0.25
+    this.headAngle = Math.PI / 8.5
+    this.neckAngle = Math.PI / 13
+    this.type = Overlay.getOverlayType('fine_arrow')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polygon.hierarchy = this._getHierarchy()
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _getHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(this._positions)[0]
+    let pnt1 = pnts[0]
+    let pnt2 = pnts[1]
+    let len = PlotUtil.getBaseLength(pnts)
+    let tailWidth = len * this.tailWidthFactor
+    let neckWidth = len * this.neckWidthFactor
+    let headWidth = len * this.headWidthFactor
+    let tailLeft = PlotUtil.getThirdPoint(pnt2, pnt1, HALF_PI, tailWidth, true)
+    let tailRight = PlotUtil.getThirdPoint(
+      pnt2,
+      pnt1,
+      HALF_PI,
+      tailWidth,
+      false
+    )
+    let headLeft = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.headAngle,
+      headWidth,
+      false
+    )
+    let headRight = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.headAngle,
+      headWidth,
+      true
+    )
+    let neckLeft = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.neckAngle,
+      neckWidth,
+      false
+    )
+    let neckRight = PlotUtil.getThirdPoint(
+      pnt1,
+      pnt2,
+      this.neckAngle,
+      neckWidth,
+      true
+    )
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions([
+          tailLeft,
+          neckLeft,
+          headLeft,
+          pnt2,
+          headRight,
+          neckRight,
+          tailRight
+        ])
+      )
+    )
+  }
+
+  _mountedHook() {
+    /**
+     *  set the location
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   *
+   * @param text
+   * @param textStyle
+   * @returns {FineArrow}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {FineArrow}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.polygon, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('fine_arrow')
+
+export default FineArrow

modules/overlay/plot/GatheringPlace.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 23:00:27
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util, PlotUtil } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+const HALF_PI = Math.PI / 2
+
+const FITTING_COUNT = 100
+
+class GatheringPlace extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ polygon: {} })
+    this.t = 0.4
+    this.type = Overlay.getOverlayType('gathering_place')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polygon.hierarchy = this._getHierarchy()
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _getHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(this._positions)[0]
+    if (this._positions.length === 2) {
+      let mid = PlotUtil.mid(pnts[0], pnts[1])
+      let d = PlotUtil.distance(pnts[0], mid) / 0.9
+      let pnt = PlotUtil.getThirdPoint(pnts[0], mid, HALF_PI, d, true)
+      pnts = [pnts[0], pnt, pnts[1]]
+    }
+    let mid = PlotUtil.mid(pnts[0], pnts[2])
+    pnts.push(mid, pnts[0], pnts[1])
+    let normals = []
+    for (let i = 0; i < pnts.length - 2; i++) {
+      let pnt1 = pnts[i]
+      let pnt2 = pnts[i + 1]
+      let pnt3 = pnts[i + 2]
+      let normalPoints = PlotUtil.getBisectorNormals(this.t, pnt1, pnt2, pnt3)
+      normals = normals.concat(normalPoints)
+    }
+    let count = normals.length
+    normals = [normals[count - 1]].concat(normals.slice(0, count - 1))
+    let pList = []
+    for (let i = 0; i < pnts.length - 2; i++) {
+      let pnt1 = pnts[i]
+      let pnt2 = pnts[i + 1]
+      pList.push(pnt1)
+      for (let t = 0; t <= FITTING_COUNT; t++) {
+        let pnt = PlotUtil.getCubicValue(
+          t / FITTING_COUNT,
+          pnt1,
+          normals[i * 2],
+          normals[i * 2 + 1],
+          pnt2
+        )
+        pList.push(pnt)
+      }
+      pList.push(pnt2)
+    }
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(Parse.parsePositions(pList))
+    )
+  }
+
+  _mountedHook() {
+    /**
+     *  set the location
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   *
+   * @param text
+   * @param textStyle
+   * @returns {GatheringPlace}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {GatheringPlace}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.polygon, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('gathering_place')
+
+export default GatheringPlace

modules/overlay/plot/TailedAttackArrow.js

+/**
+ * @Author: Caven
+ * @Date: 2020-08-29 22:51:36
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { PlotUtil } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+import AttackArrow from './AttackArrow'
+
+const { Cesium } = DC.Namespace
+
+class TailedAttackArrow extends AttackArrow {
+  constructor(positions) {
+    super(positions)
+    this._delegate = new Cesium.Entity({ polygon: {} })
+    this.headHeightFactor = 0.18
+    this.headWidthFactor = 0.3
+    this.neckHeightFactor = 0.85
+    this.neckWidthFactor = 0.15
+    this.tailWidthFactor = 0.1
+    this.headTailFactor = 0.8
+    this.swallowTailFactor = 1
+    this.type = Overlay.getOverlayType('tailed_attack_arrow')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polygon.hierarchy = this._getHierarchy()
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _getHierarchy() {
+    let pnts = Parse.parsePolygonCoordToArray(this._positions)[0]
+    let tailLeft = pnts[0]
+    let tailRight = pnts[1]
+    if (PlotUtil.isClockWise(pnts[0], pnts[1], pnts[2])) {
+      tailLeft = pnts[1]
+      tailRight = pnts[0]
+    }
+    let midTail = PlotUtil.mid(tailLeft, tailRight)
+    let bonePnts = [midTail].concat(pnts.slice(2))
+    let headPnts = this._getArrowHeadPoints(bonePnts, tailLeft, tailRight)
+    let neckLeft = headPnts[0]
+    let neckRight = headPnts[4]
+    let tailWidth = PlotUtil.distance(tailLeft, tailRight)
+    let allLen = PlotUtil.getBaseLength(bonePnts)
+    let len = allLen * this.tailWidthFactor * this.swallowTailFactor
+    let swallowTailPnt = PlotUtil.getThirdPoint(
+      bonePnts[1],
+      bonePnts[0],
+      0,
+      len,
+      true
+    )
+    let factor = tailWidth / allLen
+    let bodyPnts = this._getArrowBodyPoints(
+      bonePnts,
+      neckLeft,
+      neckRight,
+      factor
+    )
+    let count = bodyPnts.length
+    let leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2))
+    leftPnts.push(neckLeft)
+    let rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count))
+    rightPnts.push(neckRight)
+    leftPnts = PlotUtil.getQBSplinePoints(leftPnts)
+    rightPnts = PlotUtil.getQBSplinePoints(rightPnts)
+    return new Cesium.PolygonHierarchy(
+      Transform.transformWGS84ArrayToCartesianArray(
+        Parse.parsePositions(
+          leftPnts.concat(headPnts, rightPnts.reverse(), [
+            swallowTailPnt,
+            leftPnts[0]
+          ])
+        )
+      )
+    )
+  }
+}
+
+Overlay.registerType('tailed_attack_arrow')
+
+export default TailedAttackArrow

modules/overlay/primitive/ElecEllipsoidPrimitive.js

+/**
+ * @Author: Caven
+ * @Date: 2021-01-09 21:40:36
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class ElecEllipsoidPrimitive extends Overlay {
+  constructor(position, radius) {
+    super()
+    this._position = Parse.parsePosition(position)
+    this._radius = radius || { x: 10, y: 10, z: 10 }
+    this._delegate = new Cesium.Primitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: {}
+      })
+    })
+    this.type = Overlay.getOverlayType('elec_ellipsoid_primitive')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.geometryInstances.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
+      Transform.transformWGS84ToCartesian(this._position)
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set radius(radius) {
+    this._radius = radius
+    this._delegate.geometryInstances.geometry = new Cesium.EllipsoidGeometry({
+      radii: this._radius,
+      maximumCone: Cesium.Math.PI_OVER_TWO
+    })
+    return this
+  }
+
+  get radius() {
+    return this._radius
+  }
+
+  /**
+   *
+   * @private
+   */
+  _setAppearance() {
+    if (!this._style) {
+      return
+    }
+    this._delegate.appearance = new Cesium.MaterialAppearance({
+      material: Cesium.Material.fromType('EllipsoidElectric', {
+        color: this._style?.color || Cesium.Color.GREEN,
+        speed: this._style?.speed || 5
+      })
+    })
+  }
+
+  _mountedHook() {
+    /**
+     *  set the radius
+     */
+    this.radius = this._radius
+
+    /**
+     *  set the position
+     */
+    this.position = this._position
+
+    /**
+     * set the appearance
+     */
+    !this._delegate.appearance && this._setAppearance()
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {ElecEllipsoidPrimitive}
+   */
+  setStyle(style = {}) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    this._style = style
+    this._setAppearance()
+    return this
+  }
+}
+
+export default ElecEllipsoidPrimitive

modules/overlay/primitive/FlowLinePrimitive.js

+/**
+ * @Author: Caven
+ * @Date: 2021-01-05 20:18:34
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class FlowLinePrimitive extends Overlay {
+  constructor(positions, width = 1) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._width = width
+    this._delegate = new Cesium.Primitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: {}
+      })
+    })
+    this.type = Overlay.getOverlayType('flow_line_primitive')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.geometryInstances.geometry = new Cesium.PolylineGeometry({
+      positions: Transform.transformWGS84ArrayToCartesianArray(this._positions),
+      width: this._width
+    })
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  /**
+   *
+   * @private
+   */
+  _setAppearance() {
+    this._delegate.appearance = new Cesium.PolylineMaterialAppearance({
+      material: Cesium.Material.fromType('PolylineFlow', {
+        color: this._style?.color || new Cesium.Color(1.0, 0.0, 0.0, 0.7),
+        speed: this._style?.speed || 1,
+        percent: this._style?.percent || 0.03,
+        gradient: this._style?.gradient || 0.1
+      })
+    })
+  }
+
+  _mountedHook() {
+    /**
+     *  set the positions
+     */
+    this.positions = this._positions
+    /**
+     * set the appearance
+     */
+    !this._delegate.appearance && this._setAppearance()
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {FlowLinePrimitive}
+   */
+  setStyle(style = {}) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    this._style = style
+    style.classificationType &&
+      (this._delegate.classificationType = this._style.classificationType)
+    this._setAppearance()
+    return this
+  }
+}
+
+Overlay.registerType('flow_line_primitive')
+
+export default FlowLinePrimitive

modules/overlay/primitive/ScanCirclePrimitive.js

+/**
+ * @Author: Caven
+ * @Date: 2020-12-31 11:05:32
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class ScanCirclePrimitive extends Overlay {
+  constructor(position, radius) {
+    super()
+    this._position = Parse.parsePosition(position)
+    this._radius = radius
+    this._delegate = new Cesium.GroundPrimitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: {}
+      })
+    })
+    this.type = Overlay.getOverlayType('scan_circle_primitive')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.geometryInstances.geometry = new Cesium.EllipseGeometry({
+      center: Transform.transformWGS84ToCartesian(this._position),
+      semiMajorAxis: this._radius,
+      semiMinorAxis: this._radius
+    })
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set radius(radius) {
+    this._radius = radius
+    this._delegate.geometryInstances.geometry.semiMajorAxis = this._radius
+    this._delegate.geometryInstances.geometry.semiMinorAxis = this._radius
+    return this
+  }
+
+  get radius() {
+    return this._radius
+  }
+
+  /**
+   *
+   * @private
+   */
+  _setAppearance() {
+    if (!this._style) {
+      return
+    }
+    this._delegate.appearance = new Cesium.MaterialAppearance({
+      material: Cesium.Material.fromType('CircleScan', {
+        color: this._style?.color || Cesium.Color.WHITE,
+        speed: this._style?.speed || 10
+      })
+    })
+  }
+
+  _mountedHook() {
+    /**
+     *  set the position
+     */
+    this.position = this._position
+
+    /**
+     * set the appearance
+     */
+    !this._delegate.appearance && this._setAppearance()
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {ScanCirclePrimitive}
+   */
+  setStyle(style = {}) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    this._style = style
+    style.classificationType &&
+      (this._delegate.classificationType = this._style.classificationType)
+    this._setAppearance()
+    return this
+  }
+}
+
+Overlay.registerType('scan_circle_primitive')
+
+export default ScanCirclePrimitive

modules/overlay/primitive/TrailLinePrimitive.js

+/**
+ * @Author: Caven
+ * @Date: 2021-01-09 21:33:59
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class TrailLinePrimitive extends Overlay {
+  constructor(positions, width = 1) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._width = width
+    this._delegate = new Cesium.Primitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: {}
+      })
+    })
+    this.type = Overlay.getOverlayType('trail_line_primitive')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.geometryInstances.geometry = new Cesium.PolylineGeometry({
+      positions: Transform.transformWGS84ArrayToCartesianArray(this._positions),
+      width: this._width
+    })
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  /**
+   *
+   * @private
+   */
+  _setAppearance() {
+    this._delegate.appearance = new Cesium.PolylineMaterialAppearance({
+      material: Cesium.Material.fromType('PolylineTrail', {
+        color: this._style?.color || new Cesium.Color(1.0, 0.0, 0.0, 0.7),
+        speed: this._style?.speed || 5
+      })
+    })
+  }
+
+  _mountedHook() {
+    /**
+     *  set the positions
+     */
+    this.positions = this._positions
+    /**
+     * set the appearance
+     */
+    !this._delegate.appearance && this._setAppearance()
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {TrailLinePrimitive}
+   */
+  setStyle(style = {}) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    this._style = style
+    style.classificationType &&
+      (this._delegate.classificationType = this._style.classificationType)
+    this._setAppearance()
+    return this
+  }
+}
+
+Overlay.registerType('trail_line_primitive')
+
+export default TrailLinePrimitive

modules/overlay/primitive/VideoPrimitive.js

+/**
+ * @Author: Caven
+ * @Date: 2020-11-09 20:04:30
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class VideoPrimitive extends Overlay {
+  constructor(positions, video) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.GroundPrimitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: {}
+      })
+    })
+    this._video = video
+    this.type = Overlay.getOverlayType('video_primitive')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.geometryInstances.geometry = Cesium.PolygonGeometry.fromPositions(
+      {
+        positions: Transform.transformWGS84ArrayToCartesianArray(
+          this._positions
+        ),
+        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
+      }
+    )
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  set video(video) {
+    this._video = video
+    this._setAppearance()
+    return this
+  }
+
+  get video() {
+    return this._video
+  }
+
+  /**
+   *
+   * @private
+   */
+  _setAppearance() {
+    this._delegate.appearance = new Cesium.EllipsoidSurfaceAppearance({
+      material: Cesium.Material.fromType('Image', {
+        image: this._video
+      })
+    })
+  }
+
+  _mountedHook() {
+    /**
+     *  set the positions
+     */
+    this.positions = this._positions
+    this.video = this._video
+  }
+}
+
+Overlay.registerType('video_primitive')
+
+export default VideoPrimitive

modules/overlay/primitive/WaterPrimitive.js

+/**
+ * @Author: Caven
+ * @Date: 2020-10-11 18:24:37
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class WaterPrimitive extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.GroundPrimitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: {}
+      }),
+      asynchronous: true
+    })
+    this.type = Overlay.getOverlayType('water_primitive')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.geometryInstances.geometry = Cesium.PolygonGeometry.fromPositions(
+      {
+        positions: Transform.transformWGS84ArrayToCartesianArray(
+          this._positions
+        ),
+        height: this._style?.height,
+        extrudedHeight: this._style?.extrudedHeight,
+        closeTop: this._style?.closeTop,
+        closeBottom: this._style?.closeBottom,
+        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
+      }
+    )
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  /**
+   *
+   * @private
+   */
+  _setAppearance() {
+    if (!this._style) {
+      return
+    }
+    this._delegate.appearance = new Cesium.EllipsoidSurfaceAppearance({
+      material: Cesium.Material.fromType('Water', {
+        baseWaterColor:
+          this._style?.baseWaterColor || new Cesium.Color(0.2, 0.3, 0.6, 1.0),
+        blendColor:
+          this._style?.blendColor || new Cesium.Color(0.0, 1.0, 0.699, 1.0),
+        specularMap: this._style?.specularMap || Cesium.Material.DefaultImageId,
+        normalMap: this._style?.normalMap || Cesium.Material.DefaultImageId,
+        frequency: this._style?.frequency || 1000.0,
+        animationSpeed: this._style?.animationSpeed || 0.01,
+        amplitude: this._style?.amplitude || 10,
+        specularIntensity: this._style?.specularIntensity || 0.5
+      })
+    })
+  }
+
+  _mountedHook() {
+    /**
+     *  set the positions
+     */
+    this.positions = this._positions
+    /**
+     * set the appearance
+     */
+    !this._delegate.appearance && this._setAppearance()
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {WaterPrimitive}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    this._style = style
+    if (this._style?.classificationType) {
+      this._delegate.classificationType = this._style.classificationType
+    }
+    this._setAppearance()
+    return this
+  }
+}
+
+Overlay.registerType('water_primitive')
+
+export default WaterPrimitive

modules/overlay/vector/Billboard.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 10:18:23
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Billboard extends Overlay {
+  constructor(position, icon) {
+    super()
+    this._delegate = new Cesium.Entity({ billboard: {} })
+    this._position = Parse.parsePosition(position)
+    this._icon = icon
+    this._size = [32, 32]
+    this.type = Overlay.getOverlayType('billboard')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set icon(icon) {
+    this._icon = icon
+    this._delegate.billboard.image = this._icon
+    return this
+  }
+
+  get icon() {
+    return this._icon
+  }
+
+  set size(size) {
+    if (!Array.isArray(size)) {
+      throw new Error('Billboard: the size invalid')
+    }
+    this._size = size
+    this._delegate.billboard.width = this._size[0] || 32
+    this._delegate.billboard.height = this._size[1] || 32
+    return this
+  }
+
+  get size() {
+    return this._size
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.icon = this._icon
+    this.size = this._size
+  }
+
+  /**
+   *
+   * @param style
+   * @returns {Billboard}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['image'] && delete style['width'] && delete style['height']
+    this._style = style
+    Util.merge(this._delegate.billboard, this._style)
+    return this
+  }
+
+  /**
+   * Parse from entity
+   * @param entity
+   * @returns {any}
+   */
+  static fromEntity(entity) {
+    let billboard = undefined
+    let now = Cesium.JulianDate.now()
+    let position = Transform.transformCartesianToWGS84(
+      entity.position.getValue(now)
+    )
+    if (entity.billboard) {
+      billboard = new Billboard(position, entity.billboard.image.getValue(now))
+      billboard.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return billboard
+  }
+}
+
+Overlay.registerType('billboard')
+
+export default Billboard

modules/overlay/vector/Box.js

+/**
+ * @Author: Caven
+ * @Date: 2020-02-25 18:28:36
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Box extends Overlay {
+  constructor(position, length, width, height) {
+    super()
+    this._position = Parse.parsePosition(position)
+    this._length = length
+    this._width = width
+    this._height = height
+    this._delegate = new Cesium.Entity({
+      box: {
+        dimensions: {
+          x: +this._length,
+          y: +this._width,
+          z: +this._height
+        }
+      }
+    })
+    this.type = Overlay.getOverlayType('box')
+    this._state = State.INITIALIZED
+  }
+
+  /**
+   *
+   * @param position
+   * @returns {Box}
+   */
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    this._delegate.orientation = Cesium.Transforms.headingPitchRollQuaternion(
+      Transform.transformWGS84ToCartesian(this._position),
+      new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(this._position.heading),
+        Cesium.Math.toRadians(this._position.pitch),
+        Cesium.Math.toRadians(this._position.roll)
+      )
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set length(length) {
+    this._length = length || 0
+    this._delegate.box.dimensions.x = +this._length
+    return this
+  }
+
+  get length() {
+    return this._length
+  }
+
+  set width(width) {
+    this._width = width || 0
+    this._delegate.box.dimensions.y = +this._width
+    return this
+  }
+
+  get width() {
+    return this._width
+  }
+
+  set height(height) {
+    this._height = height || 0
+    this._delegate.box.dimensions.z = +this._height
+    return this
+  }
+
+  get height() {
+    return this._height
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Box}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['length'] && delete style['width'] && delete style['height']
+    this._style = style
+    Util.merge(this._delegate.box, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('box')
+
+export default Box

modules/overlay/vector/Circle.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-31 18:57:02
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Circle extends Overlay {
+  constructor(center, radius) {
+    super()
+    this._delegate = new Cesium.Entity({ polygon: {} })
+    this._center = Parse.parsePosition(center)
+    this._radius = +radius || 0
+    this._rotateAmount = 0
+    this._stRotation = 0
+    this.type = Overlay.getOverlayType('circle')
+    this._state = State.INITIALIZED
+  }
+
+  set center(center) {
+    this._center = Parse.parsePosition(center)
+    this._delegate.polygon.hierarchy = this._computeHierarchy()
+    return this
+  }
+
+  get center() {
+    return this._center
+  }
+
+  set radius(radius) {
+    this._radius = +radius
+    this._delegate.polygon.hierarchy = this._computeHierarchy()
+    return this
+  }
+
+  get radius() {
+    return this._radius
+  }
+
+  set rotateAmount(amount) {
+    this._rotateAmount = +amount
+    this._delegate.polygon.stRotation = new Cesium.CallbackProperty(time => {
+      this._stRotation += this._rotateAmount
+      if (this._stRotation >= 360 || this._stRotation <= -360) {
+        this._stRotation = 0
+      }
+      return Cesium.Math.toRadians(this._stRotation)
+    })
+    return this
+  }
+
+  get rotateAmount() {
+    return this._rotateAmount
+  }
+
+  /**
+   *
+   * @private
+   */
+  _computeHierarchy() {
+    let result = new Cesium.PolygonHierarchy()
+    let cep = Cesium.EllipseGeometryLibrary.computeEllipsePositions(
+      {
+        center: Transform.transformWGS84ToCartesian(this._center),
+        semiMajorAxis: this._radius,
+        semiMinorAxis: this._radius,
+        rotation: 0,
+        granularity: 0.005
+      },
+      false,
+      true
+    )
+    let pnts = Cesium.Cartesian3.unpackArray(cep.outerPositions)
+    pnts.push(pnts[0])
+    result.positions = pnts
+    return result
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.center = this._center
+  }
+
+  /**
+   *
+   * @param style
+   * @returns {Circle}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.polygon, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('circle')
+
+export default Circle

modules/overlay/vector/Corridor.js

+/**
+ * @Author: Caven
+ * @Date: 2020-04-11 18:58:17
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Corridor extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ corridor: {} })
+    this.type = Overlay.getOverlayType('corridor')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.corridor.positions = Transform.transformWGS84ArrayToCartesianArray(
+      this._positions
+    )
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _mountedHook() {
+    /**
+     *  set the location
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Corridor}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.corridor, this._style)
+    return this
+  }
+
+  /**
+   * Parses from entity
+   * @param entity
+   * @returns {Corridor|any}
+   */
+  static fromEntity(entity) {
+    let corridor = undefined
+    let now = Cesium.JulianDate.now()
+    if (entity.polyline) {
+      let positions = Transform.transformCartesianArrayToWGS84Array(
+        entity.polyline.positions.getValue(now)
+      )
+      corridor = new Corridor(positions)
+      corridor.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return corridor
+  }
+}
+
+Overlay.registerType('corridor')
+
+export default Corridor

modules/overlay/vector/Cylinder.js

+/**
+ * @Author: Caven
+ * @Date: 2020-04-14 18:10:00
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Cylinder extends Overlay {
+  constructor(position, length, topRadius, bottomRadius) {
+    super()
+    this._position = Parse.parsePosition(position)
+    this._length = +length || 0
+    this._topRadius = +topRadius || 0
+    this._bottomRadius = +bottomRadius || 0
+    this._delegate = new Cesium.Entity({ cylinder: {} })
+    this.type = Overlay.getOverlayType('cylinder')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    this._delegate.orientation = Cesium.Transforms.headingPitchRollQuaternion(
+      Transform.transformWGS84ToCartesian(this._position),
+      new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(this._position.heading),
+        Cesium.Math.toRadians(this._position.pitch),
+        Cesium.Math.toRadians(this._position.roll)
+      )
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set length(length) {
+    this._length = +length || 0
+    this._delegate.cylinder.length = this._length
+    return this
+  }
+
+  get length() {
+    return this._length
+  }
+
+  set topRadius(topRadius) {
+    this._topRadius = +topRadius || 0
+    this._delegate.cylinder.topRadius = this._topRadius
+    return this
+  }
+
+  get topRadius() {
+    return this._topRadius
+  }
+
+  set bottomRadius(bottomRadius) {
+    this._bottomRadius = +bottomRadius || 0
+    this._delegate.cylinder.bottomRadius = this._bottomRadius
+    return this
+  }
+
+  get bottomRadius() {
+    return this._bottomRadius
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.length = this._length
+    this.topRadius = this._topRadius
+    this.bottomRadius = this._bottomRadius
+  }
+
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Cylinder}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+
+    delete style['length'] &&
+      delete style['topRadius'] &&
+      delete style['bottomRadius']
+
+    this._style = style
+    Util.merge(this._delegate.cylinder, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('cylinder')
+
+export default Cylinder

modules/overlay/vector/DivIcon.js

+/**
+ * @Author: Caven
+ * @Date: 2020-02-12 21:46:22
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { DomUtil, Util } from '@dc-modules/utils'
+import { MouseEventType } from '@dc-modules/event'
+import { isBetween } from '@dc-modules/math'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+class DivIcon extends Overlay {
+  constructor(position, content) {
+    super()
+    this._delegate = DomUtil.create('div', 'div-icon')
+    this._position = Parse.parsePosition(position)
+    this._delegate.setAttribute('id', this._id)
+    Util.merge(this._delegate.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0'
+    })
+    this.content = content
+    this.type = Overlay.getOverlayType('div_icon')
+    this._state = State.INITIALIZED
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate.style.visibility = this._show ? 'visible' : 'hidden'
+    return this
+  }
+
+  get show() {
+    return this._show
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set content(content) {
+    if (content && typeof content === 'string') {
+      this._delegate.innerHTML = content
+    } else if (content && content instanceof Element) {
+      while (this._delegate.hasChildNodes()) {
+        this._delegate.removeChild(this._delegate.firstChild)
+      }
+      this._delegate.appendChild(content)
+    }
+    return this
+  }
+
+  get content() {
+    return this._delegate.childNodes || []
+  }
+
+  /**
+   * Updates style
+   * @param style
+   * @param distance
+   * @private
+   */
+  _updateStyle(style, distance) {
+    let translate3d = 'translate3d(0,0,0)'
+    if (style.transform) {
+      let x = style.transform.x - this._delegate.offsetWidth / 2
+      let y = style.transform.y - this._delegate.offsetHeight / 2
+      translate3d = `translate3d(${Math.round(x)}px,${Math.round(y)}px, 0)`
+    }
+
+    let scale3d = 'scale3d(1,1,1)'
+    let scaleByDistance = this._style.scaleByDistance
+    if (distance && scaleByDistance) {
+      let nearValue = scaleByDistance.nearValue
+      let farValue = scaleByDistance.farValue
+      let f = distance / scaleByDistance.far
+      if (distance < scaleByDistance.near) {
+        scale3d = `scale3d(${nearValue},${nearValue},1)`
+      } else if (distance > scaleByDistance.far) {
+        scale3d = `scale3d(${farValue},${farValue},1)`
+      } else {
+        let scale = farValue + f * (nearValue - farValue)
+        scale3d = `scale3d(${scale},${scale},1)`
+      }
+    }
+
+    let distanceDisplayCondition = this._style.distanceDisplayCondition
+    if (distance && distanceDisplayCondition) {
+      this.show =
+        this._show &&
+        isBetween(
+          distance,
+          distanceDisplayCondition.near,
+          distanceDisplayCondition.far
+        )
+    }
+    this._delegate.style.transform = `${translate3d} ${scale3d}`
+  }
+
+  /**
+   *
+   * @param layer
+   * @returns {boolean}
+   * @private
+   */
+  _onAdd(layer) {
+    this._layer = layer
+    this._layer.delegate.appendChild(this._delegate)
+    this._delegate.addEventListener('click', () => {
+      this._overlayEvent.fire(MouseEventType.CLICK, {
+        layer: layer,
+        overlay: this,
+        position: Transform.transformWGS84ToCartesian(this._position)
+      })
+    })
+    this._state = State.ADDED
+  }
+
+  /**
+   *
+   * @private
+   */
+  _onRemove() {
+    if (this._layer) {
+      this._layer.delegate.removeChild(this._delegate)
+      this._state = State.REMOVED
+    }
+  }
+
+  /**
+   * Sets text
+   * @param text
+   * @param textStyle
+   * @returns {DivIcon}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets style
+   * @param style
+   * @returns {DivIcon}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    this._style = style
+    this._style.className &&
+      DomUtil.addClass(this._delegate, this._style.className)
+    return this
+  }
+
+  /**
+   * Parse from entity
+   * @param entity
+   * @param content
+   * @returns {DivIcon}
+   */
+  static fromEntity(entity, content) {
+    let divIcon
+    let now = Cesium.JulianDate.now()
+    let position = Transform.transformCartesianToWGS84(
+      entity.position.getValue(now)
+    )
+    divIcon = new DivIcon(position, content)
+    if (entity.billboard) {
+      divIcon.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return divIcon
+  }
+}
+
+Overlay.registerType('div_icon')
+
+export default DivIcon

modules/overlay/vector/Ellipse.js

+/**
+ * @Author: Caven
+ * @Date: 2020-04-14 18:30:45
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Ellipse extends Overlay {
+  constructor(position, semiMajorAxis, semiMinorAxis) {
+    super()
+    this._position = Parse.parsePosition(position)
+    this._semiMajorAxis = +semiMajorAxis || 0
+    this._semiMinorAxis = +semiMinorAxis || 0
+    this._delegate = new Cesium.Entity({ ellipse: {} })
+    this.type = Overlay.getOverlayType('ellipse')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    this._delegate.orientation = Cesium.Transforms.headingPitchRollQuaternion(
+      Transform.transformWGS84ToCartesian(this._position),
+      new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(this._position.heading),
+        Cesium.Math.toRadians(this._position.pitch),
+        Cesium.Math.toRadians(this._position.roll)
+      )
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set semiMajorAxis(semiMajorAxis) {
+    this._semiMajorAxis = +semiMajorAxis || 0
+    this._delegate.ellipse.semiMajorAxis = this._semiMajorAxis
+    return this
+  }
+
+  get semiMajorAxis() {
+    return this._semiMajorAxis
+  }
+
+  set semiMinorAxis(semiMinorAxis) {
+    this._semiMinorAxis = +semiMinorAxis || 0
+    this._delegate.ellipse.semiMinorAxis = this._semiMinorAxis
+    return this
+  }
+
+  get semiMinorAxis() {
+    return this._semiMinorAxis
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.semiMajorAxis = this._semiMajorAxis
+    this.semiMinorAxis = this._semiMinorAxis
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Ellipse}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['semiMajorAxis'] && delete style['semiMinorAxis']
+    this._style = style
+    Util.merge(this._delegate.ellipse, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('ellipse')
+
+export default Ellipse

modules/overlay/vector/Ellipsoid.js

+/**
+ * @Author: Caven
+ * @Date: 2020-04-14 18:20:23
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Ellipsoid extends Overlay {
+  constructor(position, radius) {
+    super()
+    this._position = Parse.parsePosition(position)
+    this._radius = radius || { x: 10, y: 10, z: 10 }
+    this._delegate = new Cesium.Entity({ ellipsoid: {} })
+    this.type = Overlay.getOverlayType('ellipsoid')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    this._delegate.orientation = Cesium.Transforms.headingPitchRollQuaternion(
+      Transform.transformWGS84ToCartesian(this._position),
+      new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(this._position.heading),
+        Cesium.Math.toRadians(this._position.pitch),
+        Cesium.Math.toRadians(this._position.roll)
+      )
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set radius(radius) {
+    this._radius = radius || { x: 10, y: 10, z: 10 }
+    this._delegate.ellipsoid.radii = this._radius
+    return this
+  }
+
+  get radius() {
+    return this._radius
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.radius = this._radius
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Ellipsoid}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['radius']
+    this._style = style
+    Util.merge(this._delegate.ellipsoid, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('ellipsoid')
+
+export default Ellipsoid

modules/overlay/vector/Label.js

+/**
+ * @Author: Caven
+ * @Date: 2020-02-01 11:59:28
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Label extends Overlay {
+  constructor(position, text) {
+    super()
+    this._delegate = new Cesium.Entity({ label: {} })
+    this._position = Parse.parsePosition(position)
+    this._text = text
+    this.type = Overlay.getOverlayType('label')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set text(text) {
+    this._text = text
+    this._delegate.label.text = this._text
+    return this
+  }
+
+  get text() {
+    return this._text
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.text = this._text
+  }
+
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Label}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['text']
+    this._style = style
+    Util.merge(this._delegate.label, this._style)
+    return this
+  }
+
+  /**
+   * Parse from entity
+   * @param entity
+   * @returns {any}
+   */
+  static fromEntity(entity) {
+    let now = Cesium.JulianDate.now()
+    let position = Transform.transformCartesianToWGS84(
+      entity.position.getValue(now)
+    )
+    let label = undefined
+    if (entity.billboard) {
+      label = new Label(position, entity.name)
+      label.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return label
+  }
+}
+
+Overlay.registerType('label')
+
+export default Label

modules/overlay/vector/Plane.js

+/**
+ * @Author: Caven
+ * @Date: 2020-02-18 19:08:26
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Plane extends Overlay {
+  constructor(position, width, height, plane = {}) {
+    super()
+    this._position = Parse.parsePosition(position)
+    this._width = +width || 0
+    this._height = +height || 0
+    if (plane.normal && typeof plane.normal === 'string') {
+      let n = String(plane.normal).toLocaleUpperCase()
+      plane.normal =
+        n === 'X'
+          ? Cesium.Cartesian3.UNIT_X
+          : n === 'Y'
+          ? Cesium.Cartesian3.UNIT_Y
+          : Cesium.Cartesian3.UNIT_Z
+    } else {
+      plane.normal = Cesium.Cartesian3.UNIT_Z
+    }
+    this._normal = plane.normal
+    this._distance = plane.distance || 0
+    this._delegate = new Cesium.Entity({
+      plane: {
+        dimensions: {
+          x: this._width,
+          y: this._height
+        },
+        plane: new Cesium.Plane(this._normal, this._distance)
+      }
+    })
+    this.type = Overlay.getOverlayType('plane')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    this._delegate.orientation = Cesium.Transforms.headingPitchRollQuaternion(
+      Transform.transformWGS84ToCartesian(this._position),
+      new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(this._position.heading),
+        Cesium.Math.toRadians(this._position.pitch),
+        Cesium.Math.toRadians(this._position.roll)
+      )
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set width(width) {
+    this._width = +width || 0
+    this._delegate.plan.dimensions.x = this._width
+    return this
+  }
+
+  get width() {
+    return this._width
+  }
+
+  set height(height) {
+    this._height = +height || 0
+    this._delegate.plan.dimensions.y = this._height
+    return this
+  }
+
+  get height() {
+    return this._height
+  }
+
+  set distance(distance) {
+    this._distance = distance
+    this._delegate.plane.plane.distance = distance
+    return this
+  }
+
+  get distance() {
+    return this._distance
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.distance = this._distance
+  }
+
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Plane}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['dimensions'] && delete ['plane']
+    this._style = style
+    Util.merge(this._delegate.plane, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('plane')
+
+export default Plane

modules/overlay/vector/Point.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-06 15:03:25
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+const DEF_STYLE = {
+  pixelSize: 8,
+  outlineColor: Cesium.Color.BLUE,
+  outlineWidth: 2
+}
+
+class Point extends Overlay {
+  constructor(position) {
+    super()
+    this._delegate = new Cesium.Entity({ point: {} })
+    this._position = Parse.parsePosition(position)
+    this.type = Overlay.getOverlayType('point')
+    this._state = State.INITIALIZED
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+    this._delegate.position = Transform.transformWGS84ToCartesian(
+      this._position
+    )
+    return this
+  }
+
+  get position() {
+    return this._position
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.position = this._position
+
+    /**
+     *  initialize the Overlay parameter
+     */
+    Util.merge(this._delegate.point, DEF_STYLE, this._style)
+  }
+
+  /**
+   * Set style
+   * @param style
+   * @returns {Point}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['position']
+    this._style = style
+    Util.merge(this._delegate.point, DEF_STYLE, this._style)
+    return this
+  }
+
+  /**
+   * Parse from entity
+   * @param entity
+   * @returns {any}
+   */
+  static fromEntity(entity) {
+    let point = undefined
+    let now = Cesium.JulianDate.now()
+    let position = Transform.transformCartesianToWGS84(
+      entity.position.getValue(now)
+    )
+    point = new Point(position)
+    point.attr = {
+      ...entity?.properties?.getValue(now)
+    }
+    return point
+  }
+}
+
+Overlay.registerType('point')
+
+export default Point

modules/overlay/vector/Polygon.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-09 09:10:37
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import { center, area } from '@dc-modules/math'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Polygon extends Overlay {
+  constructor(positions) {
+    super()
+    this._delegate = new Cesium.Entity({ polygon: {} })
+    this._positions = Parse.parsePositions(positions)
+    this._holes = []
+    this.type = Overlay.getOverlayType('polygon')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polygon.hierarchy = this._computeHierarchy()
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  set holes(holes) {
+    if (holes && holes.length) {
+      this._holes = holes.map(item => Parse.parsePositions(item))
+      this._delegate.polygon.hierarchy = this._computeHierarchy()
+    }
+    return this
+  }
+
+  get holes() {
+    return this._holes
+  }
+
+  get center() {
+    return center([...this._positions, this._positions[0]])
+  }
+
+  get area() {
+    return area(this._positions)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _computeHierarchy() {
+    let result = new Cesium.PolygonHierarchy()
+    result.positions = Transform.transformWGS84ArrayToCartesianArray(
+      this._positions
+    )
+    result.holes = this._holes.map(
+      item =>
+        new Cesium.PolygonHierarchy(
+          Transform.transformWGS84ArrayToCartesianArray(item)
+        )
+    )
+    return result
+  }
+
+  _mountedHook() {
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   * Sets text
+   * @param text
+   * @param textStyle
+   * @returns {Polygon}
+   */
+  setLabel(text, textStyle) {
+    this._delegate.position = Transform.transformWGS84ToCartesian(this.center)
+    this._delegate.label = {
+      text: text,
+      ...textStyle
+    }
+    return this
+  }
+
+  /**
+   * Sets style
+   * @param style
+   * @returns {Polygon}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.polygon, this._style)
+    return this
+  }
+
+  /**
+   * Parse from entity
+   * @param entity
+   * @returns {any}
+   */
+  static fromEntity(entity) {
+    let polygon = undefined
+    let now = Cesium.JulianDate.now()
+    if (entity.polygon) {
+      let positions = Transform.transformCartesianArrayToWGS84Array(
+        entity.polygon.hierarchy.getValue(now).positions
+      )
+      polygon = new Polygon(positions)
+      polygon.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return polygon
+  }
+}
+
+Overlay.registerType('polygon')
+
+export default Polygon

modules/overlay/vector/Polyline.js

+/**
+ * @Author: Caven
+ * @Date: 2020-01-06 15:03:25
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import { center, distance } from '@dc-modules/math'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Polyline extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ polyline: {} })
+    this.type = Overlay.getOverlayType('polyline')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polyline.positions = Transform.transformWGS84ArrayToCartesianArray(
+      this._positions
+    )
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  get center() {
+    return center(this._positions)
+  }
+
+  get distance() {
+    return distance(this._positions)
+  }
+
+  _mountedHook() {
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   * Sets Text
+   * @param text
+   * @param textStyle
+   * @returns {Polyline}
+   */
+  setLabel(text, textStyle) {
+    this._delegate.position = Transform.transformWGS84ToCartesian(this.center)
+    this._delegate.label = {
+      text: text,
+      ...textStyle
+    }
+    return this
+  }
+
+  /**
+   * Sets style
+   * @param style
+   * @returns {Polyline}
+   */
+  setStyle(style) {
+    if (!style || Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.polyline, this._style)
+    return this
+  }
+
+  /**
+   * Parse from entity
+   * @param entity
+   * @returns {Polyline}
+   */
+  static fromEntity(entity) {
+    let polyline = undefined
+    let now = Cesium.JulianDate.now()
+    if (entity.polyline) {
+      let positions = Transform.transformCartesianArrayToWGS84Array(
+        entity.polyline.positions.getValue(now)
+      )
+      polyline = new Polyline(positions)
+      polyline.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return polyline
+  }
+}
+
+Overlay.registerType('polyline')
+
+export default Polyline

modules/overlay/vector/PolylineVolume.js

+/**
+ * @Author: Caven
+ * @Date: 2020-04-14 20:10:34
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class PolylineVolume extends Overlay {
+  constructor(positions, shape) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._shape = shape || []
+    this._delegate = new Cesium.Entity({ polylineVolume: {} })
+    this.type = Overlay.getOverlayType('polyline_volume')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.polylineVolume.positions = Transform.transformWGS84ArrayToCartesianArray(
+      this._positions
+    )
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  set shape(shape) {
+    this._shape = shape || []
+    this._delegate.polylineVolume.shape = this._shape
+    return this
+  }
+
+  get shape() {
+    return this._shape
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.positions = this._positions
+
+    /**
+     *  initialize the Overlay parameter
+     */
+    this.shape = this._shape
+  }
+
+  /**
+   * @param text
+   * @param textStyle
+   * @returns {PolylineVolume}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets style
+   * @param style
+   * @returns {PolylineVolume}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions'] && delete style['shape']
+    this._style = style
+    Util.merge(this._delegate.polylineVolume, this._style)
+    return this
+  }
+
+  /**
+   * Parses from entity
+   * @param entity
+   * @param shape
+   * @returns {PolylineVolume|any}
+   */
+  static fromEntity(entity, shape) {
+    let polylineVolume = undefined
+    let now = Cesium.JulianDate.now()
+    if (entity.polyline) {
+      let positions = Transform.transformCartesianArrayToWGS84Array(
+        entity.polyline.positions.getValue(now)
+      )
+      polylineVolume = new PolylineVolume(positions, shape)
+      polylineVolume.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return polylineVolume
+  }
+}
+
+Overlay.registerType('polyline_volume')
+
+export default PolylineVolume

modules/overlay/vector/Rectangle.js

+/**
+ * @Author: Caven
+ * @Date: 2020-04-14 20:46:23
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Rectangle extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ rectangle: {} })
+    this.type = Overlay.getOverlayType('rectangle')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.rectangle.coordinates = Cesium.Rectangle.fromCartesianArray(
+      Transform.transformWGS84ArrayToCartesianArray(this._positions)
+    )
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   * @param text
+   * @param textStyle
+   * @returns {Rectangle}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Rectangle}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.rectangle, this._style)
+    return this
+  }
+}
+
+Overlay.registerType('rectangle')
+
+export default Rectangle

modules/overlay/vector/Wall.js

+/**
+ * @Author: Caven
+ * @Date: 2020-02-25 18:28:36
+ */
+
+import State from '@dc-modules/state/State'
+import Parse from '@dc-modules/parse/Parse'
+import { Util } from '@dc-modules/utils'
+import { Transform } from '@dc-modules/transform'
+import Overlay from '../Overlay'
+
+const { Cesium } = DC.Namespace
+
+class Wall extends Overlay {
+  constructor(positions) {
+    super()
+    this._positions = Parse.parsePositions(positions)
+    this._delegate = new Cesium.Entity({ wall: {} })
+    this.type = Overlay.getOverlayType('wall')
+    this._state = State.INITIALIZED
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._delegate.wall.positions = Transform.transformWGS84ArrayToCartesianArray(
+      this._positions
+    )
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  _mountedHook() {
+    /**
+     * set the location
+     */
+    this.positions = this._positions
+  }
+
+  /**
+   *
+   * @param text
+   * @param textStyle
+   * @returns {Wall}
+   */
+  setLabel(text, textStyle) {
+    return this
+  }
+
+  /**
+   * Sets Style
+   * @param style
+   * @returns {Wall}
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return this
+    }
+    delete style['positions']
+    this._style = style
+    Util.merge(this._delegate.wall, this._style)
+    return this
+  }
+
+  /**
+   * Parses from entity
+   * @param entity
+   * @returns {Wall|any}
+   */
+  static fromEntity(entity) {
+    let wall = undefined
+    let now = Cesium.JulianDate.now()
+    if (entity.polyline) {
+      let positions = Transform.transformCartesianArrayToWGS84Array(
+        entity.polyline.positions.getValue(now)
+      )
+      wall = new Wall(positions)
+      wall.attr = {
+        ...entity?.properties?.getValue(now)
+      }
+    }
+    return wall
+  }
+}
+
+Overlay.registerType('wall')
+
+export default Wall