fix tilelayer animation

maptalks · Aug 4, 2017 · 8fb92d2 · 8fb92d2
1 parent 234b0ac
commit 8fb92d2
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 34 deletions.
diff --git a/debug/tilelayer.html b/debug/tilelayer.html
@@ -3,6 +3,8 @@
   <meta charset="UTF-8"/>
   <script type="text/javascript" src="maptalks.js"></script>
   <title>TileLayer Tests</title>
+  <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> -->
   <style>
     html,
     body {
@@ -127,8 +129,20 @@
         duration : 4000
       })
     });
+
+
     function createMap(div, options, cb) {
 
+      /*var map = L.map(div).setView([51.505, -0.09], 13);
+
+      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+
+      L.marker([51.5, -0.09]).addTo(map)
+          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
+          .openPopup();*/
+
       const opts = maptalks.Util.extend({
         center:  center,
         zoom: 14,

diff --git a/src/map/Map.Anim.js b/src/map/Map.Anim.js
@@ -115,16 +115,8 @@ Map.include({
                 }
             }
         });
-        if (props['zoom'] || !this.isTransforming() && (props['pitch'] || props['bearing'])) {
-            // reset map container if will zoom or rotate
-            // force tilelayer to reset, to fix the incorrect offset of tiles if animation starts without pitch and bearing.
-            this._zoom(this.getZoom());
-            renderer.callInNextFrame(() => {
-                this._startAnim(props, zoomOrigin);
-            });
-        } else {
-            this._startAnim(props, zoomOrigin);
-        }
+
+        this._startAnim(props, zoomOrigin);
 
         return this;
     },
@@ -143,6 +135,11 @@ Map.include({
 
     _endAnim(props, zoomOrigin, options) {
         delete this._animRotating;
+        if (this._animPlayer) {
+            const evtType = this._animPlayer._interupted ? 'animateinterupted' : 'animateend';
+            delete this._animPlayer;
+            this._fireEvent(evtType);
+        }
         if (props['center']) {
             this.onMoveEnd();
         }
@@ -153,10 +150,6 @@ Map.include({
                 this.onZooming(props['zoom'][1], zoomOrigin);
             }
         }
-        if (this._animPlayer) {
-            this._fireEvent(this._animPlayer._interupted ? 'animateinterupted' : 'animateend');
-            delete this._animPlayer;
-        }
     },
 
     _startAnim(props, zoomOrigin) {
@@ -172,8 +165,8 @@ Map.include({
         if (props['pitch'] || props['bearing']) {
             this._animRotating = true;
         }
-        this._animPlayer.play();
         this._fireEvent('animatestart');
+        this._animPlayer.play();
     },
 
     _stopAnim() {

diff --git a/src/map/Map.js b/src/map/Map.js
@@ -574,13 +574,15 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
     /**
      * Sets zoom of the map
      * @param {Number} zoom
+     * @param {Object} [options=null] options
+     * @param {Boolean} [options.animation=true] whether zoom is animation, true by default
      * @returns {Map} this
      */
-    setZoom(zoom) {
+    setZoom(zoom, options = { 'animation' : true }) {
         if (isNaN(zoom) || isNil(zoom)) {
             return this;
         }
-        if (this._loaded && this.options['zoomAnimation']) {
+        if (this._loaded && this.options['zoomAnimation'] && options['animation']) {
             this._zoomAnimation(zoom);
         } else {
             this._zoom(zoom);
@@ -666,7 +668,7 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
      * @return {Map} this
      */
     zoomOut() {
-        return this.setZoom(this.getZoom() + 1);
+        return this.setZoom(this.getZoom() - 1);
     }
 
     /**
@@ -694,10 +696,7 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
     setCenterAndZoom(center, zoom) {
         if (!isNil(zoom) && this._zoomLevel !== zoom) {
             this.setCenter(center);
-            const a = this.options['zoomAnimation'];
-            this.config('zoomAnimation', false);
-            this.setZoom(zoom);
-            this.config('zoomAnimation', a);
+            this.setZoom(zoom, { animation : false });
         } else {
             this.setCenter(center);
         }
@@ -1260,9 +1259,9 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
         const hided = (watched['width'] === 0 ||  watched['height'] === 0 || oldWidth === 0 || oldHeight === 0);
 
         if (justStart || hided) {
-            this._eventSuppressed = true;
+            this._noEvent = true;
             this.setCenter(center);
-            this._eventSuppressed = false;
+            delete this._noEvent;
         }
         /**
          * resize event when map container's size changes
@@ -1610,7 +1609,7 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
 
 
     _fireEvent(eventName, param) {
-        if (this._eventSuppressed) {
+        if (this._noEvent) {
             return;
         }
         //fire internal events at first

diff --git a/src/map/handler/Map.ScrollWheelZoom.js b/src/map/handler/Map.ScrollWheelZoom.js
@@ -34,7 +34,6 @@ class MapScrollWheelZoomHandler extends Handler {
             map.onZoomStart(null, origin);
             this._origin = origin;
             this._delta = levelValue;
-            this._startTime = Date.now();
         }
         const duration = 180;
         map.animateTo({
@@ -45,7 +44,7 @@ class MapScrollWheelZoomHandler extends Handler {
             'duration' : duration,
             'wheelZoom' : true,
             'onFinish' : () => {
-                if (this._requesting < 3 || this._requesting >= 10) {
+                if (this._requesting === 0) {
                     map.animateTo({
                         'zoom' : nextZoom,
                         'around' : this._origin
@@ -57,7 +56,6 @@ class MapScrollWheelZoomHandler extends Handler {
                     });
                     delete this._origin;
                     delete this._delta;
-                    delete this._timeout;
                     this._requesting = 0;
                 } else if (!isNil(this._requesting)) {
                     delete this._zooming;

diff --git a/src/renderer/layer/tilelayer/TileLayerDomRenderer.js b/src/renderer/layer/tilelayer/TileLayerDomRenderer.js
@@ -119,6 +119,7 @@ export default class TileLayerDomRenderer extends Class {
                 if (this._endZoom < this._startZoom && next === tileZoom) {
                     this._abortLoading(false);
                     this._renderTiles();
+                    this._pruneLevels();
                     this._curAnimZoom = this._tileZoom;
 
                     const nextZoom = this._curAnimZoom + gap * s;
@@ -128,7 +129,7 @@ export default class TileLayerDomRenderer extends Class {
                         this._preloadTiles(nextGrid.tiles.slice(0, curTilesCount));
                     }
                 } else {
-                    this._updateContainer();
+                    this._drawOnZooming();
                 }
             } else if (map.isRotating()) {
                 this._drawOnDragRotating();
@@ -362,15 +363,13 @@ export default class TileLayerDomRenderer extends Class {
         }
         const mapOffset = map.getViewPoint().round();
         let tileOffset;
-        if (map.isZooming()) {
+        if (map.isZooming() && !map.isMoving()) {
             // when map is zooming, mapOffset is fixed when zoom starts
             // should multiply with zoom fraction if zoom start from a fractional zoom
             const startFraction = map.getResolution(tileZoom) / map.getResolution(this._startZoom);
             tileOffset = mapOffset.multi(1 / startFraction);
-            // centerOffset = centerOffset.multi(1 / startFraction);
         } else {
             tileOffset = mapOffset.multi(1 / fraction);
-            // centerOffset = centerOffset.multi(1 / fraction);
         }
         if (centerOffset) {
             tileOffset._add(centerOffset);
@@ -692,7 +691,7 @@ export default class TileLayerDomRenderer extends Class {
             container.style.cssText = POSITION0;
 
             const tileContainer =  createEl('div');
-            tileContainer.style.cssText = POSITION0 + ';will-change:transform';
+            tileContainer.style.cssText = POSITION0;// + ';will-change:transform';
             container.appendChild(tileContainer);
             container.tile = tileContainer;
             this._container.appendChild(container);
@@ -775,7 +774,7 @@ export default class TileLayerDomRenderer extends Class {
         if (!this.getMap() || !this._levelContainers) {
             return;
         }
-        if (!this._zoomParam && this._tileZoom !== this._endZoom) {
+        if (!this._zoomParam && this._tileZoom !== this.layer._getTileZoom()) {
             // zoom without animation
             this._removeTileContainer(this._tileZoom);
         }