完善三维场景组件的功能

CHANGE.md

@@ -1,5 +1,12 @@
 # 更新
 
+# 1.12.3
+
+## 2020-11-28
+
+> 1. 移除 Cesium 默认地图 token 认证
+> 2. 完善三维场景组件功能
+
 # 1.12.2
 
 ## 2020-11-23
@@ -7,7 +14,7 @@
 > 1. 完善webpack打包
 > 2. 完善圆材质旋转动画
 > 3. 完善模型旋转动画
-> 4. 开放部分场景设置功能
+> 4. 开放场景部分设置功能
 
 # 1.12.1
 
@@ -73,7 +80,7 @@
 
 > 1. 添加位置转换函数
 > 2. 开放部分 Cesium.Viewer 属性
-> 3. 完善气泡窗口和DivIcon的内容设置问题
+> 3. 完善气泡窗口和DivIcon的内容设置功能
 > 4. 优化鹰眼功能
 
 ## 1.10.0

src/core/widget/Compass.js

@@ -32,16 +32,11 @@ class Compass extends Widget {
     this._state = State.INITIALIZED
   }
 
-  _bindEvent() {
-    this._viewer.on(SceneEventType.POST_RENDER, this._postRenderHandler, this)
-  }
-
-  _unbindEvent() {
-    this._viewer.off(SceneEventType.POST_RENDER, this._postRenderHandler, this)
-  }
-
+  /**
+   *
+   * @private
+   */
   _installHook() {
-    this._createCompassDom()
     this._wrapper.onmousedown = e => {
       this._handleMouseDown(e)
     }
@@ -50,6 +45,26 @@ class Compass extends Widget {
     }
   }
 
+  /**
+   *
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.on(SceneEventType.POST_RENDER, this._postRenderHandler, this)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _unbindEvent() {
+    this._viewer.off(SceneEventType.POST_RENDER, this._postRenderHandler, this)
+  }
+
+  /**
+   *
+   * @private
+   */
   _postRenderHandler() {
     let heading = this._viewer.camera.heading
     this._outRing &&
@@ -59,7 +74,11 @@ class Compass extends Widget {
       `)
   }
 
-  _createCompassDom() {
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
     DomUtil.create('div', 'out-ring-bg', this._wrapper)
     this._outRing = DomUtil.parseDom(Icon.compass_outer, true, 'out-ring')
     this._wrapper.appendChild(this._outRing)
@@ -72,6 +91,7 @@ class Compass extends Widget {
     )
     this._wrapper.appendChild(this._rotation_marker)
     this._rotation_marker.style.visibility = 'hidden'
+    this._ready = true
   }
 
   _handleMouseDown(e) {

src/core/widget/ContextMenu.js

@@ -14,7 +14,7 @@ class ContextMenu extends Widget {
     this._wrapper = DomUtil.create('div', 'dc-context-menu')
     this._ulEl = DomUtil.create('ul', 'menu-list', this._wrapper)
     this._config = {}
-    this._positionChangeable = true
+    this._positionChangeable = false
     this.type = Widget.getWidgetType('contextmenu')
     this._state = State.INITIALIZED
   }
@@ -25,21 +25,29 @@ class ContextMenu extends Widget {
     return this
   }
 
+  /**
+   *
+   * @private
+   */
   _bindEvent() {
     this._viewer.on(MouseEventType.RIGHT_CLICK, this._rightClickHandler, this)
     this._viewer.on(MouseEventType.CLICK, this._clickHandler, this)
   }
 
+  /**
+   *
+   * @private
+   */
   _unbindEvent() {
     this._viewer.off(MouseEventType.RIGHT_CLICK, this._rightClickHandler, this)
     this._viewer.off(MouseEventType.CLICK, this._clickHandler, this)
   }
 
-  _installHook() {
-    this._prepareDefaultMenu()
-  }
-
-  _prepareDefaultMenu() {
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
     let homeMenu = DomUtil.create('li', 'menu-item', this._ulEl)
     homeMenu.innerHTML = '飞到默认位置'
     let self = this
@@ -47,18 +55,34 @@ class ContextMenu extends Widget {
       self._viewer.delegate.camera.flyHome(0)
       self.hide()
     }
+    this._ready = true
   }
 
+  /**
+   *
+   * @param e
+   * @private
+   */
   _rightClickHandler(e) {
     if (e && e.windowPosition && this._enable) {
       this._updateWindowCoord(e.windowPosition)
     }
   }
 
+  /**
+   *
+   * @param e
+   * @private
+   */
   _clickHandler(e) {
     this.hide()
   }
 
+  /**
+   *
+   * @param windowCoord
+   * @private
+   */
   _updateWindowCoord(windowCoord) {
     this._wrapper.style.cssText = `
     visibility:visible;
@@ -69,6 +93,10 @@ class ContextMenu extends Widget {
     `
   }
 
+  /**
+   *
+   * @private
+   */
   _setCustomClass() {
     DomUtil.setClass(
       this._wrapper,

src/core/widget/HawkeyeMap.js

@@ -41,13 +41,17 @@ class HawkeyeMap extends Widget {
     return this._baseLayers
   }
 
-  _mountMap() {
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
     let map = new Cesium.Viewer(this._wrapper, {
       ...DEF_OPTS,
       sceneMode: Cesium.SceneMode.SCENE2D
     })
     map.imageryLayers.removeAll()
-    map.cesiumWidget._creditContainer.style.display = 'none'
+    map.cesiumWidget.creditContainer.style.display = 'none'
     map.cesiumWidget.screenSpaceEventHandler.removeInputAction(
       Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
     )
@@ -61,6 +65,8 @@ class HawkeyeMap extends Widget {
       maximumZoomDistance: 40489014.0
     })
     this._map = map
+
+    this._ready = true
   }
 
   _bindEvent() {
@@ -72,7 +78,6 @@ class HawkeyeMap extends Widget {
   }
 
   _installHook() {
-    this._mountMap()
     this._viewer.camera.percentageChanged = 0.01
   }
 

src/core/widget/LocationBar.js

@@ -14,22 +14,45 @@ class LocationBar extends Widget {
   constructor() {
     super()
     this._wrapper = DomUtil.create('div', 'dc-location-bar')
-    this._mouseEl = DomUtil.create('div', 'mouse-location', this._wrapper)
-    this._cameraEl = DomUtil.create('div', 'camera-location', this._wrapper)
+    this._mouseEl = undefined
+    this._cameraEl = undefined
     this.type = Widget.getWidgetType('location_bar')
     this._state = State.INITIALIZED
   }
 
+  /**
+   *
+   * @private
+   */
   _bindEvent() {
     this._viewer.on(MouseEventType.MOUSE_MOVE, this._moveHandler, this)
     this._viewer.on(SceneEventType.CAMERA_CHANGED, this._cameraHandler, this)
   }
 
+  /**
+   *
+   * @private
+   */
   _unbindEvent() {
     this._viewer.off(MouseEventType.MOUSE_MOVE, this._moveHandler, this)
     this._viewer.off(SceneEventType.CAMERA_CHANGED, this._cameraHandler, this)
   }
 
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
+    this._mouseEl = DomUtil.create('div', 'mouse-location', this._wrapper)
+    this._cameraEl = DomUtil.create('div', 'camera-location', this._wrapper)
+    this._ready = true
+  }
+
+  /**
+   *
+   * @param e
+   * @private
+   */
   _moveHandler(e) {
     let ellipsoid = Cesium.Ellipsoid.WGS84
     let cartographic = e.surfacePosition

src/core/widget/MapSplit.js

@@ -20,7 +20,11 @@ class MapSplit extends Widget {
     this._state = State.INITIALIZED
   }
 
-  _installHook() {
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
     let splitter = DomUtil.parseDom(Icon.splitter, true, 'splitter')
     this._wrapper.appendChild(splitter)
     let handler = new Cesium.ScreenSpaceEventHandler(splitter)
@@ -46,6 +50,7 @@ class MapSplit extends Widget {
     handler.setInputAction(() => {
       self._moveActive = false
     }, Cesium.ScreenSpaceEventType.PINCH_END)
+    this._ready = true
   }
 
   _moveHandler(movement) {

src/core/widget/MapSwitch.js

@@ -18,7 +18,8 @@ class MapSwitch extends Widget {
   }
 
   /**
-   * 当enable修改后执行的钩子，子类根据需求复写
+   * Override the superclass function
+   * @private
    */
   _enableHook() {
     !this._wrapper.parentNode &&
@@ -26,6 +27,10 @@ class MapSwitch extends Widget {
       this._viewer.dcContainer.appendChild(this._wrapper)
   }
 
+  /**
+   *
+   * @private
+   */
   _installHook() {
     this.enable = true
     let self = this

src/core/widget/Popup.js

@@ -22,6 +22,20 @@ class Popup extends Widget {
     config.customClass && this._setCustomClass()
   }
 
+  /**
+   * Override the superclass function
+   * @private
+   */
+  _enableHook() {
+    !this._wrapper.parentNode &&
+      this._viewer &&
+      this._viewer.dcContainer.appendChild(this._wrapper)
+  }
+
+  /**
+   *
+   * @private
+   */
   _installHook() {
     this.enable = true
   }

src/core/widget/Tooltip.js

@@ -11,6 +11,7 @@ class Tooltip extends Widget {
   constructor() {
     super()
     this._wrapper = DomUtil.create('div', 'dc-tool-tip')
+    this._ready = true
     this.type = Widget.getWidgetType('tooltip')
     this._state = State.INITIALIZED
   }

src/core/widget/Widget.js

@@ -15,6 +15,7 @@ class Widget {
     this._enable = false
     this._wrapper = undefined
     this._positionChangeable = false
+    this._ready = false
     this.type = undefined
   }
 
@@ -32,6 +33,12 @@ class Widget {
     return this._state
   }
 
+  /**
+   * mount content
+   * @private
+   */
+  _mountContent() {}
+
   /**
    * binds event
    * @private
@@ -54,6 +61,7 @@ class Widget {
       this._viewer.dcContainer.appendChild(this._wrapper)
     this._wrapper &&
       (this._wrapper.style.visibility = this._enable ? 'visible' : 'hidden')
+    !this._ready && this._mountContent()
     this._enable ? this._bindEvent() : this._unbindEvent()
   }