ol 7.0.1-dev.1661277132609 → 7.0.1-dev.1661440420569

package/interaction/Draw.d.ts

@@ -131,6 +131,17 @@ export type Options = {
      * Shift key activates freehand drawing.
      */
     freehandCondition?: import("../events/condition.js").Condition | undefined;
+    /**
+     * Trace a portion of another geometry.
+     * Ignored when in freehand mode.
+     */
+    trace?: boolean | import("../events/condition.js").Condition | undefined;
+    /**
+     * Source for features to trace.  If tracing is active and a `traceSource` is
+     * not provided, the interaction's `source` will be used.  Tracing requires that the interaction is configured with
+     * either a `traceSource` or a `source`.
+     */
+    traceSource?: VectorSource<import("../geom/Geometry.js").default> | undefined;
     /**
      * Wrap the world horizontally on the sketch
      * overlay.
@@ -158,6 +169,44 @@ export type PolyCoordType = Array<Array<import("../coordinate.js").Coordinate>>;
  * Types used for drawing coordinates.
  */
 export type SketchCoordType = number[] | LineCoordType | PolyCoordType;
+export type TraceState = {
+    /**
+     * Tracing active.
+     */
+    active: boolean;
+    /**
+     * The initially clicked pixel location.
+     */
+    startPx?: import("../pixel.js").Pixel | undefined;
+    /**
+     * Targets available for tracing.
+     */
+    targets?: TraceTarget[] | undefined;
+    /**
+     * The index of the currently traced target.  A value of -1 indicates
+     * that no trace target is active.
+     */
+    targetIndex?: number | undefined;
+};
+export type TraceTarget = {
+    /**
+     * Target coordinates.
+     */
+    coordinates: Array<import("../coordinate.js").Coordinate>;
+    /**
+     * The target coordinates are a linear ring.
+     */
+    ring: boolean;
+    /**
+     * The index of first traced coordinate.  A fractional index represents an
+     * edge intersection.  Index values for rings will wrap (may be negative or larger than coordinates length).
+     */
+    startIndex: number;
+    /**
+     * The index of last traced coordinate.  Details from startIndex also apply here.
+     */
+    endIndex: number;
+};
 /**
  * Function that takes an array of coordinates and an optional existing geometry
  * and a projection as arguments, and returns a geometry. The optional existing
@@ -170,6 +219,26 @@ export type GeometryFunction = (arg0: SketchCoordType, arg1: import("../geom/Sim
  * cousins.
  */
 export type Mode = 'Point' | 'LineString' | 'Polygon' | 'Circle';
+export type TraceTargetUpdateInfo = {
+    /**
+     * The new target index.
+     */
+    index: number;
+    /**
+     * The new segment end index.
+     */
+    endIndex: number;
+};
+export type PointSegmentRelationship = {
+    /**
+     * The closest point expressed as a fraction along the segment length.
+     */
+    along: number;
+    /**
+     * The squared distance of the point to the segment.
+     */
+    squaredDistance: number;
+};
 /**
  * *
  */
@@ -386,6 +455,28 @@ declare class Draw extends PointerInteraction {
      * @type {import("../events/condition.js").Condition}
      */
     private freehandCondition_;
+    /**
+     * @type {import("../events/condition.js").Condition}
+     * @private
+     */
+    private traceCondition_;
+    /**
+     * @type {TraceState}
+     * @private
+     */
+    private traceState_;
+    /**
+     * @type {VectorSource|null}
+     * @private
+     */
+    private traceSource_;
+    /**
+     * Toggle tracing mode or set a tracing condition.
+     *
+     * @param {boolean|import("../events/condition.js").Condition} trace A boolean to toggle tracing mode or an event
+     *     condition that will be checked when a feature is clicked to determine if tracing should be active.
+     */
+    setTrace(trace: boolean | import("../events/condition.js").Condition): void;
     /**
      * Remove the interaction from its current map and attach it to the new map.
      * Subclasses may set up event handlers to get notified about changes to
@@ -399,6 +490,41 @@ declare class Draw extends PointerInteraction {
      * @api
      */
     getOverlay(): VectorLayer<any>;
+    /**
+     * @private
+     */
+    private deactivateTrace_;
+    /**
+     * Activate or deactivate trace state based on a browser event.
+     * @param {import("../MapBrowserEvent.js").default} event Event.
+     * @private
+     */
+    private toggleTraceState_;
+    /**
+     * @param {TraceTarget} target The trace target.
+     * @param {number} endIndex The new end index of the trace.
+     * @private
+     */
+    private addOrRemoveTracedCoordinates_;
+    /**
+     * @param {number} fromIndex The start index.
+     * @param {number} toIndex The end index.
+     * @private
+     */
+    private removeTracedCoordinates_;
+    /**
+     * @param {TraceTarget} target The trace target.
+     * @param {number} fromIndex The start index.
+     * @param {number} toIndex The end index.
+     * @private
+     */
+    private addTracedCoordinates_;
+    /**
+     * Update the trace.
+     * @param {import("../MapBrowserEvent.js").default} event Event.
+     * @private
+     */
+    private updateTrace_;
     /**
      * Handle move events.
      * @param {import("../MapBrowserEvent.js").default} event A move event.
@@ -408,6 +534,7 @@ declare class Draw extends PointerInteraction {
     /**
      * Determine if an event is within the snapping tolerance of the start coord.
      * @param {import("../pixel.js").Pixel} pixel Pixel.
+     * @param {boolean} [tracing] Drawing in trace mode (only stop if at the starting point).
      * @return {boolean} The event is within the snapping tolerance of the start.
      * @private
      */
@@ -440,6 +567,10 @@ declare class Draw extends PointerInteraction {
      * @private
      */
     private addToDrawing_;
+    /**
+     * @param {number} n The number of points to remove.
+     */
+    removeLastPoints_(n: number): void;
     /**
      * Remove last point of the feature currently being drawn. Does not do anything when
      * drawing POINT or MULTI_POINT geometries.

package/interaction/Draw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Draw.d.ts","sourceRoot":"","sources":["Draw.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"Draw.d.ts","sourceRoot":"","sources":["Draw.js"],"names":[],"mappings":"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"}

package/interaction/Draw.js

@@ -5,6 +5,7 @@ import Circle from '../geom/Circle.js';
 import Event from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import Feature from '../Feature.js';
+import GeometryCollection from '../geom/GeometryCollection.js';
 import InteractionProperty from './Property.js';
 import LineString from '../geom/LineString.js';
 import MapBrowserEvent from '../MapBrowserEvent.js';
@@ -18,7 +19,12 @@ import Polygon, {fromCircle, makeRegular} from '../geom/Polygon.js';
 import VectorLayer from '../layer/Vector.js';
 import VectorSource from '../source/Vector.js';
 import {FALSE, TRUE} from '../functions.js';
-import {always, noModifierKeys, shiftKeyOnly} from '../events/condition.js';
+import {
+  always,
+  never,
+  noModifierKeys,
+  shiftKeyOnly,
+} from '../events/condition.js';
 import {
   boundingExtent,
   getBottomLeft,
@@ -26,10 +32,14 @@ import {
   getTopLeft,
   getTopRight,
 } from '../extent.js';
+import {clamp, squaredDistance, toFixed} from '../math.js';
 import {createEditingStyle} from '../style/Style.js';
+import {
+  distance,
+  squaredDistance as squaredCoordinateDistance,
+} from '../coordinate.js';
 import {fromUserCoordinate, getUserProjection} from '../proj.js';
 import {getStrideForLayout} from '../geom/SimpleGeometry.js';
-import {squaredDistance as squaredCoordinateDistance} from '../coordinate.js';
 
 /**
  * @typedef {Object} Options
@@ -80,6 +90,11 @@ import {squaredDistance as squaredCoordinateDistance} from '../coordinate.js';
  * returns a boolean to indicate whether that event should be handled. The
  * default is {@link module:ol/events/condition.shiftKeyOnly}, meaning that the
  * Shift key activates freehand drawing.
+ * @property {boolean|import("../events/condition.js").Condition} [trace=false] Trace a portion of another geometry.
+ * Ignored when in freehand mode.
+ * @property {VectorSource} [traceSource] Source for features to trace.  If tracing is active and a `traceSource` is
+ * not provided, the interaction's `source` will be used.  Tracing requires that the interaction is configured with
+ * either a `traceSource` or a `source`.
  * @property {boolean} [wrapX=false] Wrap the world horizontally on the sketch
  * overlay.
  * @property {import("../geom/Geometry.js").GeometryLayout} [geometryLayout='XY'] Layout of the
@@ -106,6 +121,24 @@ import {squaredDistance as squaredCoordinateDistance} from '../coordinate.js';
  * @typedef {PointCoordType|LineCoordType|PolyCoordType} SketchCoordType
  */
 
+/**
+ * @typedef {Object} TraceState
+ * @property {boolean} active Tracing active.
+ * @property {import("../pixel.js").Pixel} [startPx] The initially clicked pixel location.
+ * @property {Array<TraceTarget>} [targets] Targets available for tracing.
+ * @property {number} [targetIndex] The index of the currently traced target.  A value of -1 indicates
+ * that no trace target is active.
+ */
+
+/**
+ * @typedef {Object} TraceTarget
+ * @property {Array<import("../coordinate.js").Coordinate>} coordinates Target coordinates.
+ * @property {boolean} ring The target coordinates are a linear ring.
+ * @property {number} startIndex The index of first traced coordinate.  A fractional index represents an
+ * edge intersection.  Index values for rings will wrap (may be negative or larger than coordinates length).
+ * @property {number} endIndex The index of last traced coordinate.  Details from startIndex also apply here.
+ */
+
 /**
  * Function that takes an array of coordinates and an optional existing geometry
  * and a projection as arguments, and returns a geometry. The optional existing
@@ -168,6 +201,359 @@ export class DrawEvent extends Event {
   }
 }
 
+/**
+ * @param {import("../coordinate.js").Coordinate} coordinate The coordinate.
+ * @param {Array<Feature>} features The candidate features.
+ * @return {Array<TraceTarget>} The trace targets.
+ */
+function getTraceTargets(coordinate, features) {
+  /**
+   * @type {Array<TraceTarget>}
+   */
+  const targets = [];
+
+  for (let i = 0; i < features.length; ++i) {
+    const feature = features[i];
+    const geometry = feature.getGeometry();
+    appendGeometryTraceTargets(coordinate, geometry, targets);
+  }
+
+  return targets;
+}
+
+/**
+ * @param {import("../coordinate.js").Coordinate} a One coordinate.
+ * @param {import("../coordinate.js").Coordinate} b Another coordinate.
+ * @return {number} The squared distance between the two coordinates.
+ */
+function getSquaredDistance(a, b) {
+  return squaredDistance(a[0], a[1], b[0], b[1]);
+}
+
+/**
+ * @param {LineCoordType} coordinates The ring coordinates.
+ * @param {number} index The index.  May be wrapped.
+ * @return {import("../coordinate.js").Coordinate} The coordinate.
+ */
+function getCoordinate(coordinates, index) {
+  const count = coordinates.length;
+  if (index < 0) {
+    return coordinates[index + count];
+  }
+  if (index >= count) {
+    return coordinates[index - count];
+  }
+  return coordinates[index];
+}
+
+/**
+ * Get the cumulative squared distance along a ring path.  The end index index may be "wrapped" and it may
+ * be less than the start index to indicate the direction of travel.  The start and end index may have
+ * a fractional part to indicate a point between two coordinates.
+ * @param {LineCoordType} coordinates Ring coordinates.
+ * @param {number} startIndex The start index.
+ * @param {number} endIndex The end index.
+ * @return {number} The cumulative squared distance along the ring path.
+ */
+function getCumulativeSquaredDistance(coordinates, startIndex, endIndex) {
+  let lowIndex, highIndex;
+  if (startIndex < endIndex) {
+    lowIndex = startIndex;
+    highIndex = endIndex;
+  } else {
+    lowIndex = endIndex;
+    highIndex = startIndex;
+  }
+  const lowWholeIndex = Math.ceil(lowIndex);
+  const highWholeIndex = Math.floor(highIndex);
+
+  if (lowWholeIndex > highWholeIndex) {
+    // both start and end are on the same segment
+    const start = interpolateCoordinate(coordinates, lowIndex);
+    const end = interpolateCoordinate(coordinates, highIndex);
+    return getSquaredDistance(start, end);
+  }
+
+  let sd = 0;
+
+  if (lowIndex < lowWholeIndex) {
+    const start = interpolateCoordinate(coordinates, lowIndex);
+    const end = getCoordinate(coordinates, lowWholeIndex);
+    sd += getSquaredDistance(start, end);
+  }
+
+  if (highWholeIndex < highIndex) {
+    const start = getCoordinate(coordinates, highWholeIndex);
+    const end = interpolateCoordinate(coordinates, highIndex);
+    sd += getSquaredDistance(start, end);
+  }
+
+  for (let i = lowWholeIndex; i < highWholeIndex - 1; ++i) {
+    const start = getCoordinate(coordinates, i);
+    const end = getCoordinate(coordinates, i + 1);
+    sd += getSquaredDistance(start, end);
+  }
+
+  return sd;
+}
+
+/**
+ * @param {import("../coordinate.js").Coordinate} coordinate The coordinate.
+ * @param {import("../geom/Geometry.js").default} geometry The candidate geometry.
+ * @param {Array<TraceTarget>} targets The trace targets.
+ */
+function appendGeometryTraceTargets(coordinate, geometry, targets) {
+  if (geometry instanceof LineString) {
+    appendTraceTarget(coordinate, geometry.getCoordinates(), false, targets);
+    return;
+  }
+  if (geometry instanceof MultiLineString) {
+    const coordinates = geometry.getCoordinates();
+    for (let i = 0, ii = coordinates.length; i < ii; ++i) {
+      appendTraceTarget(coordinate, coordinates[i], false, targets);
+    }
+    return;
+  }
+  if (geometry instanceof Polygon) {
+    const coordinates = geometry.getCoordinates();
+    for (let i = 0, ii = coordinates.length; i < ii; ++i) {
+      appendTraceTarget(coordinate, coordinates[i], true, targets);
+    }
+    return;
+  }
+  if (geometry instanceof MultiPolygon) {
+    const polys = geometry.getCoordinates();
+    for (let i = 0, ii = polys.length; i < ii; ++i) {
+      const coordinates = polys[i];
+      for (let j = 0, jj = coordinates.length; j < jj; ++j) {
+        appendTraceTarget(coordinate, coordinates[j], true, targets);
+      }
+    }
+    return;
+  }
+  if (geometry instanceof GeometryCollection) {
+    const geometries = geometry.getGeometries();
+    for (let i = 0; i < geometries.length; ++i) {
+      appendGeometryTraceTargets(coordinate, geometries[i], targets);
+    }
+    return;
+  }
+  // other types cannot be traced
+}
+
+/**
+ * @typedef {Object} TraceTargetUpdateInfo
+ * @property {number} index The new target index.
+ * @property {number} endIndex The new segment end index.
+ */
+
+/**
+ * @type {TraceTargetUpdateInfo}
+ */
+const sharedUpdateInfo = {index: -1, endIndex: NaN};
+
+/**
+ * @param {import("../coordinate.js").Coordinate} coordinate The coordinate.
+ * @param {TraceState} traceState The trace state.
+ * @return {TraceTargetUpdateInfo} Information about the new trace target.  The returned
+ * object is reused between calls and must not be modified by the caller.
+ */
+function getTraceTargetUpdate(coordinate, traceState) {
+  const x = coordinate[0];
+  const y = coordinate[1];
+
+  let closestTargetDistance = Infinity;
+
+  let newTargetIndex = -1;
+  let newEndIndex = NaN;
+
+  for (
+    let targetIndex = 0;
+    targetIndex < traceState.targets.length;
+    ++targetIndex
+  ) {
+    const target = traceState.targets[targetIndex];
+    const coordinates = target.coordinates;
+
+    let minSegmentDistance = Infinity;
+    let endIndex;
+    for (
+      let coordinateIndex = 0;
+      coordinateIndex < coordinates.length - 1;
+      ++coordinateIndex
+    ) {
+      const start = coordinates[coordinateIndex];
+      const end = coordinates[coordinateIndex + 1];
+      const rel = getPointSegmentRelationship(x, y, start, end);
+      if (rel.squaredDistance < minSegmentDistance) {
+        minSegmentDistance = rel.squaredDistance;
+        endIndex = coordinateIndex + rel.along;
+      }
+    }
+
+    if (minSegmentDistance < closestTargetDistance) {
+      closestTargetDistance = minSegmentDistance;
+      if (target.ring && traceState.targetIndex === targetIndex) {
+        // same target, maintain the same trace direction
+        if (target.endIndex > target.startIndex) {
+          // forward trace
+          if (endIndex < target.startIndex) {
+            endIndex += coordinates.length;
+          }
+        } else if (target.endIndex < target.startIndex) {
+          // reverse trace
+          if (endIndex > target.startIndex) {
+            endIndex -= coordinates.length;
+          }
+        }
+      }
+      newEndIndex = endIndex;
+      newTargetIndex = targetIndex;
+    }
+  }
+
+  if (
+    traceState.targetIndex !== newTargetIndex &&
+    traceState.targets[newTargetIndex].ring
+  ) {
+    const target = traceState.targets[newTargetIndex];
+    const coordinates = target.coordinates;
+    const count = coordinates.length;
+    const startIndex = target.startIndex;
+    const endIndex = newEndIndex;
+    if (startIndex < endIndex) {
+      const forwardDistance = getCumulativeSquaredDistance(
+        coordinates,
+        startIndex,
+        endIndex
+      );
+      const reverseDistance = getCumulativeSquaredDistance(
+        coordinates,
+        startIndex,
+        endIndex - count
+      );
+      if (reverseDistance < forwardDistance) {
+        newEndIndex -= count;
+      }
+    } else {
+      const reverseDistance = getCumulativeSquaredDistance(
+        coordinates,
+        startIndex,
+        endIndex
+      );
+      const forwardDistance = getCumulativeSquaredDistance(
+        coordinates,
+        startIndex,
+        endIndex + count
+      );
+      if (forwardDistance < reverseDistance) {
+        newEndIndex += count;
+      }
+    }
+  }
+
+  sharedUpdateInfo.index = newTargetIndex;
+  sharedUpdateInfo.endIndex = newEndIndex;
+  return sharedUpdateInfo;
+}
+
+/**
+ * @param {import("../coordinate.js").Coordinate} coordinate The clicked coordinate.
+ * @param {Array<import("../coordinate.js").Coordinate>} coordinates The geometry component coordinates.
+ * @param {boolean} ring The coordinates represent a linear ring.
+ * @param {Array<TraceTarget>} targets The trace targets.
+ */
+function appendTraceTarget(coordinate, coordinates, ring, targets) {
+  const x = coordinate[0];
+  const y = coordinate[1];
+  for (let i = 0, ii = coordinates.length - 1; i < ii; ++i) {
+    const start = coordinates[i];
+    const end = coordinates[i + 1];
+    const rel = getPointSegmentRelationship(x, y, start, end);
+    if (rel.squaredDistance === 0) {
+      const index = i + rel.along;
+      targets.push({
+        coordinates: coordinates,
+        ring: ring,
+        startIndex: index,
+        endIndex: index,
+      });
+      return;
+    }
+  }
+}
+
+/**
+ * @typedef {Object} PointSegmentRelationship
+ * @property {number} along The closest point expressed as a fraction along the segment length.
+ * @property {number} squaredDistance The squared distance of the point to the segment.
+ */
+
+/**
+ * @type {PointSegmentRelationship}
+ */
+const sharedRel = {along: 0, squaredDistance: 0};
+
+/**
+ * @param {number} x The point x.
+ * @param {number} y The point y.
+ * @param {import("../coordinate.js").Coordinate} start The segment start.
+ * @param {import("../coordinate.js").Coordinate} end The segment end.
+ * @return {PointSegmentRelationship} The point segment relationship.  The returned object is
+ * shared between calls and must not be modified by the caller.
+ */
+function getPointSegmentRelationship(x, y, start, end) {
+  const x1 = start[0];
+  const y1 = start[1];
+  const x2 = end[0];
+  const y2 = end[1];
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  let along = 0;
+  let px = x1;
+  let py = y1;
+  if (dx !== 0 || dy !== 0) {
+    along = clamp(((x - x1) * dx + (y - y1) * dy) / (dx * dx + dy * dy), 0, 1);
+    px += dx * along;
+    py += dy * along;
+  }
+
+  sharedRel.along = along;
+  sharedRel.squaredDistance = toFixed(squaredDistance(x, y, px, py), 10);
+  return sharedRel;
+}
+
+/**
+ * @param {LineCoordType} coordinates The coordinates.
+ * @param {number} index The index.  May be fractional and may wrap.
+ * @return {import("../coordinate.js").Coordinate} The interpolated coordinate.
+ */
+function interpolateCoordinate(coordinates, index) {
+  const count = coordinates.length;
+
+  let startIndex = Math.floor(index);
+  const along = index - startIndex;
+  if (startIndex >= count) {
+    startIndex -= count;
+  } else if (startIndex < 0) {
+    startIndex += count;
+  }
+
+  let endIndex = startIndex + 1;
+  if (endIndex >= count) {
+    endIndex -= count;
+  }
+
+  const start = coordinates[startIndex];
+  const x0 = start[0];
+  const y0 = start[1];
+  const end = coordinates[endIndex];
+  const dx = end[0] - x0;
+  const dy = end[1] - y0;
+
+  return [x0 + dx * along, y0 + dy * along];
+}
+
 /***
  * @template Return
  * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
@@ -514,9 +900,46 @@ class Draw extends PointerInteraction {
         : shiftKeyOnly;
     }
 
+    /**
+     * @type {import("../events/condition.js").Condition}
+     * @private
+     */
+    this.traceCondition_;
+    this.setTrace(options.trace || false);
+
+    /**
+     * @type {TraceState}
+     * @private
+     */
+    this.traceState_ = {active: false};
+
+    /**
+     * @type {VectorSource|null}
+     * @private
+     */
+    this.traceSource_ = options.traceSource || options.source || null;
+
     this.addChangeListener(InteractionProperty.ACTIVE, this.updateState_);
   }
 
+  /**
+   * Toggle tracing mode or set a tracing condition.
+   *
+   * @param {boolean|import("../events/condition.js").Condition} trace A boolean to toggle tracing mode or an event
+   *     condition that will be checked when a feature is clicked to determine if tracing should be active.
+   */
+  setTrace(trace) {
+    let condition;
+    if (!trace) {
+      condition = never;
+    } else if (trace === true) {
+      condition = always;
+    } else {
+      condition = trace;
+    }
+    this.traceCondition_ = condition;
+  }
+
   /**
    * Remove the interaction from its current map and attach it to the new map.
    * Subclasses may set up event handlers to get notified about changes to
@@ -617,28 +1040,241 @@ class Draw extends PointerInteraction {
         this.startDrawing_(event.coordinate);
       }
       return true;
-    } else if (this.condition_(event)) {
-      this.lastDragTime_ = Date.now();
-      this.downTimeout_ = setTimeout(
-        function () {
-          this.handlePointerMove_(
-            new MapBrowserEvent(
-              MapBrowserEventType.POINTERMOVE,
-              event.map,
-              event.originalEvent,
-              false,
-              event.frameState
-            )
-          );
-        }.bind(this),
-        this.dragVertexDelay_
-      );
-      this.downPx_ = event.pixel;
-      return true;
-    } else {
+    }
+
+    if (!this.condition_(event)) {
       this.lastDragTime_ = undefined;
       return false;
     }
+
+    this.lastDragTime_ = Date.now();
+    this.downTimeout_ = setTimeout(
+      function () {
+        this.handlePointerMove_(
+          new MapBrowserEvent(
+            MapBrowserEventType.POINTERMOVE,
+            event.map,
+            event.originalEvent,
+            false,
+            event.frameState
+          )
+        );
+      }.bind(this),
+      this.dragVertexDelay_
+    );
+    this.downPx_ = event.pixel;
+    return true;
+  }
+
+  /**
+   * @private
+   */
+  deactivateTrace_() {
+    this.traceState_ = {active: false};
+  }
+
+  /**
+   * Activate or deactivate trace state based on a browser event.
+   * @param {import("../MapBrowserEvent.js").default} event Event.
+   * @private
+   */
+  toggleTraceState_(event) {
+    if (!this.traceSource_ || !this.traceCondition_(event)) {
+      return;
+    }
+
+    if (this.traceState_.active) {
+      this.deactivateTrace_();
+      return;
+    }
+
+    const map = this.getMap();
+    const lowerLeft = map.getCoordinateFromPixel([
+      event.pixel[0] - this.snapTolerance_,
+      event.pixel[1] + this.snapTolerance_,
+    ]);
+    const upperRight = map.getCoordinateFromPixel([
+      event.pixel[0] + this.snapTolerance_,
+      event.pixel[1] - this.snapTolerance_,
+    ]);
+    const extent = boundingExtent([lowerLeft, upperRight]);
+    const features = this.traceSource_.getFeaturesInExtent(extent);
+    if (features.length === 0) {
+      return;
+    }
+
+    const targets = getTraceTargets(event.coordinate, features);
+    if (targets.length) {
+      this.traceState_ = {
+        active: true,
+        startPx: event.pixel.slice(),
+        targets: targets,
+        targetIndex: -1,
+      };
+    }
+  }
+
+  /**
+   * @param {TraceTarget} target The trace target.
+   * @param {number} endIndex The new end index of the trace.
+   * @private
+   */
+  addOrRemoveTracedCoordinates_(target, endIndex) {
+    // three cases to handle:
+    //  1. traced in the same direction and points need adding
+    //  2. traced in the same direction and points need removing
+    //  3. traced in a new direction
+    const previouslyForward = target.startIndex <= target.endIndex;
+    const currentlyForward = target.startIndex <= endIndex;
+    if (previouslyForward === currentlyForward) {
+      // same direction
+      if (
+        (previouslyForward && endIndex > target.endIndex) ||
+        (!previouslyForward && endIndex < target.endIndex)
+      ) {
+        // case 1 - add new points
+        this.addTracedCoordinates_(target, target.endIndex, endIndex);
+      } else if (
+        (previouslyForward && endIndex < target.endIndex) ||
+        (!previouslyForward && endIndex > target.endIndex)
+      ) {
+        // case 2 - remove old points
+        this.removeTracedCoordinates_(endIndex, target.endIndex);
+      }
+    } else {
+      // case 3 - remove old points, add new points
+      this.removeTracedCoordinates_(target.startIndex, target.endIndex);
+      this.addTracedCoordinates_(target, target.startIndex, endIndex);
+    }
+  }
+
+  /**
+   * @param {number} fromIndex The start index.
+   * @param {number} toIndex The end index.
+   * @private
+   */
+  removeTracedCoordinates_(fromIndex, toIndex) {
+    if (fromIndex === toIndex) {
+      return;
+    }
+
+    let remove = 0;
+    if (fromIndex < toIndex) {
+      const start = Math.ceil(fromIndex);
+      let end = Math.floor(toIndex);
+      if (end === toIndex) {
+        end -= 1;
+      }
+      remove = end - start + 1;
+    } else {
+      const start = Math.floor(fromIndex);
+      let end = Math.ceil(toIndex);
+      if (end === toIndex) {
+        end += 1;
+      }
+      remove = start - end + 1;
+    }
+
+    if (remove > 0) {
+      this.removeLastPoints_(remove);
+    }
+  }
+
+  /**
+   * @param {TraceTarget} target The trace target.
+   * @param {number} fromIndex The start index.
+   * @param {number} toIndex The end index.
+   * @private
+   */
+  addTracedCoordinates_(target, fromIndex, toIndex) {
+    if (fromIndex === toIndex) {
+      return;
+    }
+
+    const coordinates = [];
+    if (fromIndex < toIndex) {
+      // forward trace
+      const start = Math.ceil(fromIndex);
+      let end = Math.floor(toIndex);
+      if (end === toIndex) {
+        // if end is snapped to a vertex, it will be added later
+        end -= 1;
+      }
+      for (let i = start; i <= end; ++i) {
+        coordinates.push(getCoordinate(target.coordinates, i));
+      }
+    } else {
+      // reverse trace
+      const start = Math.floor(fromIndex);
+      let end = Math.ceil(toIndex);
+      if (end === toIndex) {
+        end += 1;
+      }
+      for (let i = start; i >= end; --i) {
+        coordinates.push(getCoordinate(target.coordinates, i));
+      }
+    }
+    if (coordinates.length) {
+      this.appendCoordinates(coordinates);
+    }
+  }
+
+  /**
+   * Update the trace.
+   * @param {import("../MapBrowserEvent.js").default} event Event.
+   * @private
+   */
+  updateTrace_(event) {
+    const traceState = this.traceState_;
+    if (!traceState.active) {
+      return;
+    }
+
+    if (traceState.targetIndex === -1) {
+      // check if we are ready to pick a target
+      if (distance(traceState.startPx, event.pixel) < this.snapTolerance_) {
+        return;
+      }
+    }
+
+    const updatedTraceTarget = getTraceTargetUpdate(
+      event.coordinate,
+      traceState
+    );
+
+    if (traceState.targetIndex !== updatedTraceTarget.index) {
+      // target changed
+      if (traceState.targetIndex !== -1) {
+        // remove points added during previous trace
+        const oldTarget = traceState.targets[traceState.targetIndex];
+        this.removeTracedCoordinates_(oldTarget.startIndex, oldTarget.endIndex);
+      }
+      // add points for the new target
+      const newTarget = traceState.targets[updatedTraceTarget.index];
+      this.addTracedCoordinates_(
+        newTarget,
+        newTarget.startIndex,
+        updatedTraceTarget.endIndex
+      );
+    } else {
+      // target stayed the same
+      const target = traceState.targets[traceState.targetIndex];
+      this.addOrRemoveTracedCoordinates_(target, updatedTraceTarget.endIndex);
+    }
+
+    // modify the state with updated info
+    traceState.targetIndex = updatedTraceTarget.index;
+    const target = traceState.targets[traceState.targetIndex];
+    target.endIndex = updatedTraceTarget.endIndex;
+
+    // update event coordinate and pixel to match end point of final segment
+    const coordinate = interpolateCoordinate(
+      target.coordinates,
+      target.endIndex
+    );
+    const pixel = this.getMap().getPixelFromCoordinate(coordinate);
+    event.coordinate = coordinate;
+    event.pixel = [Math.round(pixel[0]), Math.round(pixel[1])];
   }
 
   /**
@@ -656,6 +1292,8 @@ class Draw extends PointerInteraction {
       }
 
       this.handlePointerMove_(event);
+      const tracing = this.traceState_.active;
+      this.toggleTraceState_(event);
 
       if (this.shouldHandle_) {
         const startingToDraw = !this.finishCoordinate_;
@@ -668,7 +1306,7 @@ class Draw extends PointerInteraction {
           !this.freehand_ &&
           (!startingToDraw || this.mode_ === 'Point')
         ) {
-          if (this.atFinish_(event.pixel)) {
+          if (this.atFinish_(event.pixel, tracing)) {
             if (this.finishCondition_(event)) {
               this.finishDrawing();
             }
@@ -713,20 +1351,23 @@ class Draw extends PointerInteraction {
       }
     }
 
-    if (this.finishCoordinate_) {
-      this.modifyDrawing_(event.coordinate);
-    } else {
+    if (!this.finishCoordinate_) {
       this.createOrUpdateSketchPoint_(event.coordinate.slice());
+      return;
     }
+
+    this.updateTrace_(event);
+    this.modifyDrawing_(event.coordinate);
   }
 
   /**
    * Determine if an event is within the snapping tolerance of the start coord.
    * @param {import("../pixel.js").Pixel} pixel Pixel.
+   * @param {boolean} [tracing] Drawing in trace mode (only stop if at the starting point).
    * @return {boolean} The event is within the snapping tolerance of the start.
    * @private
    */
-  atFinish_(pixel) {
+  atFinish_(pixel, tracing) {
     let at = false;
     if (this.sketchFeature_) {
       let potentiallyDone = false;
@@ -737,7 +1378,8 @@ class Draw extends PointerInteraction {
       } else if (mode === 'Circle') {
         at = this.sketchCoords_.length === 2;
       } else if (mode === 'LineString') {
-        potentiallyDone = this.sketchCoords_.length > this.minPoints_;
+        potentiallyDone =
+          !tracing && this.sketchCoords_.length > this.minPoints_;
       } else if (mode === 'Polygon') {
         const sketchCoords = /** @type {PolyCoordType} */ (this.sketchCoords_);
         potentiallyDone = sketchCoords[0].length > this.minPoints_;
@@ -745,6 +1387,14 @@ class Draw extends PointerInteraction {
           sketchCoords[0][0],
           sketchCoords[0][sketchCoords[0].length - 2],
         ];
+        if (tracing) {
+          potentiallyFinishCoordinates = [sketchCoords[0][0]];
+        } else {
+          potentiallyFinishCoordinates = [
+            sketchCoords[0][0],
+            sketchCoords[0][sketchCoords[0].length - 2],
+          ];
+        }
       }
       if (potentiallyDone) {
         const map = this.getMap();
@@ -936,51 +1586,63 @@ class Draw extends PointerInteraction {
   }
 
   /**
-   * Remove last point of the feature currently being drawn. Does not do anything when
-   * drawing POINT or MULTI_POINT geometries.
-   * @api
+   * @param {number} n The number of points to remove.
    */
-  removeLastPoint() {
+  removeLastPoints_(n) {
     if (!this.sketchFeature_) {
       return;
     }
     const geometry = this.sketchFeature_.getGeometry();
     const projection = this.getMap().getView().getProjection();
-    let coordinates;
     const mode = this.mode_;
-    if (mode === 'LineString' || mode === 'Circle') {
-      coordinates = /** @type {LineCoordType} */ (this.sketchCoords_);
-      coordinates.splice(-2, 1);
-      if (coordinates.length >= 2) {
-        this.finishCoordinate_ = coordinates[coordinates.length - 2].slice();
-        const finishCoordinate = this.finishCoordinate_.slice();
-        coordinates[coordinates.length - 1] = finishCoordinate;
-        this.createOrUpdateSketchPoint_(finishCoordinate);
-      }
-      this.geometryFunction_(coordinates, geometry, projection);
-      if (geometry.getType() === 'Polygon' && this.sketchLine_) {
-        this.createOrUpdateCustomSketchLine_(/** @type {Polygon} */ (geometry));
-      }
-    } else if (mode === 'Polygon') {
-      coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0];
-      coordinates.splice(-2, 1);
-      const sketchLineGeom = this.sketchLine_.getGeometry();
-      if (coordinates.length >= 2) {
-        const finishCoordinate = coordinates[coordinates.length - 2].slice();
-        coordinates[coordinates.length - 1] = finishCoordinate;
-        this.createOrUpdateSketchPoint_(finishCoordinate);
+    for (let i = 0; i < n; ++i) {
+      let coordinates;
+      if (mode === 'LineString' || mode === 'Circle') {
+        coordinates = /** @type {LineCoordType} */ (this.sketchCoords_);
+        coordinates.splice(-2, 1);
+        if (coordinates.length >= 2) {
+          this.finishCoordinate_ = coordinates[coordinates.length - 2].slice();
+          const finishCoordinate = this.finishCoordinate_.slice();
+          coordinates[coordinates.length - 1] = finishCoordinate;
+          this.createOrUpdateSketchPoint_(finishCoordinate);
+        }
+        this.geometryFunction_(coordinates, geometry, projection);
+        if (geometry.getType() === 'Polygon' && this.sketchLine_) {
+          this.createOrUpdateCustomSketchLine_(
+            /** @type {Polygon} */ (geometry)
+          );
+        }
+      } else if (mode === 'Polygon') {
+        coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0];
+        coordinates.splice(-2, 1);
+        const sketchLineGeom = this.sketchLine_.getGeometry();
+        if (coordinates.length >= 2) {
+          const finishCoordinate = coordinates[coordinates.length - 2].slice();
+          coordinates[coordinates.length - 1] = finishCoordinate;
+          this.createOrUpdateSketchPoint_(finishCoordinate);
+        }
+        sketchLineGeom.setCoordinates(coordinates);
+        this.geometryFunction_(this.sketchCoords_, geometry, projection);
       }
-      sketchLineGeom.setCoordinates(coordinates);
-      this.geometryFunction_(this.sketchCoords_, geometry, projection);
-    }
 
-    if (coordinates.length === 1) {
-      this.abortDrawing();
+      if (coordinates.length === 1) {
+        this.abortDrawing();
+        break;
+      }
     }
 
     this.updateSketchFeatures_();
   }
 
+  /**
+   * Remove last point of the feature currently being drawn. Does not do anything when
+   * drawing POINT or MULTI_POINT geometries.
+   * @api
+   */
+  removeLastPoint() {
+    this.removeLastPoints_(1);
+  }
+
   /**
    * Stop drawing and add the sketch feature to the target layer.
    * The {@link module:ol/interaction/Draw~DrawEventType.DRAWEND} event is
@@ -1045,6 +1707,7 @@ class Draw extends PointerInteraction {
     this.sketchPoint_ = null;
     this.sketchLine_ = null;
     this.overlay_.getSource().clear(true);
+    this.deactivateTrace_();
     return sketchFeature;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "7.0.1-dev.1661277132609",
+  "version": "7.0.1-dev.1661440420569",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",

package/renderer/canvas/TileLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["TileLayer.js"],"names":[],"mappings":";AA8BA;;;;;;GAMG;AACH;IACE;;OAEG;IACH,uBAFW,SAAS,EA0DnB;IArDC;;;OAGG;IACH,eAFU,OAAO,CAEQ;IAEzB;;;OAGG;IACH,wBAA2B;IAE3B;;;OAGG;IACH,8BAFU,MAAM,CAEO;IAEvB;;;OAGG;IACH,8BAFU,OAAO,0BAA0B,EAAE,OAAO,CAEtB;IAE9B;;;OAGG;IACH,4BAFU,MAAM,CAEK;IAErB;;;OAGG;IACH,yBAFW,MAAM,OAAO,eAAe,EAAE,OAAO,CAAC,CAE1B;IAEvB;;;OAGG;IACH,kBAAsB;IAEtB;;;OAGG;IACH,qBAFU,OAAO,iBAAiB,EAAE,MAAM,CAEZ;IAE9B;;;OAGG;IACH,sBAA8C;IAGhD;;;;OAIG;IACH,+BAHW,OAAO,eAAe,EAAE,OAAO,GAC9B,OAAO,CAWlB;IAED;;;;;;OAMG;IACH,WANW,MAAM,KACN,MAAM,KACN,MAAM,cACN,OAAO,cAAc,EAAE,UAAU,GAC/B,OAAO,eAAe,EAAE,OAAO,CAkB3C;IAED;;;OAGG;IACH,eAHW,OAAO,gBAAgB,EAAE,KAAK,GAC7B,iBAAiB,CAyE5B;IAoWD;;;;;;;;;OASG;IACH,oBATW,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,cAAc,EAAE,UAAU,KACjC,MAAM,KACN,MAAM,KACN,MAAM,KACN,MAAM,UACN,MAAM,cACN,OAAO,QAqCjB;IAED;;OAEG;IACH,YAFY,iBAAiB,CAK5B;IAED;;;;;OAKG;IACH,6BAJW,OAAO,oBAAoB,EAAE,OAAO,GACnC,iBAAiB,GAAC,gBAAgB,GAAC,gBAAgB,CAK9D;IAED;;;;OAIG;IACH,0CAJW,OAAO,cAAc,EAAE,UAAU,cACjC,OAAO,sBAAsB,EAAE,OAAO,QA0BhD;IAED;;;;;OAKG;IACH;YALmB,MAAM;gBAAU,MAAM,GAAE,OAAO;;mBACvC,OAAO,sBAAsB,EAAE,OAAO,QACtC,OAAO,eAAe,EAAE,OAAO,QAUzC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,wCAXW,OAAO,cAAc,EAAE,UAAU,cACjC,OAAO,sBAAsB,EAAE,OAAO,YACtC,OAAO,4BAA4B,EAAE,OAAO,cAC5C,MAAM,cACN,OAAO,0BAA0B,EAAE,OAAO,UAC1C,OAAO,iBAAiB,EAAE,MAAM,YAChC,MAAM,WACN,MAAM,yBACG,OAAO,eAAe,EAAE,OAAO,KAAE,IAAI,qBAmExD;CACF"}
+{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["TileLayer.js"],"names":[],"mappings":";AA8BA;;;;;;GAMG;AACH;IACE;;OAEG;IACH,uBAFW,SAAS,EA0DnB;IArDC;;;OAGG;IACH,eAFU,OAAO,CAEQ;IAEzB;;;OAGG;IACH,wBAA2B;IAE3B;;;OAGG;IACH,8BAFU,MAAM,CAEO;IAEvB;;;OAGG;IACH,8BAFU,OAAO,0BAA0B,EAAE,OAAO,CAEtB;IAE9B;;;OAGG;IACH,4BAFU,MAAM,CAEK;IAErB;;;OAGG;IACH,yBAFW,MAAM,OAAO,eAAe,EAAE,OAAO,CAAC,CAE1B;IAEvB;;;OAGG;IACH,kBAAsB;IAEtB;;;OAGG;IACH,qBAFU,OAAO,iBAAiB,EAAE,MAAM,CAEZ;IAE9B;;;OAGG;IACH,sBAA8C;IAGhD;;;;OAIG;IACH,+BAHW,OAAO,eAAe,EAAE,OAAO,GAC9B,OAAO,CAWlB;IAED;;;;;;OAMG;IACH,WANW,MAAM,KACN,MAAM,KACN,MAAM,cACN,OAAO,cAAc,EAAE,UAAU,GAC/B,OAAO,eAAe,EAAE,OAAO,CAkB3C;IAED;;;OAGG;IACH,eAHW,OAAO,gBAAgB,EAAE,KAAK,GAC7B,iBAAiB,CA4E5B;IAoWD;;;;;;;;;OASG;IACH,oBATW,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,cAAc,EAAE,UAAU,KACjC,MAAM,KACN,MAAM,KACN,MAAM,KACN,MAAM,UACN,MAAM,cACN,OAAO,QAqCjB;IAED;;OAEG;IACH,YAFY,iBAAiB,CAK5B;IAED;;;;;OAKG;IACH,6BAJW,OAAO,oBAAoB,EAAE,OAAO,GACnC,iBAAiB,GAAC,gBAAgB,GAAC,gBAAgB,CAK9D;IAED;;;;OAIG;IACH,0CAJW,OAAO,cAAc,EAAE,UAAU,cACjC,OAAO,sBAAsB,EAAE,OAAO,QA0BhD;IAED;;;;;OAKG;IACH;YALmB,MAAM;gBAAU,MAAM,GAAE,OAAO;;mBACvC,OAAO,sBAAsB,EAAE,OAAO,QACtC,OAAO,eAAe,EAAE,OAAO,QAUzC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,wCAXW,OAAO,cAAc,EAAE,UAAU,cACjC,OAAO,sBAAsB,EAAE,OAAO,YACtC,OAAO,4BAA4B,EAAE,OAAO,cAC5C,MAAM,cACN,OAAO,0BAA0B,EAAE,OAAO,UAC1C,OAAO,iBAAiB,EAAE,MAAM,YAChC,MAAM,WACN,MAAM,yBACG,OAAO,eAAe,EAAE,OAAO,KAAE,IAAI,qBAmExD;CACF"}

package/renderer/canvas/TileLayer.js

@@ -181,7 +181,10 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
         pixelRatio,
         projection
       );
-      if (!(tile instanceof ImageTile || tile instanceof ReprojTile)) {
+      if (
+        !(tile instanceof ImageTile || tile instanceof ReprojTile) ||
+        (tile instanceof ReprojTile && tile.getState() === TileState.EMPTY)
+      ) {
         return null;
       }
 

package/renderer/webgl/TileLayer.d.ts

@@ -158,10 +158,11 @@ declare class WebGLTileLayerRenderer extends WebGLLayerRenderer<import("../../la
      * @param {import("../../extent.js").Extent} extent The extent to be rendered.
      * @param {number} initialZ The zoom level.
      * @param {Object<number, Array<TileTexture>>} tileTexturesByZ The zoom level.
+     * @param {number} preload Number of additional levels to load.
      */
     enqueueTiles(frameState: import("../../Map.js").FrameState, extent: import("../../extent.js").Extent, initialZ: number, tileTexturesByZ: {
         [x: number]: Array<TileTexture>;
-    }): void;
+    }, preload: number): void;
     /**
      * Render the layer.
      * @param {import("../../Map.js").FrameState} frameState Frame state.

package/renderer/webgl/TileLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["TileLayer.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;kBAiIc,MAAM;;;;oBACN,MAAM;;;;;;;;;;;;;;;;;wBAQP,OAAO,0BAA0B,EAAE,OAAO;AAXvD;;;;;;;;GAQG;AAEH;;GAEG;AAEH;;;;;GAKG;AACH;IACE;;;OAGG;IACH,uBAHW,SAAS,WACT,OAAO,EAmGjB;IA5FC;;;OAGG;IACH,gBAFU,OAAO,CAEU;IAE3B;;;;OAIG;IACH,uBAAuC;IAEvC;;;OAGG;IACH,kBAA6B;IAE7B;;;OAGG;IACH,uBAA+C;IAE/C;;;OAGG;IACH,uBAA8C;IAE9C;;;OAGG;IACH,kBAAuB;IAEvB;;;OAGG;IACH,iBAAa;IAEb;;OAEG;IACH,sBAAyC;IAEzC;;OAEG;IACH,wBAA6C;IAE7C;;;;;;;;;;;;;;;;OAgBG;IACH,iBAAuE;IAKvE;;;OAGG;IACH,0BAAgD;IAEhD;;;OAGG;IACH,yBAAqD;IAErD;;;OAGG;IACH,oBAAuB;IAGzB;;OAEG;IACH,eAFW,OAAO,QAgBjB;IAWD;;;;OAIG;IACH,wBASC;IAoBD;;;;;OAKG;IACH,yBALW,OAAO,cAAc,EAAE,UAAU,UACjC,OAAO,iBAAiB,EAAE,MAAM,YAChC,MAAM;YACC,MAAM,GAAE,MAAM,WAAW,CAAC;aA6F3C;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CA6QtB;IAED;;;OAGG;IACH,eAHW,OAAO,gBAAgB,EAAE,KAAK,GAC7B,iBAAiB,GAAC,UAAU,GAAC,YAAY,GAAC,QAAQ,CAqF7D;IAED;;;;;;;;;;OAUG;IACH,sBA+BC;CA+BF"}
+{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["TileLayer.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;kBAkIc,MAAM;;;;oBACN,MAAM;;;;;;;;;;;;;;;;;wBAQP,OAAO,0BAA0B,EAAE,OAAO;AAXvD;;;;;;;;GAQG;AAEH;;GAEG;AAEH;;;;;GAKG;AACH;IACE;;;OAGG;IACH,uBAHW,SAAS,WACT,OAAO,EAmGjB;IA5FC;;;OAGG;IACH,gBAFU,OAAO,CAEU;IAE3B;;;;OAIG;IACH,uBAAuC;IAEvC;;;OAGG;IACH,kBAA6B;IAE7B;;;OAGG;IACH,uBAA+C;IAE/C;;;OAGG;IACH,uBAA8C;IAE9C;;;OAGG;IACH,kBAAuB;IAEvB;;;OAGG;IACH,iBAAa;IAEb;;OAEG;IACH,sBAAyC;IAEzC;;OAEG;IACH,wBAA6C;IAE7C;;;;;;;;;;;;;;;;OAgBG;IACH,iBAAuE;IAKvE;;;OAGG;IACH,0BAAgD;IAEhD;;;OAGG;IACH,yBAAqD;IAErD;;;OAGG;IACH,oBAAuB;IAGzB;;OAEG;IACH,eAFW,OAAO,QAgBjB;IAWD;;;;OAIG;IACH,wBASC;IAoBD;;;;;;OAMG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,UACjC,OAAO,iBAAiB,EAAE,MAAM,YAChC,MAAM;YACC,MAAM,GAAE,MAAM,WAAW,CAAC;gBACjC,MAAM,QAwGhB;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CAkStB;IAED;;;OAGG;IACH,eAHW,OAAO,gBAAgB,EAAE,KAAK,GAC7B,iBAAiB,GAAC,UAAU,GAAC,YAAY,GAAC,QAAQ,CAyF7D;IAED;;;;;;;;;;OAUG;IACH,sBA+BC;CA+BF"}

package/renderer/webgl/TileLayer.js

@@ -2,6 +2,7 @@
  * @module ol/renderer/webgl/TileLayer
  */
 import LRUCache from '../../structs/LRUCache.js';
+import ReprojTile from '../../reproj/Tile.js';
 import TileRange from '../../TileRange.js';
 import TileState from '../../TileState.js';
 import TileTexture from '../../webgl/TileTexture.js';
@@ -316,8 +317,9 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
    * @param {import("../../extent.js").Extent} extent The extent to be rendered.
    * @param {number} initialZ The zoom level.
    * @param {Object<number, Array<TileTexture>>} tileTexturesByZ The zoom level.
+   * @param {number} preload Number of additional levels to load.
    */
-  enqueueTiles(frameState, extent, initialZ, tileTexturesByZ) {
+  enqueueTiles(frameState, extent, initialZ, tileTexturesByZ, preload) {
     const viewState = frameState.viewState;
     const tileLayer = this.getLayer();
     const tileSource = tileLayer.getRenderSource();
@@ -330,12 +332,23 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     }
 
     const wantedTiles = frameState.wantedTiles[tileSourceKey];
-
     const tileTextureCache = this.tileTextureCache_;
+
+    const map = tileLayer.getMapInternal();
     const minZ = Math.max(
-      initialZ - tileLayer.getPreload(),
+      initialZ - preload,
       tileGrid.getMinZoom(),
-      tileLayer.getMinZoom()
+      tileGrid.getZForResolution(
+        Math.min(
+          tileLayer.getMaxResolution(),
+          map
+            ? map
+                .getView()
+                .getResolutionForZoom(Math.max(tileLayer.getMinZoom(), 0))
+            : tileGrid.getResolution(0)
+        ),
+        tileSource.zDirection
+      )
     );
     for (let z = initialZ; z >= minZ; --z) {
       const tileRange = tileGrid.getTileRangeForExtentAndZ(
@@ -437,16 +450,34 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
      */
     const tileTexturesByZ = {};
 
+    const preload = tileLayer.getPreload();
     if (frameState.nextExtent) {
       const targetZ = tileGrid.getZForResolution(
         viewState.nextResolution,
         tileSource.zDirection
       );
       const nextExtent = getRenderExtent(frameState, frameState.nextExtent);
-      this.enqueueTiles(frameState, nextExtent, targetZ, tileTexturesByZ);
+      this.enqueueTiles(
+        frameState,
+        nextExtent,
+        targetZ,
+        tileTexturesByZ,
+        preload
+      );
     }
 
-    this.enqueueTiles(frameState, extent, z, tileTexturesByZ);
+    this.enqueueTiles(frameState, extent, z, tileTexturesByZ, 0);
+    if (preload > 0) {
+      setTimeout(() => {
+        this.enqueueTiles(
+          frameState,
+          extent,
+          z - 1,
+          tileTexturesByZ,
+          preload - 1
+        );
+      }, 0);
+    }
 
     /**
      * A lookup of alpha values for tiles at the target rendering resolution
@@ -465,6 +496,9 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     for (let i = 0, ii = tileTextures.length; i < ii; ++i) {
       const tileTexture = tileTextures[i];
       const tile = tileTexture.tile;
+      if (tile instanceof ReprojTile && tile.getState() === TileState.EMPTY) {
+        continue;
+      }
       const tileCoord = tile.tileCoord;
 
       if (tileTexture.loaded) {
@@ -753,6 +787,10 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
         continue;
       }
       const tileTexture = tileTextureCache.get(cacheKey);
+      const tile = tileTexture.tile;
+      if (tile instanceof ReprojTile && tile.getState() === TileState.EMPTY) {
+        return null;
+      }
       if (!tileTexture.loaded) {
         continue;
       }

package/util.js

@@ -33,4 +33,4 @@ export function getUid(obj) {
  * OpenLayers version.
  * @type {string}
  */
-export const VERSION = '7.0.1-dev.1661277132609';
+export const VERSION = '7.0.1-dev.1661440420569';