Enqueue tiles at the next resolution in the animation

src/ol/View.js

@@ -208,6 +208,9 @@ import {fromExtent as polygonFromExtent} from './geom/Polygon.js';
  * @property {import("./coordinate.js").Coordinate} center Center.
  * @property {import("./proj/Projection.js").default} projection Projection.
  * @property {number} resolution Resolution.
+ * @property {import("./coordinate.js").Coordinate} [nextCenter] The next center during an animation series.
+ * @property {number} [nextResolution] The next resolution during an animation series.
+ * @property {number} [nextRotation] The next rotation during an animation series.
  * @property {number} rotation Rotation.
  * @property {number} zoom Zoom.
  */
@@ -374,6 +377,24 @@ class View extends BaseObject {
      */
     this.targetRotation_;
 
+    /**
+     * @private
+     * @type {import("./coordinate.js").Coordinate}
+     */
+    this.nextCenter_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.nextResolution_;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.nextRotation_;
+
     /**
      * @private
      * @type {import("./coordinate.js").Coordinate|undefined}
@@ -714,6 +735,9 @@ class View extends BaseObject {
     }
     this.animations_.length = 0;
     this.cancelAnchor_ = anchor;
+    this.nextCenter_ = null;
+    this.nextResolution_ = NaN;
+    this.nextRotation_ = NaN;
   }
 
   /**
@@ -752,6 +776,7 @@ class View extends BaseObject {
           const y0 = animation.sourceCenter[1];
           const x1 = animation.targetCenter[0];
           const y1 = animation.targetCenter[1];
+          this.nextCenter_ = animation.targetCenter;
           const x = x0 + progress * (x1 - x0);
           const y = y0 + progress * (y1 - y0);
           this.targetCenter_ = [x, y];
@@ -776,6 +801,7 @@ class View extends BaseObject {
               animation.anchor
             );
           }
+          this.nextResolution_ = animation.targetResolution;
           this.targetResolution_ = resolution;
           this.applyTargetState_(true);
         }
@@ -800,6 +826,7 @@ class View extends BaseObject {
               animation.anchor
             );
           }
+          this.nextRotation_ = animation.targetRotation;
           this.targetRotation_ = rotation;
         }
         this.applyTargetState_(true);
@@ -811,6 +838,9 @@ class View extends BaseObject {
       if (seriesComplete) {
         this.animations_[i] = null;
         this.setHint(ViewHint.ANIMATING, -1);
+        this.nextCenter_ = null;
+        this.nextResolution_ = NaN;
+        this.nextRotation_ = NaN;
         const callback = series[0].callback;
         if (callback) {
           animationCallback(callback, true);
@@ -1191,7 +1221,7 @@ class View extends BaseObject {
    */
   getState() {
     const projection = this.getProjection();
-    const resolution = /** @type {number} */ (this.getResolution());
+    const resolution = this.getResolution();
     const rotation = this.getRotation();
     let center = /** @type {import("./coordinate.js").Coordinate} */ (
       this.getCenterInternal()
@@ -1211,6 +1241,9 @@ class View extends BaseObject {
       center: center.slice(0),
       projection: projection !== undefined ? projection : null,
       resolution: resolution,
+      nextCenter: this.nextCenter_,
+      nextResolution: this.nextResolution_,
+      nextRotation: this.nextRotation_,
       rotation: rotation,
       zoom: this.getZoom(),
     };