isard 1.2.0 → 1.4.0

package/dist/workers/basemap.worker.js

@@ -2,575 +2,45 @@
  * Worker of the vector basemaps: fetches and decodes vector tiles (kept for the tiles that share them), draws their
  * fills, lines and circles with a MapLibre style into images (Canvas 2D, off the main thread) for the raster pool,
  * with the style's raster layers under them, and lists the label candidates of the style's symbol layers (their texts
- * and icons) for the page to shape and place. Extrusions are drawn flat, as fills. It also decodes the altitudes of PNG relief tiles and
- * draws the rasters reprojected from other grids (planned by the page), for the map's other layers.
+ * and icons) for the page to shape and place. Extrusions are drawn flat, as fills. Or it cuts the fills, lines and
+ * buildings of a tile into geometry for the engine to draw as such (`vectors`), with their style per feature (a
+ * building's color, height and base height). It also decodes the
+ * altitudes of PNG relief tiles and draws the rasters reprojected from other grids (planned by the page), for the
+ * map's other layers.
  *
  * A raster tile of level z covers 256 CSS pixels at map zoom z - 1 (MapLibre's 512 px convention): it is drawn from
  * the vector tile of level z - 1 (or the deepest one the source has), with the style at that zoom.
+ *
+ * This module answers the page's messages; the jobs are in `./basemap/`: the state they share (`tiles.ts`), the
+ * images (`raster.ts`), the labels (`labels.ts`), the geometry (`geometry.ts`), the trees (`trees.ts`).
  */
-import { decode } from "../basemap/mvt.js";
-import { pmtilesTile } from "../basemap/pmtiles.js";
 import { resampler } from "../basemap/resample.js";
 import { fetchHeights } from "../basemap/terrain.js";
-import { color, context, css, evaluate, filter, isExpression, isFeatureDependent, labelFont, text, zoomStops, } from "../basemap/vectorstyle.js";
+import { vectorKind } from "../basemap/vectorstyle.js";
 import { setHeaderRules, withHeaders } from "../engine/requests.js";
-import { latitude, longitude } from "../util/geo.js";
-import { Lru } from "../util/lru.js";
-/** An image of the sprites and its sheet */
-const spriteIcon = (r, name) => {
-    const sprite = r.sprites.find((sp) => Boolean(sp.icons[name]));
-    const icon = sprite?.icons[name];
-    return sprite && icon ? { icon, image: sprite.image } : undefined;
-};
-const renderers = new Map();
-/** Decoded tiles kept by the pool, shared among its workers (a vector tile always goes to the same worker): some
- * 2 MB each */
-const CACHE = 96;
-/** Decoded tiles by URL; this worker's share of them, set by the renderers */
-const cache = new Lru(CACHE);
-/** The decoded tiles one worker of `workers` keeps */
-export const cacheShare = (workers) => {
-    return Math.max(16, Math.ceil(CACHE / Math.max(1, workers)));
-};
-/** Requests in progress, and those of them aborted (both forgotten once answered) */
-const active = new Set();
-const aborted = new Set();
+import { decodeGrids } from "../grid-module.js";
+import { polygons, tess, tessellate, tessellator, vectors } from "./basemap/geometry.js";
+import { labels } from "./basemap/labels.js";
+import { render } from "./basemap/raster.js";
+import { streetFlowOf } from "./basemap/street.js";
+import { aborted, active, cache, cacheShare, renderers } from "./basemap/tiles.js";
+import { trees } from "./basemap/trees.js";
 /** The signals of the relief and reprojection requests in progress, aborted with them */
 const controllers = new Map();
 /** Where this worker reads the colors of the relief tiles back */
 const heightsSurface = {};
 /** The reprojected rasters' source images this worker keeps, shared by every source */
 const reprojection = resampler();
-/** Images of the raster sources by URL. An image dropped is freed once settled, after the renders that awaited it have
- * drawn it (they draw without awaiting again) */
-const images = new Lru(64, (evicted) => evicted.then((bitmap) => setTimeout(() => bitmap?.close(), 0), () => undefined));
-/** An image of a raster source (shared by every renderer); undefined where the source has none */
-const image = (url, priority = 'auto') => {
-    const hit = images.get(url);
-    if (hit)
-        return hit;
-    const pending = (async () => {
-        // A tile of a PMTiles archive (`pmtiles://…/{z}/{x}/{y}`)
-        const archived = pmtilesTile(url);
-        if (archived) {
-            const bytes = await archived;
-            return bytes && createImageBitmap(new Blob([bytes]));
-        }
-        const init = { priority };
-        const response = await fetch(url, withHeaders(url, init));
-        if (response.status === 404 || response.status === 204)
-            return undefined;
-        if (!response.ok)
-            throw new Error(`${url}: ${response.status}`);
-        return createImageBitmap(await response.blob());
-    })();
-    pending.catch(() => images.delete(url));
-    images.set(url, pending);
-    return pending;
-};
-/** A vector tile, decoded (shared by every renderer of its URL); the first request's priority fetches it */
-const tile = (url, priority = 'auto') => {
-    const hit = cache.get(url);
-    if (hit)
-        return hit;
-    const pending = (async () => {
-        // A tile of a PMTiles archive, ungzipped by the reader
-        const archived = pmtilesTile(url);
-        if (archived) {
-            const bytes = await archived;
-            return bytes && decode(bytes);
-        }
-        for (let attempt = 0;; attempt += 1) {
-            const init = { priority };
-            const response = await fetch(url, withHeaders(url, init));
-            if (response.status === 404 || response.status === 204)
-                return undefined;
-            if (response.ok) {
-                // Every layer: renderers of other subsets share the tile
-                return decode(new Uint8Array(await response.arrayBuffer()));
-            }
-            if (attempt >= 2)
-                throw new Error(`${url}: ${response.status}`);
-            await new Promise((r) => setTimeout(r, 400 * (attempt + 1)));
-        }
-    })();
-    pending.catch(() => cache.delete(url));
-    cache.set(url, pending);
-    return pending;
-};
-/** The vector tile to draw a raster tile from, and where the raster tile lies in it (tile units) */
-const source = (r, z, x, y) => {
-    const vz = Math.max(0, Math.min(z - 1, r.maxzoom));
-    const d = z - vz;
-    const n = 2 ** Math.max(0, d);
-    const [vx, vy] = d >= 0 ? [Math.floor(x / n), Math.floor(y / n)] : [x, y];
-    const url = r.tiles.replace('{z}', String(vz)).replace('{x}', String(vx)).replace('{y}', String(vy));
-    // Fraction of the vector tile covered, and the offset in it
-    const part = 1 / n;
-    return { url, vz, vx, vy, part, ox: (x % n) * part, oy: (y % n) * part };
-};
-const value = (layer, group, key, ctx, fallback) => {
-    const v = layer[group]?.[key];
-    if (v === undefined)
-        return fallback;
-    // An array that is not an expression is a literal value (`text-font`, `text-offset`, `line-dasharray`)
-    const out = Array.isArray(v) && !isExpression(v) ? v : evaluate(v, ctx);
-    return out === undefined || out === null ? fallback : out;
-};
-/** A color with an opacity, for the canvas */
-const paint = (c, opacity) => {
-    const rgba = color(c) ?? [0, 0, 0, 1];
-    return css([rgba[0], rgba[1], rgba[2], rgba[3] * opacity]);
-};
-const shown = (layer, zoom) => {
-    if (layer.layout?.visibility === 'none')
-        return false;
-    return zoom >= (layer.minzoom ?? 0) && zoom < (layer.maxzoom ?? 24);
-};
-const LINE_CAPS = new Set(['butt', 'round', 'square']);
-const LINE_JOINS = new Set(['bevel', 'miter', 'round']);
-const isLineCap = (value) => LINE_CAPS.has(value);
-const isLineJoin = (value) => LINE_JOINS.has(value);
-/** A style's `line-cap` for the canvas: `butt` if it is none */
-const lineCap = (value) => (isLineCap(value) ? value : 'butt');
-/** A style's `line-join` for the canvas: `miter` if it is none */
-const lineJoin = (value) => (isLineJoin(value) ? value : 'miter');
-/** The image of a fill pattern, cut from the sprite on first use */
-const patternImage = (r, name) => {
-    if (r.patterns.has(name))
-        return r.patterns.get(name);
-    const cut = () => {
-        const found = spriteIcon(r, name);
-        if (!found || !(found.icon.width > 0) || !(found.icon.height > 0))
-            return undefined;
-        const { icon } = found;
-        const canvas = new OffscreenCanvas(icon.width, icon.height);
-        canvas
-            .getContext('2d')
-            ?.drawImage(found.image, icon.x, icon.y, icon.width, icon.height, 0, 0, icon.width, icon.height);
-        return canvas;
-    };
-    const image = cut();
-    r.patterns.set(name, image);
-    return image;
-};
-/** Canvases free for the next tiles, by size: one per tile being drawn at most */
-const canvases = new Map();
-/** A blank canvas of `size` pixels and its context, from the free ones if any */
-const takeCanvas = (size) => {
-    const canvas = canvases.get(size)?.pop() ?? new OffscreenCanvas(size, size);
-    // A canvas on the CPU: its pixels are read back here, in the worker, not on the main thread at the upload
-    const g = canvas.getContext('2d', { willReadFrequently: true });
-    if (!g)
-        throw new Error('no 2D context');
-    // The state a former tile left
-    g.setTransform(1, 0, 0, 1, 0, 0);
-    g.globalAlpha = 1;
-    g.setLineDash([]);
-    g.clearRect(0, 0, size, size);
-    return { canvas, g };
-};
-const giveCanvas = (canvas) => {
-    const free = canvases.get(canvas.width) ?? [];
-    canvases.set(canvas.width, free);
-    if (free.length < 4)
-        free.push(canvas);
-};
-/**
- * The image of a drawn canvas, its alpha straight (the engine blends straight alpha). An opaque tile (a background
- * of full opacity, as a basemap's) is moved out of the canvas as it is, premultiplied and straight being the same
- * there; another one is read back unpremultiplied, copied
- */
-export const tileImage = (canvas, g, opaque) => {
-    if (opaque)
-        return Promise.resolve(canvas.transferToImageBitmap());
-    return createImageBitmap(g.getImageData(0, 0, canvas.width, canvas.height), { premultiplyAlpha: 'none' });
-};
-const render = async (r, z, x, y, size, id, priority) => {
-    const s = source(r, z, x, y);
-    const layers = await tile(s.url, priority);
-    if (aborted.has(id))
-        return undefined;
-    const { canvas, g } = takeCanvas(size);
-    try {
-        return await draw(r, s, layers, canvas, g, z, x, y, size, id, priority);
-    }
-    finally {
-        giveCanvas(canvas);
-    }
-};
-const draw = async (r, s, layers, canvas, g, z, x, y, size, id, priority) => {
-    const zoom = Math.max(0, z - 1);
-    // CSS pixels to canvas pixels: the tile is 256 CSS pixels across at its zoom
-    const px = size / 256;
-    let drawn = false;
-    /** A background of full opacity covers the tile: every pixel stays opaque */
-    let opaque = false;
-    for (const layer of r.layers) {
-        if (!shown(layer, zoom))
-            continue;
-        const zctx = { zoom, properties: {}, type: 'Unknown' };
-        if (layer.type === 'background') {
-            const fill = value(layer, 'paint', 'background-color', zctx, '#000');
-            const opacity = Number(value(layer, 'paint', 'background-opacity', zctx, 1));
-            g.fillStyle = paint(fill, opacity);
-            g.fillRect(0, 0, size, size);
-            if ((color(fill) ?? [0, 0, 0, 1])[3] * opacity >= 1)
-                opaque = true;
-            drawn = true;
-            continue;
-        }
-        if (layer.type === 'raster') {
-            const source = layer.source === undefined ? undefined : r.rasters[layer.source];
-            if (!source)
-                continue;
-            // The canvas covers the Web Mercator tile (z, x, y): a source tile of 512 px covers it from a level coarser
-            const rz = Math.max(0, Math.min(z - (source.tileSize >= 512 ? 1 : 0), source.maxzoom));
-            const n = 2 ** (z - rz);
-            const url = source.tiles
-                .replace('{z}', String(rz))
-                .replace('{x}', String(Math.floor(x / n)))
-                .replace('{y}', String(Math.floor(y / n)));
-            const picture = await image(url, priority).catch(() => undefined);
-            if (aborted.has(id))
-                return undefined;
-            if (!picture)
-                continue;
-            const [w, h] = [picture.width / n, picture.height / n];
-            g.globalAlpha = Number(value(layer, 'paint', 'raster-opacity', zctx, 1));
-            g.drawImage(picture, (x % n) * w, (y % n) * h, w, h, 0, 0, size, size);
-            g.globalAlpha = 1;
-            drawn = true;
-            continue;
-        }
-        const data = layers?.get(layer['source-layer'] ?? '');
-        if (!data)
-            continue;
-        // Tile units to canvas pixels
-        const k = size / (data.extent * s.part);
-        const [ox, oy] = [s.ox * data.extent, s.oy * data.extent];
-        const path = (f, close) => {
-            g.beginPath();
-            for (const line of f.geometry) {
-                for (let i = 0; i + 1 < line.length; i += 2) {
-                    const [lx, ly] = [((line[i] ?? 0) - ox) * k, ((line[i + 1] ?? 0) - oy) * k];
-                    if (i === 0)
-                        g.moveTo(lx, ly);
-                    else
-                        g.lineTo(lx, ly);
-                }
-                if (close)
-                    g.closePath();
-            }
-        };
-        // Values that only depend on the zoom are evaluated once for the layer
-        const dependent = new Map();
-        const get = (group, key, ctx, fallback) => {
-            const known = dependent.get(key);
-            const d = known ?? isFeatureDependent(layer[group]?.[key]);
-            if (known === undefined)
-                dependent.set(key, d);
-            return value(layer, group, key, d ? ctx : zctx, fallback);
-        };
-        for (const f of data.features) {
-            const ctx = context(f, zoom);
-            if (!filter(layer.filter, ctx))
-                continue;
-            if (layer.type === 'fill-extrusion' && f.type === 3) {
-                // Flat, seen from above: its color
-                path(f, true);
-                g.fillStyle = paint(get('paint', 'fill-extrusion-color', ctx, '#000'), Number(get('paint', 'fill-extrusion-opacity', ctx, 1)));
-                g.fill('evenodd');
-                drawn = true;
-            }
-            else if (layer.type === 'fill' && f.type === 3) {
-                const opacity = Number(get('paint', 'fill-opacity', ctx, 1));
-                const pattern = get('paint', 'fill-pattern', ctx, undefined);
-                path(f, true);
-                const icon = typeof pattern === 'string' ? spriteIcon(r, pattern)?.icon : undefined;
-                const image = icon && typeof pattern === 'string' && patternImage(r, pattern);
-                if (icon && image) {
-                    const p = g.createPattern(image, 'repeat');
-                    if (p) {
-                        p.setTransform(new DOMMatrix().scale(px / (icon.pixelRatio ?? 1)));
-                        g.globalAlpha = opacity;
-                        g.fillStyle = p;
-                        g.fill('evenodd');
-                        g.globalAlpha = 1;
-                    }
-                }
-                else {
-                    g.fillStyle = paint(get('paint', 'fill-color', ctx, '#000'), opacity);
-                    g.fill('evenodd');
-                    const outline = get('paint', 'fill-outline-color', ctx, undefined);
-                    if (outline !== undefined) {
-                        g.strokeStyle = paint(outline, opacity);
-                        g.lineWidth = px;
-                        g.setLineDash([]);
-                        g.stroke();
-                    }
-                }
-                drawn = true;
-            }
-            else if (layer.type === 'line' && f.type !== 1) {
-                const width = Number(get('paint', 'line-width', ctx, 1));
-                if (width <= 0)
-                    continue;
-                // A gap: two lines on either side of it, drawn as one wide line (the casing of a road, its inside drawn over)
-                const gap = Number(get('paint', 'line-gap-width', ctx, 0));
-                g.strokeStyle = paint(get('paint', 'line-color', ctx, '#000'), Number(get('paint', 'line-opacity', ctx, 1)));
-                g.lineWidth = (gap > 0 ? gap + 2 * width : width) * px;
-                g.lineCap = lineCap(get('layout', 'line-cap', ctx, 'butt'));
-                g.lineJoin = lineJoin(get('layout', 'line-join', ctx, 'miter'));
-                const dash = get('paint', 'line-dasharray', ctx, undefined);
-                g.setLineDash(Array.isArray(dash) ? dash.map((d) => Number(d) * width * px) : []);
-                path(f, f.type === 3);
-                g.stroke();
-                drawn = true;
-            }
-            else if (layer.type === 'circle' && f.type === 1) {
-                const radius = Number(get('paint', 'circle-radius', ctx, 5)) * px;
-                g.fillStyle = paint(get('paint', 'circle-color', ctx, '#000'), Number(get('paint', 'circle-opacity', ctx, 1)));
-                const stroke = Number(get('paint', 'circle-stroke-width', ctx, 0)) * px;
-                g.strokeStyle = paint(get('paint', 'circle-stroke-color', ctx, '#000'), Number(get('paint', 'circle-stroke-opacity', ctx, 1)));
-                g.lineWidth = stroke;
-                for (const point of f.geometry) {
-                    for (let i = 0; i + 1 < point.length; i += 2) {
-                        g.beginPath();
-                        g.arc(((point[i] ?? 0) - ox) * k, ((point[i + 1] ?? 0) - oy) * k, radius, 0, 2 * Math.PI);
-                        g.fill();
-                        if (stroke > 0)
-                            g.stroke();
-                    }
-                }
-                drawn = true;
-            }
-        }
-    }
-    if (!drawn && !layers)
-        return null;
-    return tileImage(canvas, g, opaque);
-};
-/** How a layer's text or icon (`prefix`) meets the others: allowed to overlap, ignored by the placement */
-const overlapOf = (layer, prefix, ctx) => {
-    const allow = Boolean(value(layer, 'layout', `${prefix}-allow-overlap`, ctx, false));
-    const ignore = Boolean(value(layer, 'layout', `${prefix}-ignore-placement`, ctx, false));
-    if (allow && ignore)
-        return true;
-    if (allow)
-        return 'allow';
-    return ignore ? 'ignore' : false;
-};
-/** A pair of numbers of a style value, `fallback` if it is not one */
-const pair = (v, fallback) => {
-    return Array.isArray(v) ? [Number(v[0] ?? fallback[0]), Number(v[1] ?? fallback[1])] : fallback;
-};
-/** Top, right, bottom, left of one to four numbers, as CSS's sides */
-const sides = (v) => {
-    const n = (Array.isArray(v) ? v : [v]).map((x) => Number(x) || 0);
-    const [top = 0, right = top, bottom = top, left = right] = n;
-    return [top, right, bottom, left];
-};
-/** A label's text in the case of its `text-transform` */
-const cased = (t, transform) => {
-    if (transform === 'uppercase')
-        return t.toUpperCase();
-    if (transform === 'lowercase')
-        return t.toLowerCase();
-    return t;
-};
-/** Points every `spacing` along a line (tile units, x and y interleaved), the first half a spacing in (the middle of a
- * shorter line): each point and the segment it lies on (x, y, x0, y0, x1, y1) */
-export const lineAnchors = (line, spacing) => {
-    let length = 0;
-    for (let i = 2; i + 1 < line.length; i += 2) {
-        length += Math.hypot((line[i] ?? 0) - (line[i - 2] ?? 0), (line[i + 1] ?? 0) - (line[i - 1] ?? 0));
-    }
-    const out = [];
-    if (!(length > 0) || !(spacing > 0))
-        return out;
-    let next = Math.min(spacing / 2, length / 2);
-    let walked = 0;
-    for (let i = 2; i + 1 < line.length; i += 2) {
-        const [ax, ay, bx, by] = [line[i - 2] ?? 0, line[i - 1] ?? 0, line[i] ?? 0, line[i + 1] ?? 0];
-        const d = Math.hypot(bx - ax, by - ay);
-        while (d > 0 && next <= walked + d) {
-            const t = (next - walked) / d;
-            out.push([ax + (bx - ax) * t, ay + (by - ay) * t, ax, ay, bx, by]);
-            next += spacing;
-        }
-        walked += d;
-    }
-    return out;
-};
-/** Longitude and latitude of a point of tile (z, x, y) in tile units */
-const lonLat = (z, x, y, extent, px, py) => {
-    const n = 2 ** z;
-    return [longitude((x + px / extent) / n), latitude((y + py / extent) / n)];
-};
-/** The icon of a label: its layer's icon properties for the feature */
-const iconOf = (layer, image, ctx, placement, sizeOf) => {
-    const alignment = value(layer, 'layout', 'icon-rotation-alignment', ctx, 'auto');
-    const fit = String(value(layer, 'layout', 'icon-text-fit', ctx, 'none'));
-    const padding = value(layer, 'layout', 'icon-text-fit-padding', ctx, [0, 0, 0, 0]);
-    return {
-        image,
-        size: isFeatureDependent(layer.layout?.['icon-size'])
-            ? Number(value(layer, 'layout', 'icon-size', ctx, 1))
-            : sizeOf(layer),
-        anchor: String(value(layer, 'layout', 'icon-anchor', ctx, 'center')),
-        offset: pair(value(layer, 'layout', 'icon-offset', ctx, [0, 0]), [0, 0]),
-        rotate: Number(value(layer, 'layout', 'icon-rotate', ctx, 0)) || 0,
-        alignment: alignment === 'map' || (alignment === 'auto' && placement === 'line') ? 'map' : 'viewport',
-        overlap: overlapOf(layer, 'icon', ctx),
-        optional: Boolean(value(layer, 'layout', 'icon-optional', ctx, false)),
-        fit: fit === 'width' || fit === 'height' || fit === 'both' ? fit : 'none',
-        padding: sides(padding),
-        color: String(value(layer, 'paint', 'icon-color', ctx, '#000')),
-        opacity: Number(value(layer, 'paint', 'icon-opacity', ctx, 1)),
-    };
-};
-const labels = async (r, z, x, y, id, priority, zoom = z) => {
-    const url = r.tiles.replace('{z}', String(z)).replace('{x}', String(x)).replace('{y}', String(y));
-    const layers = await tile(url, priority);
-    if (!layers || aborted.has(id))
-        return [];
-    const out = [];
-    // The text size of a layer when it depends on the zoom only: legacy stops as they are, an expression as stops
-    const sizes = new Map();
-    const sizeOf = (layer) => {
-        const known = sizes.get(layer);
-        if (known !== undefined)
-            return known;
-        const v = layer.layout?.['text-size'] ?? 16;
-        const s = isExpression(v) ? zoomStops(v) : v;
-        sizes.set(layer, s);
-        return s;
-    };
-    // The icon size of a layer when it depends on the zoom only, as the text size
-    const iconSizes = new Map();
-    const iconSizeOf = (layer) => {
-        const known = iconSizes.get(layer);
-        if (known !== undefined)
-            return known;
-        const v = layer.layout?.['icon-size'] ?? 1;
-        const s = isExpression(v) ? zoomStops(v) : v;
-        iconSizes.set(layer, s);
-        return s;
-    };
-    r.layers.forEach((layer, index) => {
-        const layout = layer.layout ?? {};
-        if (layer.type !== 'symbol' || !shown(layer, zoom))
-            return;
-        if (layout['text-field'] === undefined && layout['icon-image'] === undefined)
-            return;
-        const data = layers.get(layer['source-layer'] ?? '');
-        if (!data)
-            return;
-        const zctx = { zoom, properties: {}, type: 'Unknown' };
-        const placement = value(layer, 'layout', 'symbol-placement', zctx, 'point') === 'line' ? 'line' : 'point';
-        const textAlong = placement === 'line' && value(layer, 'layout', 'text-rotation-alignment', zctx, 'auto') !== 'viewport';
-        for (const f of data.features) {
-            const ctx = context(f, zoom);
-            if (!filter(layer.filter, ctx))
-                continue;
-            const field = text(layout['text-field'], ctx).trim();
-            const image = text(layout['icon-image'], ctx).trim();
-            if (!field && !image)
-                continue;
-            const t = cased(field, value(layer, 'layout', 'text-transform', ctx, 'none'));
-            const fonts = value(layer, 'layout', 'text-font', ctx, ['Noto Sans Regular']);
-            const font = labelFont(Array.isArray(fonts) && typeof fonts[0] === 'string' ? fonts[0] : 'Noto Sans Regular');
-            const base = {
-                layer: index,
-                text: t,
-                font,
-                // Zoom stops are kept for the engine; a value of the feature evaluated here
-                size: isFeatureDependent(layer.layout?.['text-size'])
-                    ? Number(value(layer, 'layout', 'text-size', ctx, 16))
-                    : sizeOf(layer),
-                color: String(value(layer, 'paint', 'text-color', ctx, '#000')),
-                haloColor: String(value(layer, 'paint', 'text-halo-color', ctx, 'rgba(0,0,0,0)')),
-                haloWidth: Number(value(layer, 'paint', 'text-halo-width', ctx, 0)),
-                anchor: String(value(layer, 'layout', 'text-anchor', ctx, 'center')),
-                offset: pair(value(layer, 'layout', 'text-offset', ctx, [0, 0]), [0, 0]),
-                maxWidth: Number(value(layer, 'layout', 'text-max-width', ctx, 10)),
-                lineHeight: Number(value(layer, 'layout', 'text-line-height', ctx, 1.2)),
-                overlap: overlapOf(layer, 'text', ctx),
-                ...(textAlong ? { textAlong } : {}),
-                ...(value(layer, 'layout', 'text-optional', ctx, false) ? { textOptional: true } : {}),
-                ...(image ? { icon: iconOf(layer, image, ctx, placement, iconSizeOf) } : {}),
-            };
-            if (f.type === 1) {
-                for (const point of f.geometry) {
-                    for (let i = 0; i + 1 < point.length; i += 2) {
-                        const [px, py] = [point[i] ?? 0, point[i + 1] ?? 0];
-                        // Points in the buffer belong to the neighbouring tile
-                        if (px < 0 || py < 0 || px >= data.extent || py >= data.extent)
-                            continue;
-                        const [lon, lat] = lonLat(z, x, y, data.extent, px, py);
-                        out.push({ ...base, lon, lat });
-                    }
-                }
-            }
-            else if (!t && placement === 'line') {
-                // Icons alone along lines (one-way arrows): every `symbol-spacing` CSS pixels (a tile is 512 across at its
-                // level, twice as many at each zoom past it)
-                const spacing = (Number(value(layer, 'layout', 'symbol-spacing', ctx, 250)) * data.extent) / (512 * 2 ** (zoom - z));
-                for (const line of f.geometry) {
-                    for (const [px = 0, py = 0, ax = 0, ay = 0, bx = 0, by = 0] of lineAnchors(line, Math.max(spacing, 1))) {
-                        if (px < 0 || py < 0 || px >= data.extent || py >= data.extent)
-                            continue;
-                        const [lon, lat] = lonLat(z, x, y, data.extent, px, py);
-                        const [lon1, lat1] = lonLat(z, x, y, data.extent, bx, by);
-                        const [lon0, lat0] = lonLat(z, x, y, data.extent, ax, ay);
-                        out.push({ ...base, lon, lat, along: [lon1 - lon0, lat1 - lat0] });
-                    }
-                }
-            }
-            else {
-                // The middle of the longest line inside the tile, along it
-                let best;
-                let bestLength = 0;
-                for (const line of f.geometry) {
-                    let length = 0;
-                    for (let i = 2; i + 1 < line.length; i += 2) {
-                        length += Math.hypot((line[i] ?? 0) - (line[i - 2] ?? 0), (line[i + 1] ?? 0) - (line[i - 1] ?? 0));
-                    }
-                    if (length > bestLength) {
-                        bestLength = length;
-                        best = line;
-                    }
-                }
-                if (!best || bestLength < data.extent / 32)
-                    continue;
-                let rest = bestLength / 2;
-                for (let i = 2; i + 1 < best.length; i += 2) {
-                    const [ax, ay, bx, by] = [best[i - 2] ?? 0, best[i - 1] ?? 0, best[i] ?? 0, best[i + 1] ?? 0];
-                    const d = Math.hypot(bx - ax, by - ay);
-                    if (d >= rest && d > 0) {
-                        const [px, py] = [ax + ((bx - ax) * rest) / d, ay + ((by - ay) * rest) / d];
-                        if (px < 0 || py < 0 || px >= data.extent || py >= data.extent)
-                            break;
-                        const [lon, lat] = lonLat(z, x, y, data.extent, px, py);
-                        const [lon1, lat1] = lonLat(z, x, y, data.extent, bx, by);
-                        const [lon0, lat0] = lonLat(z, x, y, data.extent, ax, ay);
-                        out.push({ ...base, lon, lat, ...(placement === 'line' ? { along: [lon1 - lon0, lat1 - lat0] } : {}) });
-                        break;
-                    }
-                    rest -= d;
-                }
-            }
-        }
-    });
-    return out;
-};
 const post = (message, transfer = []) => self.postMessage(message, transfer);
 self.onmessage = async ({ data }) => {
     if (data.type === 'headers') {
         setHeaderRules(data.rules);
         return;
     }
+    if (data.type === 'tess') {
+        tess.url = data.url;
+        return;
+    }
     if (data.type === 'init') {
         if (data.workers !== undefined)
             cache.capacity = cacheShare(data.workers);
@@ -599,7 +69,7 @@ self.onmessage = async ({ data }) => {
         controllers.get(data.id)?.abort();
         return;
     }
-    if (data.type === 'heights' || data.type === 'reproject') {
+    if (data.type === 'heights' || data.type === 'reproject' || data.type === 'grids') {
         await decodeTile(data);
         return;
     }
@@ -615,6 +85,63 @@ self.onmessage = async ({ data }) => {
             else
                 post({ id: data.id, missing: true });
         }
+        else if (data.type === 'trees') {
+            const out = await trees(r, data.z, data.x, data.y, data.id, data.spacing, data.maxTrees, data.priority);
+            if (!out)
+                post({ id: data.id, missing: true });
+            else
+                post({ id: data.id, trees: out }, [out.buffer]);
+        }
+        else if (data.type === 'street') {
+            const street = await streetFlowOf(r, data, data.id);
+            post({ id: data.id, street }, [street.eastU, street.eastV, street.northU, street.northV].map((a) => a.buffer));
+        }
+        else if (data.type === 'polygons') {
+            const tilePolygons = await polygons(r, data.z, data.x, data.y, data.id, data.priority);
+            if (!tilePolygons)
+                post({ id: data.id, missing: true });
+            else {
+                const { points, ringStart, polygonStart, feature } = tilePolygons.arrays;
+                post({ id: data.id, polygons: tilePolygons }, [
+                    points.buffer,
+                    ringStart.buffer,
+                    polygonStart.buffer,
+                    feature.buffer,
+                ]);
+            }
+        }
+        else if (data.type === 'vectors') {
+            const out = await vectors(r, data, data.id, data.styles === true, data.priority);
+            if (!out)
+                post({ id: data.id, missing: true });
+            else if (out instanceof Float32Array)
+                post({ id: data.id, styles: out }, [out.buffer]);
+            else {
+                const raised = Uint8Array.from(r.layers, (l) => (vectorKind(l) === 'extrusion' ? 1 : 0));
+                const mesh = (await tessellator()) ? tessellate(out, raised, data.prism === true) : undefined;
+                const { fills, lines } = out;
+                post({ id: data.id, vectors: mesh ? { ...out, mesh } : out }, [
+                    ...[fills.points, fills.ringStart, fills.polygonStart, fills.feature, fills.fillStart].map((a) => a.buffer),
+                    ...[lines.points, lines.start, lines.feature, lines.lineStart].map((a) => a.buffer),
+                    out.styles.buffer,
+                    out.sublayer.buffer,
+                    ...(mesh
+                        ? [
+                            mesh.vertices,
+                            mesh.indices,
+                            mesh.fillRanges,
+                            mesh.pieces,
+                            mesh.lineTable,
+                            mesh.lineRanges,
+                            mesh.blocks,
+                            mesh.blockIndices,
+                            mesh.blockRanges,
+                            mesh.bounds,
+                        ]
+                        : []).map((a) => a.buffer),
+                ]);
+            }
+        }
         else {
             post({ id: data.id, labels: await labels(r, data.z, data.x, data.y, data.id, data.priority, data.zoom) });
         }
@@ -627,12 +154,25 @@ self.onmessage = async ({ data }) => {
         aborted.delete(data.id);
     }
 };
-/** A tile of another layer: the altitudes of a relief tile, or a reprojected raster tile */
+/** A file's bytes, with the page's request headers */
+const fetchBytes = async (url, signal) => {
+    const response = await fetch(url, withHeaders(url, { signal }));
+    if (!response.ok)
+        throw new Error(`${url}: ${response.status}`);
+    return response.arrayBuffer();
+};
+/** A tile of another layer: the altitudes of a relief tile, or a reprojected raster tile; or a file's grids */
 const decodeTile = async (data) => {
     const controller = new AbortController();
     controllers.set(data.id, controller);
     try {
-        if (data.type === 'heights') {
+        if (data.type === 'grids') {
+            const { module, url, bytes } = data;
+            const file = bytes ?? (url ? await fetchBytes(url, controller.signal) : new ArrayBuffer(0));
+            const { grids, values } = await decodeGrids(new Uint8Array(file), module);
+            post({ id: data.id, grids, values }, values.map((v) => v.buffer));
+        }
+        else if (data.type === 'heights') {
             const heights = await fetchHeights(data.url, data.encoding, data.floor, controller.signal, heightsSurface);
             if (heights)
                 post({ id: data.id, heights }, [heights.buffer]);