@sakuzu/maplibre-gl-draw 2.0.0 → 2.1.1

package/dist/view/layer/drape-planner.d.ts

@@ -119,7 +119,10 @@ export interface DrapeFrameInput {
     resolveStyles: () => RetainedStyleResolver;
     /** The terrain of the map (null when the terrain state of the frame is inactive) */
     mapTerrain: MapTerrain;
+    /** The rendering pixel ratio, for widths fixed in screen pixels (the rendering scale included) */
     dpr: number;
+    /** The rendering pixel ratio for widths that follow the zoom (the rendering scale not applied) */
+    contentDpr: number;
     /** The style zoom (what the rendering reads) */
     zoom: number;
     /** The real zoom of the camera (the band is decided with it) */

package/dist/view/layer/drape-planner.js

@@ -281,7 +281,7 @@ export class DrapePlanner {
      */
     planFrame(input) {
         const { terrain } = this.deps;
-        const { mapTerrain, dpr, zoom, rawZoom } = input;
+        const { mapTerrain, dpr, contentDpr, zoom, rawZoom } = input;
         let drapeUsable = false;
         this.pendingWork = false;
         // The analytic drape is used even in a wide band when building the index is light. Cutting
@@ -297,10 +297,10 @@ export class DrapePlanner {
         // cost has to be known first). The collected result is folded behind a key, so there is no
         // cost as long as the contents do not change
         if (mapTerrain !== null)
-            this.collect(input.resolveStyles, dpr, zoom);
+            this.collect(input.resolveStyles, dpr, contentDpr, zoom);
         const analyticBand = rawZoom > TERRAIN_ANALYTIC_MIN_ZOOM || this.lightEnough;
         if (mapTerrain !== null && analyticBand) {
-            drapeUsable = this.prepare(input.gl, mapTerrain, input.resolveStyles, dpr, zoom);
+            drapeUsable = this.prepare(input.gl, mapTerrain, input.resolveStyles, dpr, contentDpr, zoom);
         }
         else if (mapTerrain !== null) {
             // A wide band is handled by the vertex displacement path (no index is built either)
@@ -447,6 +447,7 @@ export class DrapePlanner {
                             cellOffset: item.plan.cellOffset,
                             grid: item.plan.grid,
                             groundMeters: item.plan.groundMeters,
+                            tileZ: item.plan.tile.z,
                             edges,
                         },
                         projection: item.projection,
@@ -500,12 +501,13 @@ export class DrapePlanner {
      * "polygons are not drawn at low zooms"). The collected result is folded behind a key, so from
      * the second time on nothing happens as long as the contents do not change.
      */
-    collect(resolveStyles, dpr, zoom) {
+    collect(resolveStyles, dpr, contentDpr, zoom) {
         const { store, datasets: manager } = this.deps;
         const datasets = manager?.listInternal() ?? [];
         const key = [
             this.revision,
             dpr,
+            contentDpr,
             marginZoom(zoom),
             store.getLayerOrder().join('/'),
             datasets.map((c) => `${c.id}:${c.drapeRevision}:${c.visible ? 1 : 0}:${c.order}`).join(','),
@@ -513,7 +515,7 @@ export class DrapePlanner {
         ].join('|');
         let collected = this.collected;
         if (key !== this.collectKey || !collected) {
-            collected = collectDrapeElements(store, resolveStyles(), dpr, datasets);
+            collected = collectDrapeElements(store, resolveStyles(), dpr, contentDpr, datasets);
             this.collectKey = key;
             this.collected = collected;
             this.lightEnough = collected.edgeCount <= DRAPE_WIDE_EDGE_BUDGET;
@@ -529,14 +531,14 @@ export class DrapePlanner {
      * not collected again just because the view moved (collecting them again would mean rebuilding
      * the whole index).
      */
-    prepare(gl, terrain, resolveStyles, dpr, zoom) {
+    prepare(gl, terrain, resolveStyles, dpr, contentDpr, zoom) {
         const { map, datasets: manager } = this.deps;
         const context = this.deps.terrain;
         const tiles = getRenderableTerrainTiles(terrain);
         if (tiles.length === 0)
             return false;
         const datasets = manager?.listInternal() ?? [];
-        const collected = this.collect(resolveStyles, dpr, zoom);
+        const collected = this.collect(resolveStyles, dpr, contentDpr, zoom);
         // The factors per source (which follow the zoom) are rewritten every frame, because baking
         // them into the elements would mean rebuilding the index on every zoom movement
         const drapeSourceFactors = this.sourceFactors;

package/dist/view/layer/frame-render.js

@@ -107,9 +107,8 @@ function drawDrapeSegment(deps, f, index) {
         drawSegment(paintCursor, to, last);
     }
     f.restoreBlendState();
-    // Back to the depth state of the layer rendering. What the drape could not paint (dashed
-    // lines, polygons with a dashed outline, the geometry being drawn, the features of
-    // extensions) is drawn next, by the vertex displacement path, and the terrain must hide it
+    // Back to the depth state of the layer rendering. What the drape could not paint (the
+    // geometry being drawn, the features of extensions) is drawn next, by the vertex displacement path, and the terrain must hide it
     // as it does in a frame without the drape. Symbols switch the depth test off themselves.
     applySegmentDepthState(gl, deps.terrainContext, f);
 }

package/dist/view/layer/frame-state.d.ts

@@ -111,7 +111,10 @@ export interface FrameBuildInput {
     zoom: number;
     /** The real zoom of the camera */
     rawZoom: number;
+    /** The rendering pixel ratio, for sizes fixed in screen pixels (the rendering scale included) */
     dpr: number;
+    /** The rendering pixel ratio for sizes that follow the zoom (the rendering scale not applied) */
+    contentDpr: number;
     /** The terrain state of the frame (already set on the terrain context) */
     terrainState: TerrainRenderState;
     /** Whether the retained batches of the Store rendering exist */

package/dist/view/layer/frame-state.js

@@ -139,7 +139,7 @@ function sameCameraPosition(a, b) {
  */
 export function buildFrameState(input) {
     const { gl, renderers: r, map, store, terrainContext, drape, renderOptions } = input;
-    const { zoom, rawZoom, dpr, terrainState } = input;
+    const { zoom, rawZoom, dpr, contentDpr, terrainState } = input;
     const { shaderData, defaultProjectionData } = renderOptions;
     const mapTerrain = terrainState.active ? getMapTerrain(map) : null;
     // Shader initialization
@@ -193,6 +193,7 @@ export function buildFrameState(input) {
         resolveStyles: () => r.batchManager.getRetainedRenderers()?.styles ?? r.featureDrawer,
         mapTerrain,
         dpr,
+        contentDpr,
         zoom,
         rawZoom,
     });

package/dist/view/layer/gl-state.d.ts

@@ -34,9 +34,8 @@ export declare function applySegmentGlState(gl: WebGL2RenderingContext, terrainC
  * `applySegmentGlState` sets it at the start of a slot, and the drape of the segment, which
  * changes the depth function and the offset, hands it back with this before the layers are
  * drawn. The layers are therefore drawn in one depth state whether or not the drape was used.
- * What the drape cannot paint (dashed lines, polygons with a dashed outline, the geometry being
- * drawn, the features of extensions, the datasets not handed over to it) is
- * drawn after it by the vertex displacement path and must be hidden by the terrain in the same
+ * What the drape cannot paint (the geometry being drawn, the features of extensions, the datasets
+ * not handed over to it) is drawn after it by the vertex displacement path and must be hidden by the terrain in the same
  * way. Symbols switch the depth test off themselves (`drawBillboardsWithoutDepth`).
  */
 export declare function applySegmentDepthState(gl: WebGL2RenderingContext, terrainContext: TerrainContext, f: Pick<SegmentGlFrame, 'terrainState' | 'wideFallback'>): void;

package/dist/view/layer/gl-state.js

@@ -33,9 +33,8 @@ export function applySegmentGlState(gl, terrainContext, f) {
  * `applySegmentGlState` sets it at the start of a slot, and the drape of the segment, which
  * changes the depth function and the offset, hands it back with this before the layers are
  * drawn. The layers are therefore drawn in one depth state whether or not the drape was used.
- * What the drape cannot paint (dashed lines, polygons with a dashed outline, the geometry being
- * drawn, the features of extensions, the datasets not handed over to it) is
- * drawn after it by the vertex displacement path and must be hidden by the terrain in the same
+ * What the drape cannot paint (the geometry being drawn, the features of extensions, the datasets
+ * not handed over to it) is drawn after it by the vertex displacement path and must be hidden by the terrain in the same
  * way. Symbols switch the depth test off themselves (`drawBillboardsWithoutDepth`).
  */
 export function applySegmentDepthState(gl, terrainContext, f) {

package/dist/view/renderers/line/dash.d.ts

@@ -18,6 +18,33 @@ export interface DashSegment {
  * @returns The dashes, in order along the line. An empty array for fewer than 2 positions
  */
 export declare function splitIntoDashes(coords: Coordinate[], dashLength: number, gapLength: number, zoom: number): DashSegment[];
+/**
+ * The coefficients of a dash pattern
+ *
+ * The dash is `max(a, b * w)` and the gap `max(w + 1, c * w)` for a line `w` pixels wide (the
+ * smallest gap, `w + 1`, keeps the round caps of two dashes apart). This table is the one
+ * source of the patterns: the subdividing path computes them here on the CPU, and the analytic
+ * drape hands the same coefficients to its shader, which evaluates the same two formulas.
+ */
+export interface DashCoefficients {
+    /** The shortest dash (px) */
+    readonly a: number;
+    /** The dash per pixel of width */
+    readonly b: number;
+    /** The gap per pixel of width */
+    readonly c: number;
+}
+/**
+ * The coefficients of each line style that is not solid
+ *
+ * Dashed: dashes 4 times the width (12 px at least) and gaps twice the width. Dotted: short,
+ * nearly round dots and gaps about the width.
+ */
+export declare const DASH_COEFFICIENTS: Readonly<Record<'dashed' | 'dotted', DashCoefficients>>;
+/**
+ * The coefficients of a line style, or null for a solid line
+ */
+export declare function dashCoefficientsOf(lineStyle: 'solid' | 'dashed' | 'dotted'): DashCoefficients | null;
 /**
  * Returns the dash and gap lengths in px that suit a line style at a line width.
  *

package/dist/view/renderers/line/dash.js

@@ -126,6 +126,22 @@ export function splitIntoDashes(coords, dashLength, gapLength, zoom) {
     }
     return segments;
 }
+/**
+ * The coefficients of each line style that is not solid
+ *
+ * Dashed: dashes 4 times the width (12 px at least) and gaps twice the width. Dotted: short,
+ * nearly round dots and gaps about the width.
+ */
+export const DASH_COEFFICIENTS = {
+    dashed: { a: 12, b: 4, c: 2 },
+    dotted: { a: 1, b: 0.5, c: 1.2 },
+};
+/**
+ * The coefficients of a line style, or null for a solid line
+ */
+export function dashCoefficientsOf(lineStyle) {
+    return lineStyle === 'dashed' || lineStyle === 'dotted' ? DASH_COEFFICIENTS[lineStyle] : null;
+}
 /**
  * Returns the dash and gap lengths in px that suit a line style at a line width.
  *
@@ -137,16 +153,11 @@ export function splitIntoDashes(coords, dashLength, gapLength, zoom) {
  * @returns [dashLength, gapLength], or null (for a solid line)
  */
 export function getStrokeDashPattern(lineStyle, strokeWidth = 2) {
-    // The minimum gap at which round caps do not overlap
-    const minGap = strokeWidth + 1;
-    switch (lineStyle) {
-        case 'dashed':
-            // Dashed: longer dashes (4x the line width), moderate gaps (2x the line width)
-            return [Math.max(12, strokeWidth * 4), Math.max(minGap, strokeWidth * 2)];
-        case 'dotted':
-            // Dotted: short dots (nearly round), short gaps (about the line width)
-            return [Math.max(1, strokeWidth * 0.5), Math.max(minGap, strokeWidth * 1.2)];
-        default:
-            return null;
-    }
+    const coefficients = dashCoefficientsOf(lineStyle);
+    if (!coefficients)
+        return null;
+    return [
+        Math.max(coefficients.a, coefficients.b * strokeWidth),
+        Math.max(strokeWidth + 1, coefficients.c * strokeWidth),
+    ];
 }

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;
+}