Avoid loading tiles outside the grid extent

src/ol/renderer/webgl/TileLayer.js

@@ -97,6 +97,14 @@ function getRenderExtent(frameState, extent) {
       fromUserExtent(layerState.extent, frameState.viewState.projection)
     );
   }
+  const source =
+    /** {import("../../source/Tile.js").default} */ layerState.layer.getSource();
+  if (!source.getWrapX()) {
+    const gridExtent = source.tileGrid.getExtent();
+    if (gridExtent) {
+      extent = getIntersection(extent, gridExtent);
+    }
+  }
   return extent;
 }
 
@@ -236,11 +244,13 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
    * @return {boolean} Layer is ready to be rendered.
    */
   prepareFrameInternal(frameState) {
-    if (isEmpty(getRenderExtent(frameState, frameState.extent))) {
+    const layer = this.getLayer();
+    const source = layer.getSource();
+    if (!source) {
       return false;
     }
-    const source = this.getLayer().getSource();
-    if (!source) {
+
+    if (isEmpty(getRenderExtent(frameState, frameState.extent))) {
       return false;
     }
     return source.getState() === State.READY;
@@ -248,7 +258,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
 
   /**
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {import("../../extent.js").Extent} extent The extent.
+   * @param {import("../../extent.js").Extent} extent The extent to be rendered.
    * @param {number} z The zoom level.
    * @param {Object<number, Array<TileTexture>>} tileTexturesByZ The zoom level.
    */
@@ -341,10 +351,10 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     this.preRender(gl, frameState);
 
     const viewState = frameState.viewState;
-    const extent = getRenderExtent(frameState, frameState.extent);
     const tileLayer = this.getLayer();
     const tileSource = tileLayer.getSource();
     const tileGrid = tileSource.getTileGridForProjection(viewState.projection);
+    const extent = getRenderExtent(frameState, frameState.extent);
     const z = tileGrid.getZForResolution(
       viewState.resolution,
       tileSource.zDirection

src/ol/source/DataTile.js

@@ -31,7 +31,7 @@ import {toPromise} from '../functions.js';
  * @property {boolean} [opaque=false] Whether the layer is opaque.
  * @property {import("./State.js").default} [state] The source state.
  * @property {number} [tilePixelRatio] Tile pixel ratio.
- * @property {boolean} [wrapX=true] Render tiles beyond the antimeridian.
+ * @property {boolean} [wrapX=false] Render tiles beyond the antimeridian.
  * @property {number} [transition] Transition time when fading in new tiles (in miliseconds).
  * @property {number} [bandCount=4] Number of bands represented in the data.
  */

src/ol/source/Tile.js

@@ -34,7 +34,7 @@ import {scale as scaleSize, toSize} from '../size.js';
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
  * @property {import("./State.js").default} [state] State.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] TileGrid.
- * @property {boolean} [wrapX=true] WrapX.
+ * @property {boolean} [wrapX=false] WrapX.
  * @property {number} [transition] Transition.
  * @property {string} [key] Key.
  * @property {number|import("../array.js").NearestDirectionFunction} [zDirection=0] ZDirection.