feat:add loadingmask to Widget

src/core/widget/LoadingMask.js

@@ -0,0 +1,73 @@
+/**
+ * @Author: Liquid
+ * @Date: 2021-03-02 13:38:48
+ */
+import { DomUtil } from '../utils'
+import State from '../state/State'
+import Widget from './Widget'
+
+class LoadlingModule extends Widget {
+  constructor() {
+    super()
+    this._wrapper = DomUtil.create(
+      'div',
+      'loading-container'
+    )
+    this.type = Widget.getWidgetType('loadlingMask')
+    this._state = State.INITIALIZED
+    this.addLoading()
+  }
+
+  /**
+   *
+   * @private
+   */
+  _installHook() {
+    Object.defineProperty(this._viewer, 'loadlingMask', {
+      value: this,
+      writable: false
+    })
+  }
+
+  set enable(enable) {
+    if (this._enable === enable) {
+      return this
+    }
+    enable ? this.show() : this.hide()
+    this._enable = enable
+    this._state = this._enable ? State.ENABLED : State.DISABLED
+    this._enableHook && this._enableHook()
+    return this
+  }
+
+  _enableHook() {
+    !this._wrapper.parentNode &&
+      this._viewer &&
+      this._viewer.dcContainer.appendChild(this._wrapper)
+  }
+
+  addLoading() {
+    let htmlStr = `
+      <div class="loading">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    `;
+    this._wrapper.innerHTML = htmlStr
+  }
+
+  show() {
+    this._wrapper.style.visibility = 'visible'
+  }
+
+  hide() {
+    this._wrapper.style.visibility = 'hidden'
+  }
+}
+
+Widget.registerType('loadlingMask')
+
+export default LoadlingModule

src/core/widget/index.js

@@ -14,6 +14,7 @@ import HawkeyeMap from './HawkeyeMap'
 import Compass from './Compass'
 import DistanceLegend from './DistanceLegend'
 import ZoomController from './ZoomController'
+import LoadingMask from './LoadingMask'
 
 export default function createWidgets() {
   return {
@@ -27,6 +28,7 @@ export default function createWidgets() {
     hawkeyeMap: new HawkeyeMap(),
     compass: new Compass(),
     distanceLegend: new DistanceLegend(),
-    zoomController: new ZoomController()
+    zoomController: new ZoomController(),
+    loadlingMask: new LoadingMask()
   }
 }

src/themes/index.js

@@ -15,3 +15,4 @@ import './compass.scss'
 import './locationbar.scss'
 import './distancelegend.scss'
 import './zoom-controller.scss'
+import './loading.scss'

src/themes/loading.scss

@@ -0,0 +1,65 @@
+.loading-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  visibility: hidden;
+  background: rgba(181, 181, 181, 0.6);
+
+  .loading {
+    width: 150px;
+    height: 15px;
+    margin: 0 auto;
+  }
+
+  .loading span {
+    display: inline-block;
+    width: 15px;
+    height: 100%;
+    margin-right: 5px;
+    border-radius: 50%;
+    background: #b8e9ff;
+    -webkit-animation: load 1.04s ease infinite;
+  }
+
+  .loading span:last-child {
+    margin-right: 0px;
+  }
+
+  @-webkit-keyframes load {
+    0% {
+      opacity: 1;
+      -webkit-transform: scale(1.3);
+    }
+
+    100% {
+      opacity: 0.2;
+      -webkit-transform: scale(0.3);
+    }
+  }
+
+  .loading span:nth-child(1) {
+    -webkit-animation-delay: 0.13s;
+  }
+
+  .loading span:nth-child(2) {
+    -webkit-animation-delay: 0.26s;
+  }
+
+  .loading span:nth-child(3) {
+    -webkit-animation-delay: 0.39s;
+  }
+
+  .loading span:nth-child(4) {
+    -webkit-animation-delay: 0.52s;
+  }
+
+  .loading span:nth-child(5) {
+    -webkit-animation-delay: 0.65s;
+  }
+}