@sakuzu/maplibre-gl-draw 2.1.0 → 2.1.2

package/dist/view/shaders/initializer.js

@@ -23,7 +23,7 @@ export class ShaderInitializer {
      * Makes every renderer ensure its shader
      */
     ensureShaders(shaderData) {
-        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, } = this.renderers;
+        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.ensureShader(shaderData);
         }
@@ -51,6 +51,7 @@ export class ShaderInitializer {
         if (sdfPolygonRenderer) {
             sdfPolygonRenderer.ensureShader(shaderData);
         }
+        fillShaderManager?.ensureShader(shaderData);
     }
     /**
      * Sets the projection data on the renderers that need it
@@ -79,7 +80,7 @@ export class ShaderInitializer {
      * uniforms once per frame and applies them for each slot.
      */
     applyOffsetUniforms(uniforms) {
-        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, } = this.renderers;
+        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.setOffsetUniforms(uniforms);
         }
@@ -107,6 +108,7 @@ export class ShaderInitializer {
         if (sdfPolygonRenderer) {
             sdfPolygonRenderer.setOffsetUniforms(uniforms);
         }
+        fillShaderManager?.setOffsetUniforms(uniforms);
     }
     /**
      * Increments the frame count of SDFLineRenderer

package/dist/view/terrain/anchor.js

@@ -140,11 +140,30 @@ export function drawnLongitude(context, lng) {
  * @internal
  */
 export function projectAnchor(context, lng, lat) {
+    const frame = context.anchorFrame;
+    if (!frame.mainMatrix || !frame.terrain)
+        return null;
+    return projectAnchorAt(context, lng, lat, anchorElevationMeters(context, lng, lat));
+}
+/**
+ * Maps a position at a given elevation to screen coordinates, with the projection of
+ * {@link projectAnchor}
+ *
+ * Something drawn flat at one elevation, such as the frame of a selected point at the
+ * elevation of the point, is projected with this so that it lands where the shader draws it.
+ *
+ * @param elevationMeters The elevation in meters (the exaggeration included, as
+ *   {@link anchorElevationMeters} gives it)
+ * @returns null when the terrain is disabled, the frame state has not been established or the
+ *   position is behind the camera
+ * @internal
+ */
+export function projectAnchorAt(context, lng, lat, elevationMeters) {
     const frame = context.anchorFrame;
     const { mainMatrix: m, offsetUniforms, terrain, width, height } = frame;
     if (!m || !terrain || width <= 0 || height <= 0)
         return null;
-    const elevationMercator = anchorElevationMeters(context, lng, lat) * frame.elevationScale;
+    const elevationMercator = elevationMeters * frame.elevationScale;
     // The anchor is projected on the copy of the world it is drawn on
     const drawnLng = drawnLongitude(context, lng);
     let clipX;

package/dist/view/terrain/drape/bin-store.d.ts

@@ -19,16 +19,23 @@
  */
 import type { DrapeElement, DrapeQuadBreak, DrapeTile, TileBins } from './binning.js';
 /** The number of style texels per element */
-export declare const DRAPE_STYLE_TEXELS = 4;
+export declare const DRAPE_STYLE_TEXELS = 5;
 /**
  * The index of the texel the selection highlight uses within the style table
  *
  * 0 = fill, 1 = stroke, 2 = specifications (width, kind, source, reference zoom), 3 =
- * selection. The selection alone is put in a separate texel so that the index (the binning)
+ * selection, 4 = the dash pattern (`DRAPE_DASH_TEXEL`). The selection alone is put in a separate texel so that the index (the binning)
  * need not be touched at all when the selection changes. Mixing it into the same texel as the
  * color or the width would mean rebuilding the other values too on every rewrite.
  */
 export declare const DRAPE_SELECTION_TEXEL = 3;
+/**
+ * The index of the texel of the dash pattern within the style table
+ *
+ * (a, b, c, pixel ratio): the coefficients of the pattern (`DrapeDash` in `binning.ts`) and the
+ * physical pixels of the width per CSS pixel. A pixel ratio of 0 marks a solid outline.
+ */
+export declare const DRAPE_DASH_TEXEL = 4;
 /** The upper bound on the number of edge texels (16 bytes per texel, so 1M is 16MB) */
 export declare const DRAPE_MAX_EDGE_TEXELS = 1048576;
 /** The key of a tile */
@@ -57,6 +64,8 @@ export declare class DrapePackBuilder {
      * transferred) */
     readonly id: number;
     edges: Float32Array<ArrayBuffer>;
+    /** Where each edge starts along its path (one number per edge, in step with `edges`) */
+    edgeStarts: Float32Array<ArrayBuffer>;
     edgeCount: number;
     runs: Float32Array<ArrayBuffer>;
     runCount: number;

package/dist/view/terrain/drape/bin-store.js

@@ -2,16 +2,23 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 import { binTile, drapeCellWorkBudget } from './binning.js';
 /** The number of style texels per element */
-export const DRAPE_STYLE_TEXELS = 4;
+export const DRAPE_STYLE_TEXELS = 5;
 /**
  * The index of the texel the selection highlight uses within the style table
  *
  * 0 = fill, 1 = stroke, 2 = specifications (width, kind, source, reference zoom), 3 =
- * selection. The selection alone is put in a separate texel so that the index (the binning)
+ * selection, 4 = the dash pattern (`DRAPE_DASH_TEXEL`). The selection alone is put in a separate texel so that the index (the binning)
  * need not be touched at all when the selection changes. Mixing it into the same texel as the
  * color or the width would mean rebuilding the other values too on every rewrite.
  */
 export const DRAPE_SELECTION_TEXEL = 3;
+/**
+ * The index of the texel of the dash pattern within the style table
+ *
+ * (a, b, c, pixel ratio): the coefficients of the pattern (`DrapeDash` in `binning.ts`) and the
+ * physical pixels of the width per CSS pixel. A pixel ratio of 0 marks a solid outline.
+ */
+export const DRAPE_DASH_TEXEL = 4;
 /** The upper bound on the tiles retained (beyond it, those outside the view are dropped and
  * the arrays are repacked) */
 const MAX_CACHED_TILES = 96;
@@ -43,6 +50,13 @@ export class DrapePackBuilder {
             writable: true,
             value: new Float32Array(4 * 4096)
         });
+        /** Where each edge starts along its path (one number per edge, in step with `edges`) */
+        Object.defineProperty(this, "edgeStarts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Float32Array(4096)
+        });
         Object.defineProperty(this, "edgeCount", {
             enumerable: true,
             configurable: true,
@@ -125,6 +139,14 @@ export class DrapePackBuilder {
             styles[at + 9] = element.kind;
             styles[at + 10] = element.source;
             styles[at + 11] = element.widthZoom;
+            const dash = element.dash;
+            if (dash) {
+                const dashAt = at + DRAPE_DASH_TEXEL * 4;
+                styles[dashAt] = dash.a;
+                styles[dashAt + 1] = dash.b;
+                styles[dashAt + 2] = dash.c;
+                styles[dashAt + 3] = dash.pixelRatio;
+            }
         }
         this.styles = styles;
         this.elementCount = elements.length;
@@ -167,6 +189,8 @@ export class DrapePackBuilder {
         const edgeTexels = bins.edges.length / 4;
         this.edges = ensureCapacity(this.edges, (this.edgeCount + edgeTexels) * 4);
         this.edges.set(bins.edges, edgeBase * 4);
+        this.edgeStarts = ensureCapacity(this.edgeStarts, this.edgeCount + edgeTexels);
+        this.edgeStarts.set(bins.edgeStarts, edgeBase);
         this.edgeCount += edgeTexels;
         const runTexels = bins.runs.length / 4;
         this.runs = ensureCapacity(this.runs, (this.runCount + runTexels) * 4);

package/dist/view/terrain/drape/binning.d.ts

@@ -109,6 +109,26 @@ export declare function drapeCellWorkBudget(tileCount: number): number;
 export declare const DRAPE_LOD_TRIGGER = 16000;
 /** The color (0..1, with the opacity already folded in) */
 export type DrapeColor = readonly [number, number, number, number];
+/**
+ * The dash pattern of an outline that is not solid
+ *
+ * The coefficients are those of `DASH_COEFFICIENTS` in `view/renderers/line/dash.ts`: the shader
+ * works the dash and the gap out of the width the line has in the frame, with the same formulas
+ * as the subdividing path.
+ */
+export interface DrapeDash {
+    /** The shortest dash (CSS px) */
+    readonly a: number;
+    /** The dash per pixel of width */
+    readonly b: number;
+    /** The gap per pixel of width */
+    readonly c: number;
+    /**
+     * The physical pixels of `strokeWidthPx` per CSS pixel (the pixel ratio the width was
+     * resolved with). The pattern is measured in CSS pixels, so the shader divides it back out
+     */
+    readonly pixelRatio: number;
+}
 /**
  * An element handed to the analytic drape (a feature of the Store and a feature of a
  * dataset have the same shape)
@@ -131,6 +151,13 @@ export interface DrapeElement {
     readonly stroke: DrapeColor;
     /** The width of the outline (physical pixels). 0 means the outline is not drawn */
     readonly strokeWidthPx: number;
+    /**
+     * The dash pattern of the outline (absent or null for a solid outline)
+     *
+     * Only an element with a pattern has the lengths along its paths worked out and binned next
+     * to its edges (`TileBins.edgeStarts`).
+     */
+    readonly dash?: DrapeDash | null;
     /**
      * The origin of the coefficients (0 = the Store, 1 and above = datasets)
      *
@@ -201,6 +228,11 @@ export interface TileBins {
     readonly runs: Float32Array;
     /** (x0, y0, x1, y1) per edge. In-tile 0..1 coordinates */
     readonly edges: Float32Array;
+    /**
+     * Where each edge starts along its path, one per edge (Mercator units, the 0..1 world; not
+     * in-tile). 0 for an edge of an element without a dash pattern
+     */
+    readonly edgeStarts: Float32Array;
     /** Whether a limit was exceeded (if it was, the caller degrades) */
     readonly overflow: boolean;
     /** The number of cells truncated for exceeding the budget (a local degradation. Diagnostic) */

package/dist/view/terrain/drape/binning.js

@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { DRAPE_BLOCK_EDGES, drapeQuantizedGeometry } from './geometry.js';
+import { DRAPE_BLOCK_EDGES, drapePathStarts, drapeQuantizedGeometry } from './geometry.js';
 /** The minimum number of divisions of the grid (per side) */
 export const DRAPE_MIN_CELLS = 8;
 /** The maximum number of divisions of the grid (per side) */
@@ -245,6 +245,7 @@ function emptyBins(grid, edgeEstimate, overflow) {
         cells: new Int32Array(grid * grid * 2),
         runs: new Float32Array(0),
         edges: new Float32Array(0),
+        edgeStarts: new Float32Array(0),
         overflow,
         truncatedCells: 0,
         cellWork: 0,
@@ -264,6 +265,8 @@ function assembleBins(elements, picked, tile, scale, grid, zoom) {
     const cells = new Int32Array(cellCount * 2);
     /** The edges in in-tile coordinates (four numbers per edge). Stacked across elements */
     const edgeXY = [];
+    /** Where each edge starts along its path (one number per edge) */
+    const edgeS = [];
     /** The runs per cell. Triples of (elementIndex, inside, edgeListIndex) laid out in a row */
     const cellRuns = new Array(cellCount);
     /** The lists of edge indices that the runs point to */
@@ -299,8 +302,9 @@ function assembleBins(elements, picked, tile, scale, grid, zoom) {
         scratch.clear();
         touchedRows.length = 0;
         rowTouched.fill(0);
+        const dashed = element.dash != null;
         for (const path of picked.geometries[p].paths) {
-            scanPath(path, element.kind, tileX, tileY, scale, margin, grid, cellSize, edgeXY, scratch, rowDiff, rowTouched, touchedRows);
+            scanPath(path, element.kind, tileX, tileY, scale, margin, grid, cellSize, { xy: edgeXY, starts: edgeS }, dashed ? drapePathStarts(path) : null, scratch, rowDiff, rowTouched, touchedRows);
         }
         // Turn the cells that are inside and the cells the edges touch into runs (they are stacked
         // in the order of the elements, so this comes out as the draw order)
@@ -328,6 +332,7 @@ function assembleBins(elements, picked, tile, scale, grid, zoom) {
     // Repacking (laid out in the order cell -> run -> edge)
     const runs = [];
     const edges = [];
+    const edgeStarts = [];
     for (let c = 0; c < cellCount; c++) {
         const list = cellRuns[c];
         cells[c * 2] = runs.length / 4;
@@ -352,6 +357,7 @@ function assembleBins(elements, picked, tile, scale, grid, zoom) {
                         break;
                     }
                     edges.push(edgeXY[at * 4], edgeXY[at * 4 + 1], edgeXY[at * 4 + 2], edgeXY[at * 4 + 3]);
+                    edgeStarts.push(edgeS[at]);
                     edgeCount++;
                 }
             }
@@ -371,6 +377,7 @@ function assembleBins(elements, picked, tile, scale, grid, zoom) {
         cells,
         runs: new Float32Array(runs),
         edges: new Float32Array(edges),
+        edgeStarts: new Float32Array(edgeStarts),
         overflow: false,
         truncatedCells,
         cellWork: (runs.length / 4 + edges.length / 4) / cellCount,
@@ -430,7 +437,7 @@ function pickElements(elements, candidates, tile, scale, quantizeLevel, zoom) {
  * right of the origin, so an edge outside the tile on the right also counts (it becomes a flip
  * of a whole row). An edge outside on the left flips nothing, so it can be dropped.
  */
-function scanPath(path, kind, tileX, tileY, scale, margin, grid, cellSize, edgeXY, scratch, rowDiff, rowTouched, touchedRows) {
+function scanPath(path, kind, tileX, tileY, scale, margin, grid, cellSize, out, starts, scratch, rowDiff, rowTouched, touchedRows) {
     const xy = path.xy;
     const vertexCount = xy.length / 2;
     const blockCount = path.blocks.length / 4;
@@ -458,7 +465,7 @@ function scanPath(path, kind, tileX, tileY, scale, margin, grid, cellSize, edgeX
             if (kind === 0) {
                 accumulateInside(x0, y0, x1, y1, grid, cellSize, rowDiff, rowTouched, touchedRows);
             }
-            scatterEdge(x0, y0, x1, y1, margin, grid, cellSize, edgeXY, scratch);
+            scatterEdge(x0, y0, x1, y1, starts ? starts[e] : 0, margin, grid, cellSize, out, scratch);
         }
     }
 }
@@ -511,7 +518,7 @@ function accumulateInside(x0, y0, x1, y1, grid, cellSize, rowDiff, rowTouched, t
  * that crosses the tile diagonally. The segment is cut per row to obtain the range of x, and
  * only the columns in that range are touched.
  */
-function scatterEdge(x0, y0, x1, y1, margin, grid, cellSize, edgeXY, scratch) {
+function scatterEdge(x0, y0, x1, y1, start, margin, grid, cellSize, out, scratch) {
     const exLo = Math.min(x0, x1) - margin;
     const exHi = Math.max(x0, x1) + margin;
     const eyLo = Math.min(y0, y1) - margin;
@@ -526,8 +533,9 @@ function scatterEdge(x0, y0, x1, y1, margin, grid, cellSize, edgeXY, scratch) {
         jHi = grid - 1;
     if (jLo > jHi)
         return;
-    const at = edgeXY.length / 4;
-    edgeXY.push(x0, y0, x1, y1);
+    const at = out.starts.length;
+    out.xy.push(x0, y0, x1, y1);
+    out.starts.push(start);
     const horizontal = y0 === y1;
     const inv = horizontal ? 0 : 1 / (y1 - y0);
     for (let j = jLo; j <= jHi; j++) {

package/dist/view/terrain/drape/geometry.d.ts

@@ -29,6 +29,20 @@ export interface DrapeGeometryPath {
     readonly closed: boolean;
     /** The bounding box of each block (minX, minY, maxX, maxY) */
     readonly blocks: Float64Array;
+    /**
+     * Where the vertices of a quantized path came from (absent on a path of the original
+     * geometry)
+     *
+     * A dashed line keeps the pattern of the original path on a coarse tile: the length along
+     * the path at a vertex is that of the original vertex it was rounded from
+     * ({@link drapePathStarts}).
+     */
+    readonly origin?: DrapePathOrigin;
+}
+/** The original path of a quantized path, and the original vertex of each of its vertices */
+export interface DrapePathOrigin {
+    readonly path: DrapeGeometryPath;
+    readonly vertices: Int32Array;
 }
 /** The geometry of a single feature */
 export interface DrapeGeometry {
@@ -93,3 +107,16 @@ export declare function buildDrapeGeometry(paths: ReadonlyArray<ReadonlyArray<Co
  * @param level The fineness of the grid. The grid spacing is 2^-level (in Mercator units)
  */
 export declare function drapeQuantizedGeometry(geometry: DrapeGeometry, level: number): DrapeGeometry;
+/**
+ * The length along a path from its first vertex to each of its vertices (Mercator units)
+ *
+ * Entry `e` is where edge `e` starts on the path, so a dashed line can place its pattern on
+ * every edge on its own (on a closed path the last edge, back to the first vertex, starts at
+ * the last vertex). It is built only for dashed lines and polygons with a dashed outline, the
+ * first time a tile needs it, so a solid line pays nothing for it.
+ *
+ * A quantized path takes the lengths of the original vertices it was rounded from, so the
+ * pattern on a coarse tile stays in step with the pattern on the fine tiles next to it. A
+ * square standing in for a collapsed polygon has no original and measures itself.
+ */
+export declare function drapePathStarts(path: DrapeGeometryPath): Float64Array;

package/dist/view/terrain/drape/geometry.js

@@ -103,15 +103,18 @@ export function buildDrapeGeometry(paths, closed) {
 }
 /**
  * Assembles the geometry from paths in Mercator coordinates
+ *
+ * @param origins The origin of each path, for quantized geometry (null for a path that has none)
  */
-function buildFromMercatorPaths(paths, closed) {
+function buildFromMercatorPaths(paths, closed, origins) {
     const out = [];
     let minX = Number.POSITIVE_INFINITY;
     let minY = Number.POSITIVE_INFINITY;
     let maxX = Number.NEGATIVE_INFINITY;
     let maxY = Number.NEGATIVE_INFINITY;
     let edgeCount = 0;
-    for (const xy of paths) {
+    for (let p = 0; p < paths.length; p++) {
+        const xy = paths[p];
         const count = xy.length / 2;
         if (count < 2)
             continue;
@@ -156,7 +159,10 @@ function buildFromMercatorPaths(paths, closed) {
             blocks[b * 4 + 2] = bx1;
             blocks[b * 4 + 3] = by1;
         }
-        out.push({ xy, edgeCount: edges, closed, blocks });
+        const origin = origins?.[p];
+        out.push(origin
+            ? { xy, edgeCount: edges, closed, blocks, origin }
+            : { xy, edgeCount: edges, closed, blocks });
         edgeCount += edges;
     }
     if (out.length === 0) {
@@ -193,10 +199,13 @@ export function drapeQuantizedGeometry(geometry, level) {
         return hit;
     const step = 2 ** -level;
     const paths = [];
+    const origins = [];
     for (const path of geometry.paths) {
         const source = path.xy;
         const count = source.length / 2;
         const out = [];
+        /** The original vertex of each vertex kept */
+        const kept = [];
         let lastX = Number.NaN;
         let lastY = Number.NaN;
         for (let i = 0; i < count; i++) {
@@ -205,6 +214,7 @@ export function drapeQuantizedGeometry(geometry, level) {
             if (qx === lastX && qy === lastY)
                 continue;
             out.push(qx, qy);
+            kept.push(i);
             lastX = qx;
             lastY = qy;
         }
@@ -213,16 +223,20 @@ export function drapeQuantizedGeometry(geometry, level) {
             // dropped
             while (out.length >= 6 && out[out.length - 2] === out[0] && out[out.length - 1] === out[1]) {
                 out.length -= 2;
+                kept.length -= 1;
             }
             if (out.length / 2 < 3) {
                 // A polygon collapsed by the rounding is replaced with a square of one grid cell.
                 // Dropping it would leave the fill missing just there and produce spotty white
                 // blotches (confirmed hands-on, the city center at z8.7; it was pronounced in areas
                 // where small polygons at the chome level line up).
-                // The error stays within one grid cell (1/256 of a tile = about 2 pixels on screen)
+                // The error stays within one grid cell (1/256 of a tile = about 2 pixels on screen).
+                // It has no origin: a dash pattern on it would be smaller than a pixel anyway
                 const box = squareAt(source, step);
-                if (box)
+                if (box) {
                     paths.push(box);
+                    origins.push(null);
+                }
                 continue;
             }
         }
@@ -230,8 +244,9 @@ export function drapeQuantizedGeometry(geometry, level) {
             continue;
         }
         paths.push(new Float64Array(out));
+        origins.push({ path, vertices: new Int32Array(kept) });
     }
-    const built = buildFromMercatorPaths(paths, geometry.paths[0]?.closed ?? true);
+    const built = buildFromMercatorPaths(paths, geometry.paths[0]?.closed ?? true, origins);
     cache.set(level, built);
     return built;
 }
@@ -258,3 +273,39 @@ function squareAt(source, step) {
     const cy = Math.round(sy / count / step) * step;
     return new Float64Array([cx, cy, cx + step, cy, cx + step, cy + step, cx, cy + step]);
 }
+/** The lengths along the paths (path -> the length at each vertex) */
+const startsCache = new WeakMap();
+/**
+ * The length along a path from its first vertex to each of its vertices (Mercator units)
+ *
+ * Entry `e` is where edge `e` starts on the path, so a dashed line can place its pattern on
+ * every edge on its own (on a closed path the last edge, back to the first vertex, starts at
+ * the last vertex). It is built only for dashed lines and polygons with a dashed outline, the
+ * first time a tile needs it, so a solid line pays nothing for it.
+ *
+ * A quantized path takes the lengths of the original vertices it was rounded from, so the
+ * pattern on a coarse tile stays in step with the pattern on the fine tiles next to it. A
+ * square standing in for a collapsed polygon has no original and measures itself.
+ */
+export function drapePathStarts(path) {
+    const hit = startsCache.get(path);
+    if (hit)
+        return hit;
+    const count = path.xy.length / 2;
+    const starts = new Float64Array(count);
+    if (path.origin) {
+        const original = drapePathStarts(path.origin.path);
+        for (let i = 0; i < count; i++)
+            starts[i] = original[path.origin.vertices[i]];
+    }
+    else {
+        const xy = path.xy;
+        let total = 0;
+        for (let i = 1; i < count; i++) {
+            total += Math.hypot(xy[i * 2] - xy[i * 2 - 2], xy[i * 2 + 1] - xy[i * 2 - 1]);
+            starts[i] = total;
+        }
+    }
+    startsCache.set(path, starts);
+    return starts;
+}

package/dist/view/terrain/drape/pass.d.ts

@@ -25,8 +25,8 @@ export declare const DRAPE_MAX_VERTICES = 4000000;
 export interface DrapeCollectResult {
     /** The elements in draw order */
     readonly elements: DrapeElement[];
-    /** The IDs of the Store features that cannot be put on the drape (points, images, dashed
-     * lines and so on) */
+    /** The IDs of the Store features that cannot be put on the drape (points, images and so
+     * on) */
     readonly excluded: Set<string>;
     /** The breaks in the stacking order (the positions of the images; dataset order =
      * ascending afterElements) */
@@ -98,8 +98,13 @@ export interface DrapeDatasetSource {
  * It is not narrowed down by the view. Narrowing it down would change the element order every
  * time the view moves and require rebuilding the tile indices (the narrowing down within a
  * tile is done by `binTile` using the bounding boxes).
+ *
+ * @param pixelRatio The rendering pixel ratio, for widths fixed in screen pixels (the rendering
+ *   scale included; `resolvePixelRatio`)
+ * @param contentPixelRatio The rendering pixel ratio for widths that follow the zoom (the
+ *   rendering scale not applied; `resolveContentPixelRatio`)
  */
-export declare function collectDrapeElements(store: Store, styles: RetainedStyleResolver, pixelRatio: number, datasets: readonly DrapeDatasetSource[]): DrapeCollectResult;
+export declare function collectDrapeElements(store: Store, styles: RetainedStyleResolver, pixelRatio: number, contentPixelRatio: number, datasets: readonly DrapeDatasetSource[]): DrapeCollectResult;
 /**
  * Whether the analytic drape may be used
  *