use ResizeObserver instead of setInterval watch map resize/show/hide (#1298)

* use ResizeObserver instead of setInterval about map reizie/show/hide

* adapt for IE

* update map show/hide test case

Author: deyihu

src/renderer/map/MapCanvasRenderer.js

@@ -794,16 +794,35 @@ class MapCanvasRenderer extends MapRenderer {
     }
 
     _setCheckSizeInterval(interval) {
-        clearInterval(this._resizeInterval);
-        this._checkSizeInterval = interval;
-        this._resizeInterval = setInterval(() => {
-            if (!this.map || this.map.isRemoved()) {
-                //is deleted
-                clearInterval(this._resizeInterval);
-            } else {
-                this._checkSize();
+        // ResizeObserver priority of use
+        // https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver
+        if (typeof window !== 'undefined' && window.ResizeObserver) {
+            if (this._resizeObserver) {
+                this._resizeObserver.disconnect();
+            }
+            if (this.map) {
+                // eslint-disable-next-line no-unused-vars
+                this._resizeObserver = new ResizeObserver((entries) => {
+                    if (!this.map || this.map.isRemoved()) {
+                        this._resizeObserver.disconnect();
+                    } else if (entries.length) {
+                        this._checkSize(entries[0].contentRect);
+                    }
+                });
+                this._resizeObserver.observe(this.map._containerDOM);
             }
-        }, this._checkSizeInterval);
+        } else {
+            clearInterval(this._resizeInterval);
+            this._checkSizeInterval = interval;
+            this._resizeInterval = setInterval(() => {
+                if (!this.map || this.map.isRemoved()) {
+                    //is deleted
+                    clearInterval(this._resizeInterval);
+                } else {
+                    this._checkSize();
+                }
+            }, this._checkSizeInterval);
+        }
     }
 
     _registerEvents() {

test/map/MapSpec.js

@@ -553,9 +553,13 @@ describe('Map.Spec', function () {
                     expect(map.getCenter().toArray()).to.be.eql(center.toArray());
                     done();
                 });
-                container.style.display = '';
+                setTimeout(function () {
+                    container.style.display = '';
+                }, 17);
             });
-            container.style.display = 'none';
+            setTimeout(function () {
+                container.style.display = 'none';
+            }, 17);
         });
 
         it('event properties', function (done) {