添加鹰眼组件

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-03-12 17:32:46
+ * @Last Modified time: 2020-03-15 18:11:45
  */
 
 import Cesium from '@/namespace'
@@ -15,7 +15,8 @@ import {
   MapSplit,
   MapSwitch,
   Popup,
-  Tooltip
+  Tooltip,
+  HawkeyeMap
 } from '@/core/widget'
 
 const DEF_OPTS = {
@@ -71,7 +72,8 @@ DC.Viewer = class {
       tooltip: new Tooltip(),
       mapSwitch: new MapSwitch(),
       mapSplit: new MapSplit(),
-      locationBar: new LocationBar()
+      locationBar: new LocationBar(),
+      hawkeyeMap: new HawkeyeMap()
     }
     for (let key in this._comps) {
       this.use(this._comps[key])
@@ -131,6 +133,10 @@ DC.Viewer = class {
     return this._comps.locationBar
   }
 
+  get hawkeyeMap() {
+    return this._comps.hawkeyeMap
+  }
+
   get cameraPosition() {
     let position = DC.T.transformCartesianToWSG84(this.camera.positionWC)
     if (position) {

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-03-13 10:32:04
+ * @Last Modified time: 2020-03-15 18:47:07
  */
 import Widget from './Widget'
 
@@ -20,6 +20,7 @@ class Attribution extends Widget {
       padding: 2px 5px;
       border-radius: 2px;
       user-select: none;
+      box-shadow: 2px 2px 3px #2b2b2b;
     `
     this._config = undefined
     this.type = DC.WidgetType.ATTRIBUTION

src/core/widget/HawkeyeMap.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-03-15 17:47:42
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-03-15 18:49:00
+ */
+import Cesium from '@/namespace'
+import Widget from './Widget'
+
+const DEF_OPTS = {
+  animation: false,
+  baseLayerPicker: false,
+  fullscreenButton: false,
+  geocoder: false,
+  homeButton: false,
+  infoBox: false,
+  sceneModePicker: false,
+  selectionIndicator: false,
+  timeline: false,
+  navigationHelpButton: false,
+  navigationInstructionsInitiallyVisible: false,
+  creditContainer: undefined
+}
+
+class HawkeyeMap extends Widget {
+  constructor() {
+    super()
+    this._wapper = DC.DomUtil.create('div', 'dc-hawkeye-map')
+    this._wapper.setAttribute('id', DC.Util.uuid())
+    this._baseLayer = undefined
+    this._delegate = undefined
+    this.type = DC.WidgetType.HAWkEYEMAP
+  }
+
+  _prepareDelegate() {
+    this._delegate = new Cesium.Viewer(this._wapper, {
+      ...DEF_OPTS,
+      sceneMode: Cesium.SceneMode.SCENE2D
+    })
+    this._delegate.scene.screenSpaceCameraController.enableRotate = false
+    this._delegate.scene.screenSpaceCameraController.enableTranslate = false
+    this._delegate.scene.screenSpaceCameraController.enableZoom = false
+    this._delegate.scene.screenSpaceCameraController.enableTilt = false
+    this._delegate.scene.screenSpaceCameraController.enableLook = false
+    this._delegate.cesiumWidget._creditContainer.style.display = 'none'
+    this._delegate.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+    )
+    this._delegate.scene.screenSpaceCameraController.maximumZoomDistance = 40489014.0
+    this._delegate.scene.backgroundColor = Cesium.Color.TRANSPARENT
+    this._delegate.scene.postProcessStages.fxaa.enabled = true
+    this._delegate.imageryLayers.removeAll()
+  }
+
+  _installHook() {
+    this._prepareDelegate()
+    this._viewer.camera.changed.addEventListener(this._sync2DView, this)
+    this._viewer.camera.percentageChanged = 0.01
+  }
+
+  _sync2DView() {
+    let viewCenter = new Cesium.Cartesian2(
+      Math.floor(this._viewer.canvas.clientWidth / 2),
+      Math.floor(this._viewer.canvas.clientHeight / 2)
+    )
+    let worldPosition = this._viewer.scene.camera.pickEllipsoid(viewCenter)
+    if (!worldPosition) {
+      return false
+    }
+    let distance = Cesium.Cartesian3.distance(
+      worldPosition,
+      this._viewer.scene.camera.positionWC
+    )
+    this._delegate.scene.camera.lookAt(
+      worldPosition,
+      new Cesium.Cartesian3(0.0, 0.0, distance)
+    )
+  }
+
+  addBaseLayer(baseLayer) {
+    if (!this._delegate || !this._enable) {
+      return this
+    }
+    if (baseLayer) {
+      if (this._baseLayer) {
+        this._delegate.imageryLayers.remove(this._baseLayer)
+      }
+      this._baseLayer = this._delegate.imageryLayers.addImageryProvider(
+        baseLayer
+      )
+    }
+    return this
+  }
+}
+
+DC.WidgetType.HAWkEYEMAP = 'hawkeyeMap'
+
+export default HawkeyeMap

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-03-14 14:59:40
+ * @Last Modified time: 2020-03-15 17:52:35
  */
 import Cesium from '@/namespace'
 import Widget from './Widget'
@@ -67,7 +67,6 @@ class MapSplit extends Widget {
       this._baseLayer.splitDirection = splitDirection || 0
       this._viewer.scene.imagerySplitPosition =
         this._wapper.offsetLeft / this._wapper.parentElement.offsetWidth
-      this._wapper.style.visibility = 'visible'
     }
     return this
   }

src/core/widget/index.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-03-05 21:53:35
  * @Last Modified by: Caven
- * @Last Modified time: 2020-03-05 22:50:42
+ * @Last Modified time: 2020-03-15 18:10:37
  */
 
 import Attribution from './Attribution'
@@ -12,6 +12,7 @@ import MapSplit from './MapSplit'
 import MapSwitch from './MapSwitch'
 import Popup from './Popup'
 import Tooltip from './Tooltip'
+import HawkeyeMap from './HawkeyeMap'
 
 export {
   Attribution,
@@ -20,5 +21,6 @@ export {
   MapSplit,
   MapSwitch,
   Popup,
-  Tooltip
+  Tooltip,
+  HawkeyeMap
 }

src/themes/hawkeyemap.scss

@@ -0,0 +1,12 @@
+.dc-hawkeye-map {
+  position: absolute;
+  left: 25px;
+  bottom: 30px;
+  user-select: none;
+  border-radius: 50%;
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+  border: 2px solid orange;
+  box-shadow: 2px 2px 3px #2b2b2b;
+}

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-05 15:03:12
+ * @Last Modified time: 2020-03-15 18:49:08
  */
 import 'cesium/Widgets/widgets.css'
 import './index.scss'
@@ -11,3 +11,4 @@ import './tooltip.scss'
 import './contextmenu.scss'
 import './mapswitch.scss'
 import './mapsplit.scss'
+import './hawkeyemap.scss'