From 09b75d0912cce05274fee046af72f792f14670ef Mon Sep 17 00:00:00 2001
From: cavencj <cavencj@gmail.com>
Date: Thu, 9 Jan 2025 14:51:22 +0800
Subject: [PATCH] add the loading mask

---
 examples/info/three_scene.html             |  1 +
 examples/list.js                           |  4 ++
 examples/widget/compass.html               | 17 +++++-
 examples/widget/distance_legend.html       | 16 +++++-
 examples/widget/hawk_eye_map.html          | 18 +++++-
 examples/widget/loading_mask.html          | 64 ++++++++++++++++++++++
 examples/widget/zoom_controller.html       | 17 +++++-
 src/modules/event/types/MouseEvent.js      | 16 +++---
 src/modules/viewer/Viewer.js               |  2 +-
 src/modules/widget/index.js                |  4 +-
 src/modules/widget/types/Compass.js        | 20 ++++---
 src/modules/widget/types/DistanceLegend.js |  7 ++-
 src/modules/widget/types/HawkEyeMap.js     |  7 ++-
 src/modules/widget/types/LoadingMask.js    | 40 ++++++++++++++
 src/themes/index.scss                      |  8 ++-
 src/themes/loading-mask.scss               | 63 +++++++++++++++++++++
 src/themes/viewer.scss                     |  4 ++
 17 files changed, 276 insertions(+), 32 deletions(-)
 create mode 100644 examples/widget/loading_mask.html
 create mode 100644 src/themes/loading-mask.scss
 create mode 100644 src/themes/viewer.scss

diff --git a/examples/info/three_scene.html b/examples/info/three_scene.html
index 7c6a3cf..134ecd0 100644
--- a/examples/info/three_scene.html
+++ b/examples/info/three_scene.html
@@ -9,6 +9,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>three scene</title>
     <script src="../libs/dm.min.js"></script>
+    <link href="../libs/dm.min.css" rel="stylesheet" />
 
     <style>
       * {
diff --git a/examples/list.js b/examples/list.js
index f680b6f..0ab5ece 100644
--- a/examples/list.js
+++ b/examples/list.js
@@ -33,6 +33,10 @@ const EXAMPLE_LIST = [
         name: '鹰眼图',
         page: 'hawk_eye_map.html',
       },
+      {
+        name: '加载蒙层',
+        page: 'loading_mask.html',
+      },
       {
         name: '右击菜单',
         page: 'contextmenu.html',
diff --git a/examples/widget/compass.html b/examples/widget/compass.html
index 474c270..1749a5c 100644
--- a/examples/widget/compass.html
+++ b/examples/widget/compass.html
@@ -9,7 +9,10 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>compass</title>
   <script src="../libs/dm.min.js"></script>
-  <link href="../libs/dm.min.css" rel="stylesheet" />
+  <script src="../dat.gui.min.js"></script>
+  <link href="../libs/dm.min.css" type='text/css' rel="stylesheet" />
+  <link href='../index.css' type='text/css' rel='stylesheet'>
+
 
   <style>
       * {
@@ -42,7 +45,19 @@
     })
     viewer.addBaseLayer(baseLayer)
     viewer.compass.enabled = true
+    addGuiController()
   }
+
+  function addGuiController(){
+    let controls = {
+      enable :true,
+    }
+    let gui = new dat.GUI();
+    gui.add(controls,'enable',).onChange(value=>{
+      viewer.compass.enabled = value
+    })
+  }
+
   DM.ready().then(initViewer)
 </script>
 </body>
diff --git a/examples/widget/distance_legend.html b/examples/widget/distance_legend.html
index c2ce5f8..bde697e 100644
--- a/examples/widget/distance_legend.html
+++ b/examples/widget/distance_legend.html
@@ -9,7 +9,9 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>distance legend</title>
   <script src="../libs/dm.min.js"></script>
-  <link href="../libs/dm.min.css" rel="stylesheet" />
+  <script src="../dat.gui.min.js"></script>
+  <link href="../libs/dm.min.css" type='text/css' rel="stylesheet" />
+  <link href='../index.css' type='text/css' rel='stylesheet'>
 
   <style>
       * {
@@ -42,7 +44,19 @@
     })
     viewer.addBaseLayer(baseLayer)
     viewer.distanceLegend.enabled = true
+    addGuiController()
   }
+
+  function addGuiController(){
+    let controls = {
+      enable :true,
+    }
+    let gui = new dat.GUI();
+    gui.add(controls,'enable',).onChange(value=>{
+      viewer.distanceLegend.enabled = value
+    })
+  }
+
   DM.ready().then(initViewer)
 </script>
 </body>
diff --git a/examples/widget/hawk_eye_map.html b/examples/widget/hawk_eye_map.html
index faf0205..76ff2fe 100644
--- a/examples/widget/hawk_eye_map.html
+++ b/examples/widget/hawk_eye_map.html
@@ -7,9 +7,11 @@
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
   />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-  <title>hawkeye map</title>
+  <title>hawk eye map</title>
   <script src="../libs/dm.min.js"></script>
-  <link href="../libs/dm.min.css" rel="stylesheet" />
+  <script src="../dat.gui.min.js"></script>
+  <link href="../libs/dm.min.css" type='text/css' rel="stylesheet" />
+  <link href='../index.css' type='text/css' rel='stylesheet'>
 
   <style>
       * {
@@ -44,7 +46,19 @@
     viewer.hawkEyeMap.enabled = true
     let baseLayer_elec = DM.BaseLayerFactory.createBaseLayer(DM.BaseLayerType.AMAP)
     viewer.hawkEyeMap.addBaseLayer(baseLayer_elec)
+    addGuiController()
   }
+
+  function addGuiController(){
+    let controls = {
+      enable :true,
+    }
+    let gui = new dat.GUI();
+    gui.add(controls,'enable',).onChange(value=>{
+      viewer.hawkEyeMap.enabled = value
+    })
+  }
+
   DM.ready().then(initViewer)
 </script>
 </body>
diff --git a/examples/widget/loading_mask.html b/examples/widget/loading_mask.html
new file mode 100644
index 0000000..ffe2f04
--- /dev/null
+++ b/examples/widget/loading_mask.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+  />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>loading mask</title>
+  <script src="../libs/dm.min.js"></script>
+  <script src="../dat.gui.min.js"></script>
+  <link href="../libs/dm.min.css" type='text/css' rel="stylesheet" />
+  <link href='../index.css' type='text/css' rel='stylesheet'>
+
+
+  <style>
+      * {
+          margin: 0;
+          padding: 0;
+      }
+      html,
+      body {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+      }
+
+      .viewer-container {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+      }
+  </style>
+</head>
+<body>
+<div id="viewer-container" class="viewer-container"></div>
+
+<script>
+  let viewer = undefined
+  function initViewer(){
+    viewer = new DM.Viewer('viewer-container')
+    let baseLayer = DM.BaseLayerFactory.createBaseLayer(DM.BaseLayerType.STYLE,{
+      url: 'https://demotiles.maplibre.org/style.json',
+    })
+    viewer.addBaseLayer(baseLayer)
+    viewer.loadingMask.enabled = true
+    addGuiController()
+  }
+
+  function addGuiController(){
+    let controls = {
+      enable :true,
+    }
+    let gui = new dat.GUI();
+    gui.add(controls,'enable',).onChange(value=>{
+      viewer.loadingMask.enabled = value
+    })
+  }
+
+  DM.ready().then(initViewer)
+</script>
+</body>
+</html>
diff --git a/examples/widget/zoom_controller.html b/examples/widget/zoom_controller.html
index e0b0b41..b6a6b7e 100644
--- a/examples/widget/zoom_controller.html
+++ b/examples/widget/zoom_controller.html
@@ -9,7 +9,9 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>zoom controller</title>
   <script src="../libs/dm.min.js"></script>
-  <link href="../libs/dm.min.css" rel="stylesheet" />
+  <script src="../dat.gui.min.js"></script>
+  <link href="../libs/dm.min.css" type='text/css' rel="stylesheet" />
+  <link href='../index.css' type='text/css' rel='stylesheet'>
 
   <style>
       * {
@@ -43,7 +45,20 @@
     viewer.addBaseLayer(baseLayer)
     viewer.compass.enabled = true
     viewer.zoomController.enabled = true
+    addGuiController()
   }
+
+  function addGuiController(){
+    let controls = {
+      enable :true,
+    }
+    let gui = new dat.GUI();
+    gui.add(controls,'enable',).onChange(value=>{
+      viewer.compass.enabled = value
+      viewer.zoomController.enabled = value
+    })
+  }
+
   DM.ready().then(initViewer)
 </script>
 </body>
diff --git a/src/modules/event/types/MouseEvent.js b/src/modules/event/types/MouseEvent.js
index b31d317..a982588 100644
--- a/src/modules/event/types/MouseEvent.js
+++ b/src/modules/event/types/MouseEvent.js
@@ -5,16 +5,16 @@ class MouseEvent {
   constructor(viewer, options) {
     this._viewer = viewer
     this._options = options
+    this._clickListener = this._onClick.bind(this)
+    this._dblClickListener = this._onDblClick.bind(this)
+    this._wheelListener = this._onWheel.bind(this)
     if (this._viewer.sceneMode === SceneMode.MAP_SCENE) {
-      this._viewer.map.on('click', this._onClick.bind(this))
-      this._viewer.map.on('dblClick', this._onDblClick.bind(this))
-      this._viewer.map.on('wheel', this._onWheel.bind(this))
+      this._viewer.map.on('click', this._clickListener)
+      this._viewer.map.on('dblClick', this._dblClickListener)
+      this._viewer.map.on('wheel', this._wheelListener)
     } else {
-      this._viewer.canvas.addEventListener('click', this._onClick.bind(this))
-      this._viewer.canvas.addEventListener(
-        'dblClick',
-        this._onDblClick.bind(this)
-      )
+      this._viewer.canvas.addEventListener('click', this._clickListener)
+      this._viewer.canvas.addEventListener('dblClick', this._dblClickListener)
     }
   }
 
diff --git a/src/modules/viewer/Viewer.js b/src/modules/viewer/Viewer.js
index 71772c1..79a4b55 100644
--- a/src/modules/viewer/Viewer.js
+++ b/src/modules/viewer/Viewer.js
@@ -74,7 +74,7 @@ class Viewer {
     }
     this._canvas.className = 'viewer-canvas'
 
-    new MouseEvent(this)
+    // new MouseEvent(this)
 
     this._widgetContainer = DomUtil.create(
       'div',
diff --git a/src/modules/widget/index.js b/src/modules/widget/index.js
index bc2a134..b42085a 100644
--- a/src/modules/widget/index.js
+++ b/src/modules/widget/index.js
@@ -4,7 +4,8 @@
 import Compass from './types/Compass'
 import ZoomController from './types/ZoomController'
 import DistanceLegend from './types/DistanceLegend'
-import HawkEyeMap from './types/HawkEyeMap.js'
+import HawkEyeMap from './types/HawkEyeMap'
+import LoadingMask from './types/LoadingMask'
 
 export function createWidgets() {
   return {
@@ -12,5 +13,6 @@ export function createWidgets() {
     zoomController: new ZoomController(),
     distanceLegend: new DistanceLegend(),
     hawkEyeMap: new HawkEyeMap(),
+    loadingMask: new LoadingMask(),
   }
 }
diff --git a/src/modules/widget/types/Compass.js b/src/modules/widget/types/Compass.js
index 7b3ab61..360249c 100644
--- a/src/modules/widget/types/Compass.js
+++ b/src/modules/widget/types/Compass.js
@@ -17,6 +17,8 @@ class Compass extends Widget {
     super()
     this._wrapper = DomUtil.create('div', 'widget compass')
     this._inner = undefined
+    this._pitchListener = this._onPitch.bind(this)
+    this._rotateListener = this._onRotate.bind(this)
   }
 
   _mountContent() {
@@ -127,25 +129,27 @@ class Compass extends Widget {
   }
 
   _onRotate() {
-    let pitch = this._viewer.map.getPitch()
-    let bearing = this._viewer.map.getBearing()
+    const pitch = this._viewer.map.getPitch()
+    const bearing = this._viewer.map.getBearing()
     this._inner.style.cssText = `transform: rotateX(${-pitch}deg) rotateZ(${-bearing}deg);`
   }
 
   _onPitch() {
-    let pitch = this._viewer.map.getPitch()
-    let bearing = this._viewer.map.getBearing()
+    const pitch = this._viewer.map.getPitch()
+    const bearing = this._viewer.map.getBearing()
     this._inner.style.cssText = `transform: rotateX(${-pitch}deg) rotateZ(${-bearing}deg);`
   }
 
   _bindEvent() {
-    this._viewer.map.on('rotate', this._onRotate.bind(this))
-    this._viewer.map.on('pitch', this._onPitch.bind(this))
+    this._viewer.map.on('pitch', this._pitchListener)
+    this._viewer.map.on('rotate', this._rotateListener)
+    this._onPitch()
+    this._onRotate()
   }
 
   _unbindEvent() {
-    this._viewer.map.off('rotate', this._onRotate.bind(this))
-    this._viewer.map.off('pitch', this._onPitch.bind(this))
+    this._viewer.map.off('pitch', this._pitchListener)
+    this._viewer.map.off('rotate', this._rotateListener)
   }
 }
 
diff --git a/src/modules/widget/types/DistanceLegend.js b/src/modules/widget/types/DistanceLegend.js
index 3fbe2ff..898e552 100644
--- a/src/modules/widget/types/DistanceLegend.js
+++ b/src/modules/widget/types/DistanceLegend.js
@@ -9,10 +9,10 @@ class DistanceLegend extends Widget {
   constructor() {
     super()
     this._wrapper = DomUtil.create('div', 'widget distance-legend')
+    this._zoomListener = this._onZoom.bind(this)
   }
 
   _mountContent() {
-    this._onZoom()
     this._ready = true
   }
 
@@ -71,11 +71,12 @@ class DistanceLegend extends Widget {
   }
 
   _bindEvent() {
-    this._viewer.map.on('zoom', this._onZoom.bind(this))
+    this._viewer.map.on('zoom', this._zoomListener)
+    this._onZoom()
   }
 
   _unbindEvent() {
-    this._viewer.map.off('zoom', this._onZoom.bind(this))
+    this._viewer.map.off('zoom', this._zoomListener)
   }
 }
 
diff --git a/src/modules/widget/types/HawkEyeMap.js b/src/modules/widget/types/HawkEyeMap.js
index 0e303b1..5ecfbfc 100644
--- a/src/modules/widget/types/HawkEyeMap.js
+++ b/src/modules/widget/types/HawkEyeMap.js
@@ -21,6 +21,7 @@ class HawkEyeMap extends Widget {
     this._map = undefined
     this._promise = undefined
     this._baseLayerCollection = new BaseLayerCollection()
+    this._moveListener = this._onMove.bind(this)
   }
 
   _mountContent() {
@@ -63,17 +64,17 @@ class HawkEyeMap extends Widget {
 
   _bindEvent() {
     this._map.resize()
-    this._viewer.map.on('move', this._onMove.bind(this))
+    this._viewer.map.on('move', this._moveListener)
   }
 
   _unbindEvent() {
-    this._viewer.map.off('move', this._onMove.bind(this))
+    this._viewer.map.off('move', this._moveListener)
   }
 
   /**
    *
    * @param baseLayer
-   * @returns {HawkeyeMap}
+   * @returns {HawkEyeMap}
    */
   addBaseLayer(baseLayer) {
     if (!this._map || !this._enabled || !this._promise) {
diff --git a/src/modules/widget/types/LoadingMask.js b/src/modules/widget/types/LoadingMask.js
index e69de29..4514daa 100644
--- a/src/modules/widget/types/LoadingMask.js
+++ b/src/modules/widget/types/LoadingMask.js
@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven Chen
+ */
+
+import { DomUtil } from '../../utils'
+import Widget from '../Widget'
+
+class LoadingMask extends Widget {
+  constructor() {
+    super()
+    this._wrapper = DomUtil.create('div', 'widget loading-mask')
+  }
+
+  _mountContent() {
+    let el = DomUtil.parseDom(
+      `
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    `,
+      true,
+      'loading'
+    )
+    this._wrapper.appendChild(el)
+    this._ready = true
+  }
+
+  _installHook() {
+    const self = this
+    Object.defineProperty(this._viewer, 'loadingMask', {
+      get() {
+        return self
+      },
+    })
+  }
+}
+
+export default LoadingMask
diff --git a/src/themes/index.scss b/src/themes/index.scss
index b96cf15..fe71f26 100644
--- a/src/themes/index.scss
+++ b/src/themes/index.scss
@@ -1,4 +1,6 @@
-@use './compass';
-@use './distance-legend';
+@use 'viewer';
+@use 'compass';
+@use 'distance-legend';
 @use 'hawk-eye-map';
-@use './zoom-controller';
\ No newline at end of file
+@use 'zoom-controller';
+@use 'loading-mask';
\ No newline at end of file
diff --git a/src/themes/loading-mask.scss b/src/themes/loading-mask.scss
new file mode 100644
index 0000000..d4d95ae
--- /dev/null
+++ b/src/themes/loading-mask.scss
@@ -0,0 +1,63 @@
+.widget.loading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,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: 0;
+  }
+
+  @-webkit-keyframes load {
+    0% {
+      opacity: 1;
+      transform: scale(1.3);
+    }
+
+    100% {
+      opacity: 0.2;
+      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;
+  }
+}
diff --git a/src/themes/viewer.scss b/src/themes/viewer.scss
new file mode 100644
index 0000000..d7b658b
--- /dev/null
+++ b/src/themes/viewer.scss
@@ -0,0 +1,4 @@
+
+.canvas-container {
+   cursor: pointer;
+}
\ No newline at end of file