1.完善控件事件的初始化功能,2.添加位置信息控件

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-06-28 10:12:52
+ * @Last Modified time: 2020-07-24 11:02:15
  */
 
 import { MouseEventType } from './EventType'

src/core/widget/Attribution.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-02-11 21:08:01
  * @Last Modified by: Caven
- * @Last Modified time: 2020-05-11 23:33:59
+ * @Last Modified time: 2020-07-24 14:08:07
  */
 
 import { DomUtil } from '../utils'
@@ -23,7 +23,6 @@ class Attribution extends Widget {
       padding: 2px 5px;
       border-radius: 2px;
       user-select: none;
-      box-shadow: 2px 2px 3px #2b2b2b;
     `
     this._config = undefined
     this.type = Widget.getWidgetType('attribution')
@@ -40,7 +39,7 @@ class Attribution extends Widget {
     a.onclick = () => {
       window.open('http://www.dvgis.cn')
     }
-    a.style.cssText = `color:#0078A8;`
+    a.style.cssText = `color:#0078A8;font-size:12px`
     this.enable = true
   }
 }

src/core/widget/Compass.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-03-19 13:11:12
  * @Last Modified by: Caven
- * @Last Modified time: 2020-06-06 14:52:15
+ * @Last Modified time: 2020-07-24 12:40:52
  */
 
 import { DomUtil } from '../utils'
@@ -33,14 +33,7 @@ class Compass extends Widget {
     this._state = State.INITIALIZED
   }
 
-  _installHook() {
-    this._createCompassDom()
-    this._wrapper.onmousedown = e => {
-      this._handleMouseDown(e)
-    }
-    this._wrapper.ondblclick = e => {
-      this._handleDoubleClick(e)
-    }
+  _bindEvent() {
     this._removeSubscription = this._viewer.scene.postRender.addEventListener(
       () => {
         let heading = this._viewer.camera.heading
@@ -53,6 +46,20 @@ class Compass extends Widget {
     )
   }
 
+  _unbindEvent() {
+    this._removeSubscription()
+  }
+
+  _installHook() {
+    this._createCompassDom()
+    this._wrapper.onmousedown = e => {
+      this._handleMouseDown(e)
+    }
+    this._wrapper.ondblclick = e => {
+      this._handleDoubleClick(e)
+    }
+  }
+
   _createCompassDom() {
     DomUtil.create('div', 'out-ring-bg', this._wrapper)
     this._outRing = DomUtil.parseDom(Icon.compass_outer, true, 'out-ring')

src/core/widget/ContextMenu.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2019-12-31 17:32:01
  * @Last Modified by: Caven
- * @Last Modified time: 2020-06-28 10:13:51
+ * @Last Modified time: 2020-07-24 12:40:29
  */
 
 import { DomUtil } from '../utils'
@@ -10,8 +10,6 @@ import { MouseEventType } from '../event'
 import State from '../state/State'
 import Widget from './Widget'
 
-const { Cesium } = DC.Namespace
-
 class ContextMenu extends Widget {
   constructor() {
     super()
@@ -29,11 +27,17 @@ class ContextMenu extends Widget {
     return this
   }
 
+  _bindEvent() {
+    this._viewer.on(MouseEventType.RIGHT_CLICK, this._rightclickHandler, this)
+    this._viewer.on(MouseEventType.CLICK, this._clickHandler, this)
+  }
+
+  _unbindEvent() {
+    this._viewer.off(MouseEventType.RIGHT_CLICK, this._rightclickHandler, this)
+    this._viewer.off(MouseEventType.CLICK, this._clickHandler, this)
+  }
+
   _installHook() {
-    if (this._viewer) {
-      this._viewer.on(MouseEventType.RIGHT_CLICK, this._rightclickHandler, this)
-      this._viewer.on(MouseEventType.CLICK, this._clickHandler, this)
-    }
     this._prepareDefaultMenu()
   }
 

src/core/widget/HawkeyeMap.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-03-15 17:47:42
  * @Last Modified by: Caven
- * @Last Modified time: 2020-05-11 22:09:11
+ * @Last Modified time: 2020-07-24 12:42:20
  */
 
 import { DomUtil, Util } from '../utils'
@@ -57,9 +57,16 @@ class HawkeyeMap extends Widget {
     this._delegate.imageryLayers.removeAll()
   }
 
+  _bindEvent() {
+    this._viewer.camera.changed.addEventListener(this._sync2DView, this)
+  }
+
+  _unbindEvent() {
+    this._viewer.camera.changed.removeEventListener(this._sync2DView, this)
+  }
+
   _installHook() {
     this._prepareDelegate()
-    this._viewer.camera.changed.addEventListener(this._sync2DView, this)
     this._viewer.camera.percentageChanged = 0.01
   }
 

src/core/widget/LocationBar.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-03-04 18:02:32
  * @Last Modified by: Caven
- * @Last Modified time: 2020-05-11 23:34:03
+ * @Last Modified time: 2020-07-24 15:03:50
  */
 
 import { MouseEventType, SceneEventType } from '../event'
@@ -10,6 +10,8 @@ import { DomUtil } from '../utils'
 import State from '../state/State'
 import Widget from './Widget'
 
+const { Cesium } = DC.Namespace
+
 class LocationBar extends Widget {
   constructor() {
     super()
@@ -20,19 +22,38 @@ class LocationBar extends Widget {
     this._state = State.INITIALIZED
   }
 
-  _installHook() {
+  _bindEvent() {
     this._viewer.on(MouseEventType.MOUSE_MOVE, this._moveHandler, this)
     this._viewer.on(SceneEventType.CAMERA_CHANGED, this._cameraHandler, this)
   }
 
-  _moveHandler(movement) {
-    if (this._enable) {
-    }
+  _unbindEvent() {
+    this._viewer.off(MouseEventType.MOUSE_MOVE, this._moveHandler, this)
+    this._viewer.off(SceneEventType.CAMERA_CHANGED, this._cameraHandler, this)
+  }
+
+  _moveHandler(e) {
+    let ellipsoid = Cesium.Ellipsoid.WGS84
+    let cartographic = e.surfacePosition
+      ? ellipsoid.cartesianToCartographic(e.surfacePosition)
+      : undefined
+    let lng = +Cesium.Math.toDegrees(cartographic?.longitude || 0)
+    let lat = +Cesium.Math.toDegrees(cartographic?.latitude || 0)
+    let alt = cartographic
+      ? +this._viewer.scene.globe.getHeight(cartographic)
+      : 0
+    this._mouseEl.innerHTML = `
+      <span>经度：${lng.toFixed(8)}</span>
+      <span>纬度：${lat.toFixed(8)}</span>
+      <span>海拔：${alt.toFixed(2)} 米</span>`
   }
 
   _cameraHandler(e) {
-    if (this._enable) {
-    }
+    let cameraPosition = this._viewer.cameraPosition
+    this._cameraEl.innerHTML = `
+      <span>视角：${(+cameraPosition.pitch).toFixed(2)}</span>
+      <span>视高：${(+cameraPosition.alt).toFixed(2)} 米</span>
+    `
   }
 }
 

src/core/widget/MapSplit.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-03-04 15:38:40
  * @Last Modified by: Caven
- * @Last Modified time: 2020-05-11 23:34:20
+ * @Last Modified time: 2020-07-24 12:43:25
  */
 
 import { DomUtil } from '../utils'

src/core/widget/MapSwitch.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-02-11 18:34:46
  * @Last Modified by: Caven
- * @Last Modified time: 2020-06-28 10:23:45
+ * @Last Modified time: 2020-07-24 12:45:08
  */
 
 import { DomUtil } from '../utils'
@@ -23,9 +23,9 @@ class MapSwitch extends Widget {
    * 当enable修改后执行的钩子，子类根据需求复写
    */
   _enableHook() {
-    if (!this._wrapper.parentNode && this._viewer) {
-      this._wrapper && this._viewer.dcContainer.appendChild(this._wrapper)
-    }
+    !this._wrapper.parentNode &&
+      this._viewer &&
+      this._viewer.dcContainer.appendChild(this._wrapper)
   }
 
   _installHook() {
@@ -34,7 +34,7 @@ class MapSwitch extends Widget {
     this._wrapper.onmouseover = () => {
       let width = 80
       if (self._cache.length > 0) {
-        width = self._cache.length * 85.7
+        width = self._cache.length * 85
       }
       this._wrapper.style.width = `${width}px`
     }

src/core/widget/Popup.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-15 19:16:45
  * @Last Modified by: Caven
- * @Last Modified time: 2020-05-11 23:33:26
+ * @Last Modified time: 2020-07-24 10:14:43
  */
 
 import { DomUtil } from '../utils'
@@ -61,6 +61,16 @@ class Popup extends Widget {
     `)
     return this
   }
+
+  /**
+   *
+   * @param {*} position
+   * @param {*} content
+   */
+  showAt(position, content) {
+    this.setPosition(position).setContent(content)
+    return this
+  }
 }
 
 Widget.registerType('popup')

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-05-11 22:12:02
+ * @Last Modified time: 2020-07-24 12:37:39
  */
 
 import State from '../state/State'
@@ -17,7 +17,6 @@ class Widget {
     this._enable = false
     this._wrapper = undefined
     this._positionChangeable = false
-
     this.type = undefined
   }
 
@@ -35,15 +34,26 @@ class Widget {
     return this._state
   }
 
+  /**
+   * bind Event
+   */
+  _bindEvent() {}
+
+  /**
+   * unbind Event
+   */
+  _unbindEvent() {}
+
   /**
    * When enable modifies the hook executed, the subclass copies it as required
    */
   _enableHook() {
-    if (!this._wrapper.parentNode && this._viewer) {
-      this._wrapper && this._viewer.dcContainer.appendChild(this._wrapper)
-    }
+    !this._wrapper.parentNode &&
+      this._viewer &&
+      this._viewer.dcContainer.appendChild(this._wrapper)
     this._wrapper &&
       (this._wrapper.style.visibility = this._enable ? 'visible' : 'hidden')
+    this._enable ? this._bindEvent() : this._unbindEvent()
   }
 
   /**

src/themes/index.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-21 10:48:50
  * @Last Modified by: Caven
- * @Last Modified time: 2020-03-19 14:02:16
+ * @Last Modified time: 2020-07-24 14:06:59
  */
 import 'cesium/Widgets/widgets.css'
 import './index.scss'
@@ -13,3 +13,4 @@ import './mapswitch.scss'
 import './mapsplit.scss'
 import './hawkeyemap.scss'
 import './compass.scss'
+import './locationbar.scss'

src/themes/locationbar.scss

@@ -0,0 +1,15 @@
+.dc-location-bar {
+  position: absolute;
+  left: 180px;
+  bottom: 2px;
+  font-size: 14px;
+  color: rgb(255, 255, 255);
+  background: rgba(0, 0, 0, 0.6);
+  padding: 2px 5px;
+  border-radius: 2px;
+  user-select: none;
+  display: flex;
+  span {
+    margin: 0 8px;
+  }
+}

src/themes/mapswitch.scss

@@ -36,5 +36,8 @@
         background-color: rgba(8, 101, 186, 0.8);
       }
     }
+    &:last-child {
+      margin-right: 0px !important;
+    }
   }
 }