添加提示框组件和右击菜单组件

src/core/DC.Loader.js

@@ -7,7 +7,7 @@
 
 import './const'
 import './utils'
-import './postion/DC.Position'
+import './position/DC.Position'
 import './transform/DC.T'
 import './imagery'
 import './layer'

src/core/const/index.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-03 10:09:19
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 20:54:46
+ * @Last Modified time: 2020-02-01 13:52:48
  */
 import Cesium from '@/namespace'
 
@@ -53,7 +53,8 @@ DC.OverlayType = {
   MODEL: 'model',
   BILLBOARD: 'billboard',
   CIRCLE: 'circle',
-  RECT: 'rect'
+  RECT: 'rect',
+  LABEL: 'label'
 }
 
 DC.OverlayEventType = {
@@ -84,14 +85,14 @@ DC.EffectState = {
 }
 
 DC.WidgetType = {
-  Popup: 'Popup',
-  ContextMenu: 'ContextMenu'
+  POPUP: 'Popup',
+  CONTEXT_MENU: 'ContextMenu',
+  TOOL_TIP: 'Tooltip'
 }
 
 DC.WidgetState = {
   INITIALIZED: 'initialized',
   INSTALLED: 'installed',
-  UNINSTALLED: 'uninstalled',
-  SHOW: 'show',
-  HIDDEN: 'hidden'
+  ENABLED: 'enabled',
+  DISABLED: 'disabled'
 }

src/core/event/MouseEvent.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2019-12-31 16:58:31
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 18:10:42
+ * @Last Modified time: 2020-02-01 14:45:04
  */
 
 import Cesium from '@/namespace'

src/core/overlay/Overlay.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-03 12:18:17
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:06:56
+ * @Last Modified time: 2020-02-01 11:57:48
  */
 import OverlayEvent from '../event/OverlayEvent'
 class Overlay {
@@ -54,26 +54,37 @@ class Overlay {
   }
 
   /***
-   * 构建代理，子类需要覆盖重写
+   *
    */
   _prepareDelegate() {}
 
   /**
    *
    * @param {*} layer
-   * 覆盖物添加调用的回调函数，子类需要覆盖重写
    */
-  _addCallback(layer) {}
+  _addCallback(layer) {
+    this._layer = layer
+    this._prepareDelegate()
+    if (this._layer && this._layer.delegate && this._layer.delegate.entities) {
+      this._layer.delegate.entities.add(this._delegate)
+      this._state = DC.OverlayState.ADDED
+    }
+  }
 
   /**
-   * 覆盖物删除调用的回调函数，子类需要覆盖重写
+   *
    */
-  _removeCallback() {}
+  _removeCallback() {
+    if (this._layer && this._layer.delegate && this._layer.delegate.entities) {
+      this._layer.delegate.entities.remove(this._delegate)
+      this._state = DC.OverlayState.REMOVED
+    }
+  }
 
   /**
    *
    * @param {*} style
-   * 设置覆盖物样式，子类需要覆盖重写
+   * set overlay style
    */
   setStyle(style) {}
 

src/core/overlay/base/DC.Billboard.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-19 10:18:23
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:06:03
+ * @Last Modified time: 2020-02-01 12:05:36
  */
 
 import Cesium from '@/namespace'
@@ -46,6 +46,9 @@ DC.Billboard = class extends Overlay {
     return this._size
   }
 
+  /**
+   * prepare entity
+   */
   _prepareDelegate() {
     /**
      * set the location
@@ -85,20 +88,23 @@ DC.Billboard = class extends Overlay {
     this._delegate.overlayId = this._id
   }
 
-  _addCallback(layer) {
-    this._layer = layer
-    this._prepareDelegate()
-    this._layer.delegate.entities.add(this._delegate)
-    this._state = DC.OverlayState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._layer) {
-      this._layer.delegate.entities.remove(this._delegate)
-      this._state = DC.OverlayState.REMOVED
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  bindLabel(text, textStyle) {
+    this._delegate.label = {
+      ...textStyle,
+      text: text
     }
+    return this
   }
 
+  /**
+   *
+   * @param {*} style
+   */
   setStyle(style) {
     if (Object.keys(style).length === 0) {
       return
@@ -108,6 +114,10 @@ DC.Billboard = class extends Overlay {
     return this
   }
 
+  /**
+   *
+   * @param {*} entity
+   */
   static fromEntity(entity) {
     let position = DC.T.transformCartesianToWSG84(entity.position._value)
     let billboard = undefined

src/core/overlay/base/DC.Cricle.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 18:57:02
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 20:47:26
+ * @Last Modified time: 2020-02-01 12:04:08
  */
 import Cesium from '@/namespace'
 import Overlay from '../Overlay'
@@ -36,6 +36,9 @@ DC.Circle = class extends Overlay {
     return this._redius
   }
 
+  /**
+   * prepare entity
+   */
   _prepareDelegate() {
     /**
      * set the location
@@ -60,38 +63,41 @@ DC.Circle = class extends Overlay {
      *  initialize the Overlay parameter
      */
     this._delegate.ellipse = {
+      ...this._style,
       semiMajorAxis: new Cesium.CallbackProperty(time => {
         return this._radius
       }),
       semiMinorAxis: new Cesium.CallbackProperty(time => {
         return this._radius
-      }),
-      ...this._style
+      })
     }
     this._delegate.layer = this._layer
     this._delegate.overlayId = this._id
   }
 
-  _addCallback(layer) {
-    this._layer = layer
-    this._prepareDelegate()
-    this._layer.delegate.entities.add(this._delegate)
-    this._state = DC.OverlayState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._layer) {
-      this._layer.delegate.entities.remove(this._delegate)
-      this._state = DC.OverlayState.REMOVED
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  bindLabel(text, textStyle) {
+    this._delegate.label = {
+      text: text,
+      ...textStyle
     }
+    return this
   }
 
+  /**
+   *
+   * @param {*} style
+   */
   setStyle(style) {
     if (Object.keys(style).length === 0) {
       return
     }
     this._style = style
-    this._delegate.ellipse && DC.Util.merge(this._delegate.ellipse, this._style)
+    this._delegate.ellipse && this._delegate.ellipse.merge(this._style)
     return this
   }
 }

src/core/overlay/base/DC.Label.js

@@ -0,0 +1,87 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-02-01 11:59:28
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-01 12:03:20
+ */
+import Cesium from '@/namespace'
+import Overlay from '../Overlay'
+
+DC.Label = class extends Overlay {
+  constructor(position, text) {
+    if (!position || !(position instanceof DC.Position)) {
+      throw new Error('the position invalid')
+    }
+    super()
+    this._position = position
+    this._text = text
+    this._delegate = new Cesium.Entity()
+    this._state = DC.OverlayState.INITIALIZED
+    this.type = DC.OverlayType.LABEL
+  }
+
+  set position(position) {
+    this._position = position
+  }
+
+  get position() {
+    return this._position
+  }
+
+  set text(icon) {
+    this._text = text
+  }
+
+  get text() {
+    return this._text
+  }
+
+  /**
+   * prepare entity
+   */
+  _prepareDelegate() {
+    /**
+     * set the location
+     */
+    this._delegate.position = new Cesium.CallbackProperty(time => {
+      return DC.T.transformWSG84ToCartesian(this._position)
+    })
+    /**
+     * set the orientation
+     */
+    this._delegate.orientation = new Cesium.CallbackProperty(time => {
+      return Cesium.Transforms.headingPitchRollQuaternion(
+        DC.T.transformWSG84ToCartesian(this._position),
+        new Cesium.HeadingPitchRoll(
+          Cesium.Math.toRadians(this._position.heading),
+          Cesium.Math.toRadians(this._position.pitch),
+          Cesium.Math.toRadians(this._position.roll)
+        )
+      )
+    })
+    /**
+     *  initialize the Overlay parameter
+     */
+    this._delegate.label = {
+      ...this._style,
+      text: new Cesium.CallbackProperty(time => {
+        return this._text
+      })
+    }
+    this._delegate.layer = this._layer
+    this._delegate.overlayId = this._id
+  }
+
+  /**
+   *
+   * @param {*} style
+   */
+  setStyle(style) {
+    if (Object.keys(style).length === 0) {
+      return
+    }
+    this._style = style
+    this._delegate.label && this._delegate.label.merge(this._style)
+    return this
+  }
+}

src/core/overlay/base/DC.Point.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-06 15:03:25
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:06:13
+ * @Last Modified time: 2020-02-01 11:58:47
  */
 
 import Cesium from '@/namespace'
@@ -34,6 +34,9 @@ DC.Point = class extends Overlay {
     return this._position
   }
 
+  /**
+   * prepare entity
+   */
   _prepareDelegate() {
     /**
      * set the location
@@ -65,20 +68,6 @@ DC.Point = class extends Overlay {
     this._delegate.overlayId = this._id
   }
 
-  _addCallback(layer) {
-    this._layer = layer
-    this._prepareDelegate()
-    this._layer.delegate.entities.add(this._delegate)
-    this._state = DC.OverlayState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._layer) {
-      this._layer.delegate.entities.remove(this._delegate)
-      this._state = DC.OverlayState.REMOVED
-    }
-  }
-
   setStyle(style) {
     if (Object.keys(style).length === 0) {
       return

src/core/overlay/base/DC.Polygon.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-09 09:10:37
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:06:25
+ * @Last Modified time: 2020-02-01 11:58:54
  */
 import Overlay from '../Overlay'
 import Cesium from '@/namespace'
@@ -61,6 +61,9 @@ DC.Polygon = class extends Overlay {
     return result
   }
 
+  /**
+   * prepare entity
+   */
   _preparePositions(positions) {
     if (typeof positions === 'string') {
       if (positions.indexOf('#') >= 0) {

src/core/overlay/base/DC.Polyline.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-06 15:03:25
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:06:25
+ * @Last Modified time: 2020-02-01 11:59:05
  */
 
 import Overlay from '../Overlay'
@@ -64,6 +64,9 @@ DC.Polyline = class extends Overlay {
     })
   }
 
+  /**
+   * prepare entity
+   */
   _prepareDelegate() {
     /**
      *  initialize the Overlay parameter
@@ -78,20 +81,6 @@ DC.Polyline = class extends Overlay {
     this._delegate.overlayId = this._id
   }
 
-  _addCallback(layer) {
-    this._layer = layer
-    this._prepareDelegate()
-    this._layer.delegate.entities.add(this._delegate)
-    this._state = DC.OverlayState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._layer) {
-      this._layer.delegate.entities.remove(this._delegate)
-      this._state = DC.OverlayState.REMOVED
-    }
-  }
-
   setStyle(style) {
     if (Object.keys(style).length == 0) {
       return

src/core/overlay/index.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-06 15:04:15
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 20:48:41
+ * @Last Modified time: 2020-02-01 12:05:42
  */
 
 import './base/DC.Point'
@@ -10,5 +10,6 @@ import './base/DC.Polyline'
 import './base/DC.Polygon'
 import './base/DC.Billboard'
 import './base/DC.Cricle'
+import './base/DC.Label'
 import './model/DC.Model'
 import './model/DC.Tileset'

src/core/overlay/model/DC.Model.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-06 15:03:25
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:06:39
+ * @Last Modified time: 2020-02-01 12:05:10
  */
 
 import Overlay from '../Overlay'
@@ -63,20 +63,23 @@ DC.Model = class extends Overlay {
     this._delegate.overlayId = this._id
   }
 
-  _addCallback(layer) {
-    this._layer = layer
-    this._prepareDelegate()
-    this._layer.delegate.entities.add(this._delegate)
-    this._state = DC.OverlayState.ADDED
-  }
-
-  _removeCallback() {
-    if (this._layer) {
-      this._layer.delegate.entities.remove(this._delegate)
-      this._state = DC.OverlayState.REMOVED
+  /**
+   *
+   * @param {*} text
+   * @param {*} textStyle
+   */
+  bindLabel(text, textStyle) {
+    this._delegate.label = {
+      ...textStyle,
+      text: text
     }
+    return this
   }
 
+  /**
+   *
+   * @param {*} style
+   */
   setStyle(style) {
     if (Object.keys(style).length == 0) {
       return

src/core/overlay/model/DC.Tileset.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-07 08:51:56
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 20:49:28
+ * @Last Modified time: 2020-02-01 12:06:52
  */
 import Cesium from '@/namespace'
 import Overlay from '../Overlay'
@@ -17,12 +17,20 @@ DC.Tileset = class extends Overlay {
     this._state = DC.OverlayState.INITIALIZED
   }
 
+  /**
+   *
+   * @param {*} layer
+   * Overrides parent methods
+   */
   _addCallback(layer) {
     this._layer = layer
     this._layer.delegate.add(this._delegate)
     this._state = DC.OverlayState.ADDED
   }
 
+  /**
+   * Overrides parent methods
+   */
   _removeCallback() {
     if (this._layer) {
       this._layer.delegate.remove(this._delegate)

src/core/viewer/DC.Viewer.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2019-12-27 17:13:24
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 21:14:45
+ * @Last Modified time: 2020-02-01 14:54:59
  */
 
 import Cesium from '@/namespace'
@@ -12,6 +12,7 @@ import MouseEvent from '../event/MouseEvent'
 import ViewerEvent from '../event/ViewerEvent'
 import Popup from '../widget/Popup'
 import ContextMenu from '../widget/ContextMenu'
+import Tooltip from '../widget/Tooltip'
 
 const DEF_OPTS = {
   animation: false, //Whether to create animated widgets, lower left corner of the meter
@@ -54,7 +55,10 @@ DC.Viewer = class {
      */
     this._popup = new Popup()
     this._contextMenu = new ContextMenu()
-    this.use(this._popup).use(this._contextMenu)
+    this._tooltip = new Tooltip()
+    this.use(this._popup)
+      .use(this._contextMenu)
+      .use(this._tooltip)
   }
 
   get delegate() {
@@ -89,6 +93,10 @@ DC.Viewer = class {
     return this._contextMenu
   }
 
+  get tooltip() {
+    return this._tooltip
+  }
+
   _addLayerCallback(layer) {
     if (layer && layer.layerEvent && layer.state !== DC.LayerState.ADDED) {
       !this._layerCache[layer.type] && (this._layerCache[layer.type] = {})

src/core/widget/ContextMenu.js

@@ -2,26 +2,77 @@
  * @Author: Caven
  * @Date: 2019-12-31 17:32:01
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:09:03
+ * @Last Modified time: 2020-02-01 16:00:40
  */
-
+import Cesium from '@/namespace'
 import Widget from './Widget'
 
 class ContextMenu extends Widget {
   constructor() {
     super()
-    this._viewer = undefined
-    this._position = undefined
     this._wapper = DC.DomUtil.create('div', 'dc-context-menu')
-    this._state = DC.WidgetState.INSTALLED
-    this.type = DC.WidgetType.ContextMenu
+    this._ulEl = DC.DomUtil.create('ul', 'menu-list', this._wapper)
+    this.type = DC.WidgetType.CONTEXT_MENU
+  }
+
+  _installHook() {
+    if (this._viewer) {
+      this._viewer.on(DC.MouseEventType.RIGHT_CLICK, this._rightclickHandler, this)
+      this._viewer.on(DC.MouseEventType.CLICK, this._clickHandler, this)
+    }
+    this._prepareDefaultMenu()
   }
 
-  _handleRightclick(movement) {}
+  _prepareDefaultMenu() {
+    let homeMenu = DC.DomUtil.create('li', 'menu-item', this._ulEl)
+    homeMenu.innerHTML = '飞到默认位置'
+    let self = this
+    homeMenu.onclick = () => {
+      self._viewer.delegate.camera.flyHome(0)
+      self.hide()
+    }
+  }
+  _rightclickHandler(e) {
+    if (e && e.position && this._enable) {
+      this._updateWindowCoord(Cesium.SceneTransforms.wgs84ToWindowCoordinates(this._viewer.delegate.scene, e.position))
+    }
+  }
 
-  _handleclick(movement) {
+  _clickHandler(e) {
     this.hide()
   }
+
+  _updateWindowCoord(windowCoord) {
+    this._wapper.style.cssText = `
+    visibility:visible;
+    z-index:1;
+    transform:translate3d(${windowCoord.x}px,${windowCoord.y}px, 0);
+    `
+  }
+
+  /**
+   *
+   * @param {*} label
+   * @param {*} method
+   * @param {*} context
+   */
+  addMenuItem(label, method, context) {
+    if (!label || !method) {
+      return this
+    }
+    let menu = DC.DomUtil.create('li', 'menu-item')
+    let lastNode = this._ulEl.lastChild
+    menu.innerHTML = label
+    let self = this
+    if (method) {
+      menu.onclick = () => {
+        method.call(context)
+        self.hide()
+      }
+    }
+    this._ulEl.insertBefore(menu, lastNode)
+    return this
+  }
 }
 
 export default ContextMenu

src/core/widget/Popup.js

@@ -2,16 +2,23 @@
  * @Author: Caven
  * @Date: 2020-01-15 19:16:45
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:09:12
+ * @Last Modified time: 2020-02-01 15:04:08
  */
-class Popup {
+
+import Widget from './Widget'
+
+class Popup extends Widget {
   constructor() {
-    this._viewer = undefined
-    this._position = undefined
+    super()
     this._wapper = DC.DomUtil.create('div', 'dc-popup')
   }
 
-  _setWindowCoord(windowCoord) {}
+  _setWindowCoord(windowCoord) {
+    let x = windowCoord.x + 10
+    let y = windowCoord.y - this._wapper.offsetHeight / 2
+    this._wapper.style.zIndex = 1
+    this._wapper.style.transform = `translate3d(${x}px,${y}px, 0)`
+  }
 }
 
 export default Popup

src/core/widget/Tooltip.js

@@ -0,0 +1,28 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-02-01 12:07:54
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-02-01 15:01:25
+ */
+
+import Widget from './Widget'
+
+class Tooltip extends Widget {
+  constructor() {
+    super()
+    this._wapper = DC.DomUtil.create('div', 'dc-tool-tip')
+    this.type = DC.WidgetType.TOOL_TIP
+  }
+
+  _updateWindowCoord(windowCoord) {
+    let x = windowCoord.x + 10
+    let y = windowCoord.y - this._wapper.offsetHeight / 2
+    this._wapper.cssText = `
+    visibility:visible;
+    z-index:1;
+    transform:translate3d(${x}px,${y}px, 0);
+    `
+  }
+}
+
+export default Tooltip

src/core/widget/Widget.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-15 19:17:52
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:48:36
+ * @Last Modified time: 2020-02-01 15:06:09
  */
 import Cesium from '@/namespace'
 
@@ -10,17 +10,25 @@ class Widget {
   constructor() {
     this._viewer = undefined
     this._position = undefined
-    this._show = false
+    this._enable = false
     this._wapper = undefined
-    this._windowCoord = undefined
-    this._state = undefined
+    this._state = DC.WidgetState.INSTALLED
     this.type = undefined
   }
 
+  set enable(enable) {
+    this._enable = enable
+    this._state = this._enable ? DC.WidgetState.ENABLED : DC.WidgetState.DISABLED
+  }
+
+  get state() {
+    return this._state
+  }
+
   /**
    *
    * @param {*} windowCoord
-   * 更新Widget位置需要子类覆盖
+   * 更新 Widge 位置需要子类覆盖
    */
   _updateWindowCoord(windowCoord) {}
 
@@ -28,47 +36,35 @@ class Widget {
    *
    * @param {*} viewer
    */
-  setPosition(position) {
-    this._position = position
+  install(viewer) {
+    this._viewer = viewer
+    this._wapper && this._viewer.dcContainer.appendChild(this._wapper)
+    this._state = DC.WidgetState.INSTALLED
+    /**
+     *  add postRender Listener
+     */
     if (this._viewer) {
       let self = this
       let scene = this._viewer.scene
       scene.postRender.addEventListener(() => {
-        let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, self._position)
-        this._setWindowCoord(windowCoord)
+        if (self._position && self._enable) {
+          let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, self._position)
+          self._updateWindowCoord(windowCoord)
+        }
       })
     }
-  }
-
-  /**
-   *
-   * @param {*} viewer
-   */
-  install(viewer) {
-    this._viewer = viewer
-    this._wapper && this._viewer.dcContainer.appendChild(this._wapper)
-    this._state = DC.WidgetState.INSTALLED
+    /**
+     * excute installHook
+     */
+    this._installHook && this._installHook()
   }
 
   /**
    *
    * @param {*} position
-   * 显示组件
    */
-  show(position) {
-    this._show = true
-    position && position instanceof DC.Position && this.setPosition(position)
-    this._wapper && (this._wapper.style.visibility = 'visible')
-    this._state = DC.WidgetState.SHOW
-  }
-
-  /**
-   * 隐藏组件
-   */
-  hide() {
-    this._show = false
-    this._wapper && (this._wapper.style.visibility = 'hidden')
-    this._state = DC.WidgetState.HIDDEN
+  setPosition(position) {
+    this._position = position
   }
 
   /**
@@ -82,6 +78,16 @@ class Widget {
       this._wapper.appendChild(content)
     }
   }
+
+  /**
+   *
+   */
+  hide() {
+    this._wapper &&
+      (this._wapper.style.cssText = `
+    visibility:hidden;
+    `)
+  }
 }
 
 export default Widget

src/core/widget/index.js

@@ -1,8 +0,0 @@
-/*
- * @Author: Caven
- * @Date: 2020-01-15 19:29:58
- * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 15:09:07
- */
-import './ContextMenu'
-import './Popup'

src/plugins/plot/DC.Plot.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 15:51:32
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 21:00:30
+ * @Last Modified time: 2020-02-01 13:56:39
  */
 import Cesium from '@/namespace'
 import DrawPoint from './draw/DrawPoint'
@@ -25,6 +25,7 @@ DC.Plot = class {
 
   _completeCallback(e) {
     this._drawWorker = undefined
+    this._viewer.tooltip.enable = false
     this._layer.entities.removeAll()
     if (this._callback) {
       this._callback.call(this, e)
@@ -67,6 +68,7 @@ DC.Plot = class {
   }
 
   draw(type, callback, style) {
+    this._viewer.tooltip.enable = true
     this._bindEvent(callback)
     this._createDrawWorker(type, style)
     this._drawWorker.start()

src/plugins/plot/draw/Draw.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 19:45:32
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 19:55:19
+ * @Last Modified time: 2020-02-01 14:08:37
  */
 import Cesium from '@/namespace'
 

src/plugins/plot/draw/DrawCircle.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 19:44:41
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 20:50:24
+ * @Last Modified time: 2020-02-01 13:42:40
  */
 import Cesium from '@/namespace'
 import Draw from './Draw'
@@ -35,7 +35,9 @@ class DrawClicle extends Draw {
   }
 
   _mouseMoveHandler(movement) {
+    this._viewer.tooltip.setContent('单击选择点位')
     let position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84)
+    this._viewer.tooltip.setPosition(position)
     if (position && this._center !== Cesium.Cartesian3.ZERO) {
       this._computeRadius(this._center, position)
     }

src/plugins/plot/draw/DrawPoint.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 16:25:29
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 19:53:27
+ * @Last Modified time: 2020-02-01 13:41:39
  */
 import Cesium from '@/namespace'
 import Draw from './Draw'
@@ -30,7 +30,9 @@ class DrawPoint extends Draw {
   }
 
   _mouseMoveHandler(movement) {
+    this._viewer.tooltip.setContent('单击选择点位')
     this._position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84)
+    this._viewer.tooltip.setPosition(this._position)
   }
 
   _prepareDelegate() {

src/plugins/plot/draw/DrawPolygon.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 18:59:31
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 20:40:40
+ * @Last Modified time: 2020-02-01 13:41:25
  */
 import Cesium from '@/namespace'
 import Draw from './Draw'
@@ -35,7 +35,9 @@ class DrawPolygon extends Draw {
   }
 
   _mouseMoveHandler(movement) {
+    this._viewer.tooltip.setContent('单击选择点位,双击结束')
     let position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84)
+    this._viewer.tooltip.setPosition(position)
     if (position && this._positions.length > 0) {
       this._tempPoints = [this._positions[this._positions.length - 1], position]
       this._hierarchy.positions = [...this._positions, position]

src/plugins/plot/draw/DrawPolyline.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 18:18:44
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 19:52:46
+ * @Last Modified time: 2020-02-01 13:43:09
  */
 import Cesium from '@/namespace'
 import Draw from './Draw'
@@ -32,8 +32,11 @@ class DrawPolyline extends Draw {
   }
 
   _mouseMoveHandler(movement) {
+    this._viewer.tooltip.setContent('单击选择点位,双击结束')
     let position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84)
+    this._viewer.tooltip.setPosition(position)
     if (position && this._positions.length > 0) {
+      this._viewer.tooltip.setPosition(position)
       this._tempPoints = [this._positions[this._positions.length - 1], position]
     }
   }

src/plugins/plot/draw/DrawRect.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 20:52:01
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-31 21:04:42
+ * @Last Modified time: 2020-02-01 13:44:32
  */
 import Cesium from '@/namespace'
 import Draw from './Draw'
@@ -35,8 +35,10 @@ class DrawRect extends Draw {
   }
 
   _mouseMoveHandler(movement) {
+    this._viewer.tooltip.setContent('单击选择点位')
     let position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84)
     if (position) {
+      this._viewer.tooltip.setPosition(position)
       this._coordinates = Cesium.Rectangle.fromCartesianArray([...this._positions, position], Cesium.Ellipsoid.WGS84)
     }
   }

src/themes/contextmenu.scss

@@ -0,0 +1,27 @@
+.dc-context-menu {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-width: 120px;
+  min-height: 10px;
+  color: #fff;
+  padding: 10px 10px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  visibility: hidden;
+  z-index: -1;
+  cursor: pointer;
+  .menu-list {
+    width: 100%;
+    color: #000;
+    .menu-item {
+      font-size: 14px;
+      list-style: none;
+      padding: 5px 0px 5px 10px;
+      border-top: 1px dashed #cecece;
+      &:hover {
+        color: rgb(42, 78, 236);
+      }
+    }
+  }
+}

src/themes/index.js

@@ -2,8 +2,9 @@
  * @Author: Caven
  * @Date: 2020-01-21 10:48:50
  * @Last Modified by: Caven
- * @Last Modified time: 2020-01-21 12:29:21
+ * @Last Modified time: 2020-02-01 14:13:18
  */
-
-import './index.scss'
 import 'cesium/Widgets/widgets.css'
+import './index.scss'
+import './tooltip.scss'
+import './contextmenu.scss'

src/themes/index.scss

@@ -6,7 +6,6 @@
 }
 
 .dc-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
+  overflow: hidden;
+  display: block;
 }

src/themes/tooltip.scss

@@ -0,0 +1,26 @@
+.dc-tool-tip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-width: 100px;
+  height: 30px;
+  line-height: 30px;
+  color: #fff;
+  padding: 0px 10px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: -1;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    left: -10px;
+    top: 5px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid rgba(0, 0, 0, 0.6);
+  }
+}