add the loading mask

dvgis · Jan 9, 2025 · 09b75d0 · 09b75d0
1 parent feeb650
commit 09b75d0
Show file tree

Hide file tree

Showing 17 changed files with 276 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -4,13 +4,15 @@
 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 {
     compass: new Compass(),
     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
@@ -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
@@ -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
@@ -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) {