Simplify example, improve documentation.

examples/cog-pyramid.html

@@ -5,7 +5,8 @@ shortdesc: Rendering a COG tile pyramid as layer group.
 docs: >
   Data from a Cloud Optimized GeoTIFF (COG) tile pyramid can be rendered as a set of layers.  In this
   example, a pyramid of 3-band GeoTIFFs is used to render RGB data. The `ol/source.sourcesFromTileGrid`
-  helper function creates sources from this pyramid on demand.
+  helper function creates sources from this pyramid on demand. The GeoTIFFs used by those sources have
+  a resolution range that matches the range of a single z of the pyramid tile grid.
 tags: "cog, tilepyramid, stac"
 ---
 <div id="map" class="map"></div>

examples/cog-pyramid.js

@@ -3,7 +3,6 @@ import Map from '../src/ol/Map.js';
 import TileGrid from '../src/ol/tilegrid/TileGrid.js';
 import View from '../src/ol/View.js';
 import WebGLTileLayer from '../src/ol/layer/WebGLTile.js';
-import {createXYZ} from '../src/ol/tilegrid.js';
 import {sourcesFromTileGrid} from '../src/ol/source.js';
 
 // Metadata from https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/2019_EOxCloudless_rgb.json
@@ -26,12 +25,6 @@ const pyramid = new WebGLTileLayer({
     tileGrid,
     ([z, x, y]) =>
       new GeoTIFF({
-        tileGrid: createXYZ({
-          extent: tileGrid.getTileCoordExtent([z, x, y]),
-          minZoom: z,
-          maxZoom:
-            z === tileGrid.getResolutions().length - 1 ? undefined : z + 1,
-        }),
         sources: [
           {
             url: `https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/${z}/${y}/${x}.tif`,

src/ol/source.js

@@ -41,7 +41,9 @@ export {default as Zoomify} from './source/Zoomify.js';
  * @param {import("./tilegrid/TileGrid.js").default} tileGrid Tile grid.
  * @param {function(import("./tilecoord.js").TileCoord): import("./source/Source.js").default} factory Source factory.
  * This function takes a {@link module:ol/tilecoord~TileCoord} as argument and is expected to return a
- * {@link module:ol/source/Source~Source}.
+ * {@link module:ol/source/Source~Source}. **Note**: The returned sources should have a tile grid with
+ * a limited set of resolutions, matching the resolution range of a single zoom level of the pyramid
+ * `tileGrid` that `createFromTileGrid` was called with.
  * @return {function(import("./extent.js").Extent, number): Array<import("./source/Source.js").default>} Sources function.
  * @api
  */