添加加载蒙层组件

src/core/widget/LoadingMask.js

@@ -2,20 +2,17 @@
  * @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 {
+class LoadingMask extends Widget {
   constructor() {
     super()
-    this._wrapper = DomUtil.create(
-      'div',
-      'loading-container'
-    )
-    this.type = Widget.getWidgetType('loadlingMask')
+    this._wrapper = DomUtil.create('div', 'dc-loading-container')
+    this.type = Widget.getWidgetType('loading_mask')
     this._state = State.INITIALIZED
-    this.addLoading()
   }
 
   /**
@@ -23,51 +20,33 @@ class LoadlingModule extends Widget {
    * @private
    */
   _installHook() {
-    Object.defineProperty(this._viewer, 'loadlingMask', {
+    Object.defineProperty(this._viewer, 'loadingMask', {
       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">
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
+    let el = DomUtil.parseDom(
+      `
         <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'
+    `,
+      true,
+      'loading'
+    )
+    this._wrapper.appendChild(el)
+    this._ready = true
   }
 }
 
-Widget.registerType('loadlingMask')
+Widget.registerType('loading_mask')
 
-export default LoadlingModule
+export default LoadingMask

src/core/widget/index.js

@@ -29,6 +29,6 @@ export default function createWidgets() {
     compass: new Compass(),
     distanceLegend: new DistanceLegend(),
     zoomController: new ZoomController(),
-    loadlingMask: new LoadingMask()
+    loadingMask: new LoadingMask()
   }
 }

src/themes/index.js

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

src/themes/loading.scss → src/themes/loading-mask.scss

@@ -1,4 +1,4 @@
-.loading-container {
+.dc-loading-container {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -8,8 +8,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  visibility: hidden;
-  background: rgba(181, 181, 181, 0.6);
+  background: rgba(0,0,0,0.6);
 
   .loading {
     width: 150px;
@@ -28,7 +27,7 @@
   }
 
   .loading span:last-child {
-    margin-right: 0px;
+    margin-right: 0;
   }
 
   @-webkit-keyframes load {