calculating the position of map container in real time fix #1383 (#1384)

deyihu · web-flow · commit 8b31490e9edf · 2021-07-05T15:05:59.000+08:00
* Calculate map in real time_ containerDOM position fix #1383 * map position ci test * _updateDomPosition * update map dom position ci * fix ci * update map checksize * fix lint
diff --git a/src/map/Map.js b/src/map/Map.js
@@ -22,6 +22,7 @@ import Coordinate from '../geo/Coordinate';
 import Layer from '../layer/Layer';
 import Renderable from '../renderer/Renderable';
 import SpatialReference from './spatial-reference/SpatialReference';
+import { computeDomPosition } from '../core/util/dom';
 
 const TEMP_COORD = new Coordinate(0, 0);
 /**
@@ -1340,6 +1341,8 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
         if (watched['width'] === oldWidth && watched['height'] === oldHeight) {
             return this;
         }
+        // refresh map's dom position
+        computeDomPosition(this._containerDOM);
         const center = this.getCenter();
 
         if (!this.options['fixCenterOnResize']) {
diff --git a/src/map/handler/Map.GeometryEvents.js b/src/map/handler/Map.GeometryEvents.js
@@ -113,39 +113,39 @@ const EVENTS =
      * @property {Event} domEvent                 - dom event
      */
     'touchend';
-    /**
-     * mouseenter event for geometry
-     * @event Geometry#mouseenter
-     * @type {Object}
-     * @property {String} type                    - mouseenter
-     * @property {Geometry} target       - the geometry fires mouseenter
-     * @property {Coordinate} coordinate - coordinate of the event
-     * @property {Point} containerPoint  - container point of the event
-     * @property {Point} viewPoint       - view point of the event
-     * @property {Event} domEvent                 - dom event
-     */
-    /**
-     * mouseover event for geometry
-     * @event Geometry#mouseover
-     * @type {Object}
-     * @property {String} type                    - mouseover
-     * @property {Geometry} target       - the geometry fires mouseover
-     * @property {Coordinate} coordinate - coordinate of the event
-     * @property {Point} containerPoint  - container point of the event
-     * @property {Point} viewPoint       - view point of the event
-     * @property {Event} domEvent                 - dom event
-     */
-    /**
-     * mouseout event for geometry
-     * @event Geometry#mouseout
-     * @type {Object}
-     * @property {String} type                    - mouseout
-     * @property {Geometry} target       - the geometry fires mouseout
-     * @property {Coordinate} coordinate - coordinate of the event
-     * @property {Point} containerPoint  - container point of the event
-     * @property {Point} viewPoint       - view point of the event
-     * @property {Event} domEvent                 - dom event
-     */
+/**
+ * mouseenter event for geometry
+ * @event Geometry#mouseenter
+ * @type {Object}
+ * @property {String} type                    - mouseenter
+ * @property {Geometry} target       - the geometry fires mouseenter
+ * @property {Coordinate} coordinate - coordinate of the event
+ * @property {Point} containerPoint  - container point of the event
+ * @property {Point} viewPoint       - view point of the event
+ * @property {Event} domEvent                 - dom event
+ */
+/**
+ * mouseover event for geometry
+ * @event Geometry#mouseover
+ * @type {Object}
+ * @property {String} type                    - mouseover
+ * @property {Geometry} target       - the geometry fires mouseover
+ * @property {Coordinate} coordinate - coordinate of the event
+ * @property {Point} containerPoint  - container point of the event
+ * @property {Point} viewPoint       - view point of the event
+ * @property {Event} domEvent                 - dom event
+ */
+/**
+ * mouseout event for geometry
+ * @event Geometry#mouseout
+ * @type {Object}
+ * @property {String} type                    - mouseout
+ * @property {Geometry} target       - the geometry fires mouseout
+ * @property {Coordinate} coordinate - coordinate of the event
+ * @property {Point} containerPoint  - container point of the event
+ * @property {Point} viewPoint       - view point of the event
+ * @property {Event} domEvent                 - dom event
+ */
 
 class MapGeometryEventsHandler extends Handler {
 
@@ -200,8 +200,7 @@ class MapGeometryEventsHandler extends Handler {
         if (!actual) {
             return;
         }
-        const containerPoint = getEventContainerPoint(actual, map._containerDOM),
-            coordinate = map.containerPointToCoordinate(containerPoint);
+        const containerPoint = getEventContainerPoint(actual, map._containerDOM);
         if (eventType === 'touchstart') {
             preventDefault(domEvent);
         }
@@ -229,7 +228,7 @@ class MapGeometryEventsHandler extends Handler {
             },
             'count': 1,
             'containerPoint': containerPoint,
-            'onlyVisible' : map.options['onlyVisibleGeometryEvents'],
+            'onlyVisible': map.options['onlyVisibleGeometryEvents'],
             'layers': layers
         };
         const callback = fireGeometryEvent.bind(this);
@@ -269,8 +268,8 @@ class MapGeometryEventsHandler extends Handler {
 
                 const oldTargets = this._prevOverGeos && this._prevOverGeos.geos;
                 this._prevOverGeos = {
-                    'geos' : geometries,
-                    'geomap' : geoMap
+                    'geos': geometries,
+                    'geomap': geoMap
                 };
                 if (oldTargets && oldTargets.length > 0) {
                     for (let i = oldTargets.length - 1; i >= 0; i--) {
@@ -311,7 +310,7 @@ class MapGeometryEventsHandler extends Handler {
 
 Map.mergeOptions({
     'geometryEvents': true,
-    'onlyVisibleGeometryEvents' : true
+    'onlyVisibleGeometryEvents': true
 });
 
 Map.addOnLoadHook('addHandler', 'geometryEvents', MapGeometryEventsHandler);
diff --git a/src/renderer/map/MapCanvasRenderer.js b/src/renderer/map/MapCanvasRenderer.js
@@ -39,6 +39,7 @@ class MapCanvasRenderer extends MapRenderer {
         if (!this.map) {
             return false;
         }
+        this._updateDomPosition(framestamp);
         delete this._isViewChanged;
         const map = this.map;
         map._fireEvent('framestart');
@@ -784,12 +785,22 @@ class MapCanvasRenderer extends MapRenderer {
         this.context = this.canvas.getContext('2d');
     }
 
+    _updateDomPosition(framestamp) {
+        if (this._checkPositionTime === undefined) {
+            this._checkPositionTime = framestamp;
+        }
+        if (framestamp - this._checkPositionTime >= 500) {
+            // refresh map's dom position
+            computeDomPosition(this.map._containerDOM);
+            this._checkPositionTime = framestamp;
+        }
+        return this;
+    }
+
     _checkSize() {
         if (!this.map) {
             return;
         }
-        // refresh map's dom position
-        computeDomPosition(this.map._containerDOM);
         this.map.checkSize();
     }
 
diff --git a/test/map/MapPositionSpec.js b/test/map/MapPositionSpec.js
@@ -0,0 +1,68 @@
+describe('Map.Position', function () {
+
+    var container;
+    var eventContainer;
+    var map;
+    var center = new maptalks.Coordinate(118.846825, 32.046534);
+    var point = new maptalks.Point(100, 475);
+    var expectPoint = new maptalks.Point(92, 467);
+    var offetY = 300;
+    var position = [8, 8, 1, 1];
+
+    beforeEach(function () {
+        document.body.style.cssText = 'height:2500px;';
+        container = document.createElement('div');
+        container.style.width = '400px';
+        container.style.height = '500px';
+        container.style.background = '#000';
+        document.body.appendChild(container);
+        var option = {
+            zoomAnimation: false,
+            zoom: 17,
+            center: center
+        };
+        map = new maptalks.Map(container, option);
+        eventContainer = map._panels.canvasContainer;
+        // eventContainer = map._containerDOM;
+    });
+
+    afterEach(function () {
+        delete map._env;
+        map.remove();
+        REMOVE_CONTAINER(container);
+        document.body.style.cssText = '';
+    });
+
+
+    it('page not scroll map position', function (done) {
+        map.on('mousedown click', function (e) {
+            expect(map._containerDOM.__position).to.be.eql(position);
+            expect(e.containerPoint).to.closeTo(expectPoint);
+        });
+        map._containerDOM.__position = position;
+        setTimeout(function () {
+            happen.mousedown(eventContainer, {
+                'clientX': point.x,
+                'clientY': point.y
+            });
+            done();
+        }, 100);
+    });
+
+    it('page scroll map position', function (done) {
+        map.on('mousedown click', function (e) {
+            expect(map._containerDOM.__position).to.be.eql([position[0], position[1] - offetY, position[2], position[3]]);
+            expect(e.containerPoint).to.closeTo(expectPoint);
+        });
+        map._containerDOM.__position = position;
+        window.scrollTo(0, offetY);
+        var offsetPoint = point.copy().sub(0, offetY);
+        setTimeout(function () {
+            happen.mousedown(eventContainer, {
+                'clientX': offsetPoint.x,
+                'clientY': offsetPoint.y
+            });
+            done();
+        }, 1000);
+    });
+});
