isard 1.1.0 → 1.3.0

package/dist/basemap/vectortiles.js

@@ -8,16 +8,17 @@
  * Any subset of the style can be drawn on its own raster layer (`raster({ layers })`), at its own place in the stack:
  * rivers from the basemap's data over a flood layer, for instance, restyled with `extraLayers`.
  */
-import { headerRules, onHeaderRules, withHeaders } from "../engine/requests.js";
-import { assetUrl } from "../engine-loader.js";
+import { withHeaders } from "../engine/requests.js";
 import { IGN_ATTRIBUTION } from "../geoplateforme.js";
 import { loadSprites, readPixels } from "../layers/icons.js";
 import { mercatorX, mercatorY } from "../util/geo.js";
+import { isRecord } from "../util/guards.js";
 import { Lru } from "../util/lru.js";
 import { OPENFREEMAP_ATTRIBUTION } from "./basemaps.js";
 import { pmtiles, pmtilesUrl } from "./pmtiles.js";
-import { SOURCE_CACHE } from "./resample.js";
-import { labelFont, } from "./vectorstyle.js";
+import { isWoodland, TREE_NUMBERS, treeModel, treeSpacing } from "./trees.js";
+import { evaluate, isExpression, isStyle, labelFont, vectorKind, zoomOnly, } from "./vectorstyle.js";
+import { rendererKey, tilePriority } from "./workerpool.js";
 /** OpenFreeMap's styles: OpenStreetMap data in the OpenMapTiles schema, worldwide, free and without a key */
 export const OPENFREEMAP_STYLES = {
     positron: 'https://tiles.openfreemap.org/styles/positron',
@@ -38,43 +39,75 @@ export const VECTOR_BASEMAPS = {
     'ign-plan-grey-vector': PLAN_STYLES.grey,
 };
 /** The credits of a known style: OpenFreeMap's, PLAN.IGN's */
-export function styleAttribution(style) {
+export const styleAttribution = (style) => {
     if (typeof style !== 'string')
         return undefined;
-    if (Object.values(OPENFREEMAP_STYLES).includes(style))
+    if (Object.values(OPENFREEMAP_STYLES).some((s) => s === style))
         return OPENFREEMAP_ATTRIBUTION;
-    if (Object.values(PLAN_STYLES).includes(style))
+    if (Object.values(PLAN_STYLES).some((s) => s === style))
         return IGN_ATTRIBUTION;
     return undefined;
-}
+};
 /** Text or icon size of a style (a number, legacy stops, or the stops of a zoom expression made by the worker) as a
  * size for the symbol layer */
-export function size(value, fallback = 16) {
+export const size = (value, fallback = 16) => {
+    const stop = (s) => {
+        const [z, v] = Array.isArray(s) ? s : [];
+        return [Number(z), Number(v)];
+    };
     if (typeof value === 'number')
         return value;
-    if (Array.isArray(value) && value.length > 0 && value.every(Array.isArray)) {
-        return value.map((s) => [Number(s[0]), Number(s[1])]);
-    }
-    if (value && typeof value === 'object' && !Array.isArray(value) && Array.isArray(value.stops)) {
-        return value.stops.map((s) => {
-            const [z, v] = s;
-            return [Number(z), Number(v)];
-        });
-    }
+    if (Array.isArray(value) && value.length > 0 && value.every(Array.isArray))
+        return value.map(stop);
+    if (isRecord(value) && Array.isArray(value.stops))
+        return value.stops.map(stop);
     return fallback;
-}
+};
+/** The anchors of the symbol layer */
+const ANCHORS = new Set([
+    'center',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+]);
+const isAnchor = (value) => value !== undefined && ANCHORS.has(value);
+/** A style's anchor (`text-anchor`, `icon-anchor`) for the symbol layer: `center` if it is none */
+const anchor = (value) => (isAnchor(value) ? value : 'center');
 /** Fetches a JSON document (a style, a TileJSON) */
-async function json(url) {
+const json = async (url) => {
     const response = await fetch(url, withHeaders(url));
     if (!response.ok)
         throw new Error(`${url}: ${response.status}`);
-    return (await response.json());
-}
+    return response.json();
+};
+/** A style fetched: a MapLibre style, or an error */
+const fetchStyle = async (url) => {
+    const style = await json(url);
+    if (!isStyle(style))
+        throw new Error(`${url}: not a MapLibre style`);
+    return style;
+};
+const isTileJson = (value) => isRecord(value) &&
+    Array.isArray(value.tiles) &&
+    value.tiles.every((t) => typeof t === 'string') &&
+    (value.maxzoom === undefined || typeof value.maxzoom === 'number');
+/** A TileJSON fetched, or an error */
+const fetchTileJson = async (url) => {
+    const tilejson = await json(url);
+    if (!isTileJson(tilejson))
+        throw new Error(`${url}: not a TileJSON`);
+    return tilejson;
+};
 /**
  * A style source's tiles and deepest level: a `pmtiles://` archive (its `url`, or a `tiles` template) read for its
  * header, its tiles then named `pmtiles://<absolute archive URL>/{z}/{x}/{y}` for the workers; other sources as they are
  */
-async function resolveSource(source) {
+const resolveSource = async (source) => {
     const given = source.url ?? source.tiles?.[0] ?? '';
     const archive = pmtilesUrl(given.replace(/\/\{z\}\/\{x\}\/\{y\}$/, ''));
     if (!archive)
@@ -84,195 +117,33 @@ async function resolveSource(source) {
         };
     const header = await pmtiles(archive).header();
     return { tiles: [`pmtiles://${archive}/{z}/{x}/{y}`], maxzoom: source.maxzoom ?? header.maxZoom };
-}
+};
 /** Pause before the labels of tiles that failed are asked for again, when no move brings an update (ms) */
 const RETRY_LABELS_MS = 3000;
-/** Default size of a basemap worker pool: cores - 1, 1 to 4 */
-export function defaultWorkerCount() {
-    return Math.min(4, Math.max(1, (typeof navigator !== 'undefined' ? navigator.hardwareConcurrency || 2 : 2) - 1));
-}
-/** Default URL of the basemap worker: in the page's assets folder (`isard/vite`), else next to the module */
-export function defaultWorkerUrl(assetsUrl) {
-    return assetUrl('basemap.worker.js', undefined, assetsUrl);
-}
-/** Fetch priority of a raster tile drawn by the workers: 'high' near the center of the view, at the current zoom or
- * coarser; 'low' far from it or finer (prefetch); 'auto' between */
-export function tilePriority(z, x, y, camera) {
-    // A raster tile of level z covers the map at zoom z - 1
-    if (z - 1 > camera.zoom + 1)
-        return 'low';
-    const n = 2 ** z;
-    const [lon, lat] = camera.center;
-    const cx = mercatorX(lon) * n;
-    const cy = mercatorY(lat) * n;
-    // Across the antimeridian, the short way
-    let dx = Math.abs(x + 0.5 - cx) % n;
-    dx = Math.min(dx, n - dx);
-    const d = Math.hypot(dx, y + 0.5 - cy);
-    if (d <= 1.5)
-        return 'high';
-    return d >= 4 ? 'low' : 'auto';
-}
-/** The worker of a vector tile among `count`: always the same one */
-export function workerIndex(vz, vx, vy, count) {
-    // Unsigned: every worker gets its share
-    return ((Math.imul(vx, 73856093) ^ Math.imul(vy, 19349663) ^ vz) >>> 0) % Math.max(1, count);
-}
-/** The worker-side key of a renderer: unique across the `VectorTiles` sharing a pool */
-export function rendererKey(namespace, n) {
-    return `${namespace}:r${n}`;
-}
+/** The style layers of buildings, by default: PLAN IGN's `bati_surf` (not its built-up areas nor its parks), the
+ * OpenMapTiles' `building` */
+const isBuildings = (layer) => ['bati_surf', 'building'].includes(layer['source-layer'] ?? '');
 /**
- * @internal Workers drawing vector tiles, shared by the `VectorTiles` of a map: each vector tile always goes to the
- * same worker, which keeps it decoded for every style drawn from it. Requests are tracked one by one, with their
- * owner, so that one `VectorTiles` going away cancels its own requests only.
+ * The tiles of level `z` in view, within a window around the center (a tilted view's bounds reach far), the
+ * `maxTiles` nearest to the center first
  */
-export class BasemapWorkers {
-    count;
-    url;
-    workers;
-    pending = new Map();
-    next = 1;
-    namespaces = 0;
-    terminated = false;
-    /** Stops following the page's request headers */
-    unfollow;
-    constructor(count, url, create = (u) => new Worker(u, { type: 'module' })) {
-        this.count = count;
-        this.url = url;
-        this.workers = Array.from({ length: Math.max(1, count) }, () => {
-            const worker = create(url);
-            worker.onmessage = ({ data }) => {
-                const p = this.pending.get(data.id);
-                if (!p)
-                    return;
-                this.pending.delete(data.id);
-                if ('error' in data)
-                    p.reject(new Error(data.error));
-                else
-                    p.resolve(data);
-            };
-            // A worker that fails to load (a bundler serving it from elsewhere) or to read a message fails its requests
-            worker.onerror = (event) => {
-                event.preventDefault();
-                this.fail(worker, `the vector basemap worker ${url} failed${event.message ? `: ${event.message}` : ''}`);
-            };
-            worker.onmessageerror = () => this.fail(worker, `the vector basemap worker ${url} sent an unreadable message`);
-            const rules = headerRules();
-            if (rules.length > 0)
-                worker.postMessage({ type: 'headers', rules });
-            return worker;
-        });
-        this.unfollow = onHeaderRules((rules) => {
-            for (const w of this.workers)
-                w.postMessage({ type: 'headers', rules });
-        });
-    }
-    /** A prefix for the renderer keys of one `VectorTiles` */
-    namespace() {
-        return `v${this.namespaces++}`;
-    }
-    /** Requests in progress */
-    get size() {
-        return this.pending.size;
-    }
-    /** Rejects the requests of a failed worker */
-    fail(worker, message) {
-        const error = new Error(`isard: ${message}. If a bundler moves the worker, give its URL in the \`basemapWorkerUrl\` option (see "With a bundler" in the guide)`);
-        for (const [id, p] of this.pending) {
-            if (p.worker !== worker)
-                continue;
-            this.pending.delete(id);
-            p.reject(error);
-        }
-    }
-    /** The worker of a vector tile */
-    worker(vz, vx, vy) {
-        return this.workers[workerIndex(vz, vx, vy, this.workers.length)] ?? this.workers[0];
-    }
-    /** Sends a message to every worker (a renderer, or its removal) */
-    broadcast(message) {
-        if (this.terminated)
-            return;
-        // A renderer tells the workers how many they are: they share the decoded tiles' budget
-        const sent = message.type === 'init' ? { ...message, workers: this.workers.length } : message;
-        // A sprite image is copied to each worker (structured clone)
-        for (const w of this.workers)
-            w.postMessage(sent);
-    }
-    /** Asks a worker for a tile's image or labels, on behalf of `owner` */
-    request(worker, work, owner, signal) {
-        return new Promise((resolve, reject) => {
-            if (this.terminated)
-                return reject(new DOMException('isard: vector tiles destroyed', 'AbortError'));
-            if (signal?.aborted)
-                return reject(new DOMException('aborted', 'AbortError'));
-            const id = this.next++;
-            const abort = () => {
-                if (!this.pending.delete(id))
-                    return;
-                worker.postMessage({ type: 'abort', id });
-                reject(new DOMException('aborted', 'AbortError'));
-            };
-            // The listener goes once the request is settled
-            const settle = () => signal?.removeEventListener('abort', abort);
-            this.pending.set(id, {
-                resolve: (r) => {
-                    settle();
-                    resolve(r);
-                },
-                reject: (e) => {
-                    settle();
-                    reject(e);
-                },
-                worker,
-                owner,
-            });
-            signal?.addEventListener('abort', abort, { once: true });
-            worker.postMessage({ ...work, id });
-        });
-    }
-    /** The altitudes of a PNG relief tile `z`/`x`/`y` at `url`, decoded by a worker (see `fetchHeights`) */
-    heights(url, encoding, floor, [z, x, y], signal, owner) {
-        const work = { type: 'heights', url, encoding, ...(floor === undefined ? {} : { floor }) };
-        return this.request(this.worker(z, x, y), work, owner, signal).then((r) => ('heights' in r ? r.heights : null));
-    }
-    /** Mercator tile `z`/`x`/`y` reprojected by a worker from the source images of its plan (see `resampler`) */
-    reproject(job, [z, x, y], signal, owner) {
-        // Blocks of 4 × 4 Mercator tiles go to the same worker: neighbours share source tiles, each worker keeps its share
-        const worker = this.worker(Math.max(0, z - 2), x >> 2, y >> 2);
-        const cached = Math.max(16, Math.ceil(SOURCE_CACHE / this.workers.length));
-        const work = { type: 'reproject', job, cached };
-        return this.request(worker, work, owner, signal).then((r) => ('image' in r ? r.image : null));
-    }
-    /** Cancels the requests of an owner (the workers stop them) */
-    cancel(owner) {
-        for (const [id, p] of this.pending) {
-            if (p.owner !== owner)
-                continue;
-            this.pending.delete(id);
-            p.worker.postMessage({ type: 'abort', id });
-            p.reject(new DOMException('isard: vector tiles destroyed', 'AbortError'));
-        }
-    }
-    /** Stops the workers; their requests fail */
-    terminate() {
-        if (this.terminated)
-            return;
-        this.terminated = true;
-        this.unfollow();
-        for (const w of this.workers)
-            w.terminate();
-        const pending = [...this.pending.values()];
-        this.pending.clear();
-        for (const p of pending)
-            p.reject(new DOMException('isard: vector tiles destroyed', 'AbortError'));
-    }
-}
+const tilesAround = (map, camera, z, maxTiles) => {
+    const n = 2 ** z;
+    const [west, south, east, north] = map.getBounds();
+    const tx = (lon) => Math.floor(mercatorX(lon) * n);
+    const ty = (lat) => Math.floor(mercatorY(lat) * n);
+    const [cx, cy] = [mercatorX(camera.center[0]) * n, mercatorY(camera.center[1]) * n];
+    const reach = Math.ceil(Math.sqrt(maxTiles)) + 2;
+    const [x0, x1] = [Math.max(0, tx(west), Math.floor(cx) - reach), Math.min(n - 1, tx(east), Math.floor(cx) + reach)];
+    const [y0, y1] = [Math.max(0, ty(north), Math.floor(cy) - reach), Math.min(n - 1, ty(south), Math.floor(cy) + reach)];
+    const wanted = Array.from({ length: Math.max(0, y1 - y0 + 1) }, (_, j) => y0 + j).flatMap((y) => Array.from({ length: Math.max(0, x1 - x0 + 1) }, (_, i) => [x0 + i, y]));
+    wanted.sort((a, b) => Math.hypot(a[0] + 0.5 - cx, a[1] + 0.5 - cy) - Math.hypot(b[0] + 0.5 - cx, b[1] + 0.5 - cy));
+    return wanted.slice(0, maxTiles);
+};
 /** A tile's label candidates as features, by style layer */
-export function tileLabels(candidates) {
+export const tileLabels = (candidates) => {
     const byLayer = new Map();
-    for (const p of candidates) {
+    candidates.forEach((p) => {
         const feature = {
             type: 'Feature',
             properties: p,
@@ -291,9 +162,9 @@ export function tileLabels(candidates) {
             list.push(feature);
         else
             byLayer.set(p.layer, [feature]);
-    }
+    });
     return [...byLayer].sort((a, b) => b[0] - a[0]);
-}
+};
 export class VectorTiles {
     map;
     pool;
@@ -334,16 +205,14 @@ export class VectorTiles {
         });
     }
     async load(input) {
-        const style = typeof input === 'string' ? await json(input) : input;
+        const style = typeof input === 'string' ? await fetchStyle(input) : input;
         const [name, source] = Object.entries(style.sources).find(([, s]) => s.type === 'vector') ?? [];
         if (!name || !source)
             throw new Error('the style has no vector source');
-        let { tiles, maxzoom } = await resolveSource(source);
-        if (!tiles && source.url) {
-            const tilejson = await json(source.url);
-            tiles = tilejson.tiles;
-            maxzoom ??= tilejson.maxzoom;
-        }
+        const resolved = await resolveSource(source);
+        const tilejson = !resolved.tiles && source.url ? await fetchTileJson(source.url) : undefined;
+        const tiles = tilejson === undefined ? resolved.tiles : tilejson.tiles;
+        const maxzoom = resolved.maxzoom ?? tilejson?.maxzoom;
         const template = tiles?.[0];
         if (!template)
             throw new Error(`source ${name} has no tiles`);
@@ -367,11 +236,11 @@ export class VectorTiles {
     /** The fonts of the style's labels, for its glyphs (the first of each `text-font`, as the workers take it) */
     static fonts(style) {
         const fonts = new Set();
-        for (const layer of style.layers) {
+        style.layers.forEach((layer) => {
             const font = layer.layout?.['text-font'];
             if (layer.type === 'symbol' && Array.isArray(font) && typeof font[0] === 'string')
                 fonts.add(labelFont(font[0]));
-        }
+        });
         return [...fonts];
     }
     /** The style's sprites (their JSON and their images), loaded once, for the fill patterns and the icons */
@@ -389,10 +258,10 @@ export class VectorTiles {
             return Promise.reject(new DOMException('isard: vector tiles destroyed', 'AbortError'));
         return this.pool.request(this.pool.worker(vz, vx, vy), work, this, signal);
     }
-    /** Sends a renderer of these layers to every worker; returns its key */
-    async renderer(select, extra) {
+    /** Sends a renderer of these layers to every worker (again under `again`, restyled); returns its key */
+    async renderer(select, extra, again) {
         const { style, tiles, maxzoom, rasters } = await this.ready;
-        const key = rendererKey(this.namespace, this.keys++);
+        const key = again ?? rendererKey(this.namespace, this.keys++);
         const layers = [...style.layers.filter(select), ...extra];
         const patterns = layers.some((l) => l.paint?.['fill-pattern'] !== undefined);
         // The images are downloaded once, copied to each worker
@@ -400,8 +269,9 @@ export class VectorTiles {
         if (this.destroyed)
             throw new DOMException('isard: vector tiles destroyed', 'AbortError');
         this.pool.broadcast({ type: 'init', key, tiles, maxzoom, layers, rasters, ...(sprites.length ? { sprites } : {}) });
-        this.renderers.push(key);
-        return { key, maxzoom };
+        if (!again)
+            this.renderers.push(key);
+        return { key, maxzoom, layers };
     }
     /**
      * A raster layer drawing the style's fills, lines and circles (or those `layers` keeps, then `extraLayers`, of the
@@ -436,6 +306,310 @@ export class VectorTiles {
         this.ground ??= layer;
         return layer;
     }
+    /**
+     * An extrusion layer of the polygons of the style's fill layers that `layers` keeps (by default its buildings: the
+     * fill or fill-extrusion layers of PLAN IGN's `bati_surf` or OpenMapTiles' `building`), raised by the style
+     * given (`height`, `base`, `color`, `ramp`…; the properties of the tiles' features). Its tiles follow the view: at
+     * the source's deepest level, the `maxTiles` nearest to the center, from `minZoom` on (15 by default); the tiles
+     * leaving the view are dropped.
+     */
+    extrusions(options = {}) {
+        const { layers = isBuildings, minZoom = 15, maxTiles = 36, ...style } = options;
+        const extrusions = this.map.addExtrusions(style);
+        const renderer = this.renderer((l) => (l.type === 'fill' || l.type === 'fill-extrusion') && layers(l), []);
+        renderer.catch(() => undefined);
+        this.layers.push(extrusions);
+        /** The tiles held or asked for, by key */
+        const held = new Map();
+        const update = async () => {
+            if (this.destroyed)
+                return;
+            const { key, maxzoom } = await renderer;
+            const camera = this.map.getCamera();
+            const z = maxzoom;
+            const wanted = camera.zoom < minZoom ? [] : tilesAround(this.map, camera, z, maxTiles);
+            const keys = new Set(wanted.map(([x, y]) => `${z}/${x}/${y}`));
+            // Out of view: dropped, or no longer asked for
+            [...held].forEach(([k, controller]) => {
+                if (keys.has(k))
+                    return;
+                controller.abort();
+                held.delete(k);
+                extrusions.removeTile(k);
+            });
+            wanted.forEach(([x, y], index) => {
+                const k = `${z}/${x}/${y}`;
+                if (held.has(k))
+                    return;
+                const controller = new AbortController();
+                const work = { type: 'polygons', key, z, x, y, priority: index < 4 ? 'auto' : 'low' };
+                held.set(k, controller);
+                this.request(z, x, y, work, controller.signal).then((r) => {
+                    if (controller.signal.aborted || !('polygons' in r))
+                        return;
+                    const tile = r.polygons;
+                    // The features' properties as the style reads them
+                    extrusions.setTile(k, { arrays: tile.arrays, properties: tile.properties });
+                }, () => {
+                    // A failure is asked for again on the next update
+                    if (held.get(k) === controller)
+                        held.delete(k);
+                });
+            });
+        };
+        this.followView(update, held, update);
+        return extrusions;
+    }
+    /**
+     * Trees on the style's woods, forests and grass (or the fill layers `layers` keeps) as 3D models, from street level
+     * (`minZoom`, default 15): the workers scatter them over the polygons of the vector tiles around the view, `spacing`
+     * metres apart (by style layer: 9 in woods, 25 on grass, by default) on a jittered grid, the same trees whenever a
+     * tile comes back; the engine draws them all in one instanced draw, on the relief. A low-poly tree by default (its
+     * `colors`), or your own glTF (`url`, `data`, about 10 metres high, standing on its origin). Dense around the
+     * view's center, fewer and fewer away from it (as the camera moves too), at most `maxInstances` drawn (default
+     * 25000); at most `maxTiles` tiles (default 9) and `maxTrees` trees in each (default 30000). The models load the
+     * engine with 3D Tiles.
+     */
+    trees(options = {}) {
+        const { layers = isWoodland, spacing = treeSpacing, minZoom = 15, maxTiles = 9, maxTrees = 30000, maxInstances = 25000, } = options;
+        const model = options.url ? { url: options.url } : { data: options.data ?? treeModel(options.colors) };
+        const trees = this.map.addModels({
+            ...model,
+            instances: [],
+            ...(options.before ? { before: options.before } : {}),
+        });
+        const renderer = this.renderer((l) => l.type === 'fill' && layers(l), []);
+        renderer.catch(() => undefined);
+        this.layers.push(trees);
+        /** The tiles held or asked for, by key, and the trees of those that came */
+        const held = new Map();
+        const found = new Map();
+        /** The trees drawn to the engine (longitude, latitude, altitude, heading, pitch, roll, scale each): all of them
+         * near the view's center, past `near` metres those of a rank under (near / distance)², at most `maxInstances` */
+        const send = () => {
+            const { center, zoom } = this.map.getCamera();
+            const near = TREES_NEAR_METRES * 2 ** (16 - zoom);
+            const metresPerDegree = 111320;
+            const cos = Math.cos((center[1] * Math.PI) / 180);
+            const chosen = [];
+            found.forEach((t) => {
+                for (let i = 0; i < t.length / TREE_NUMBERS; i += 1) {
+                    const dx = ((t[i * TREE_NUMBERS] ?? 0) - center[0]) * metresPerDegree * cos;
+                    const dy = ((t[i * TREE_NUMBERS + 1] ?? 0) - center[1]) * metresPerDegree;
+                    const far = (dx * dx + dy * dy) / (near * near);
+                    const score = (t[i * TREE_NUMBERS + 4] ?? 0) * Math.max(1, far);
+                    if (score < 1)
+                        chosen.push([score, t, i]);
+                }
+            });
+            if (chosen.length > maxInstances)
+                chosen.sort((a, b) => a[0] - b[0]).splice(maxInstances);
+            const out = new Float64Array(chosen.length * 7);
+            chosen.forEach(([, t, i], k) => {
+                const at = i * TREE_NUMBERS;
+                out.set([t[at] ?? 0, t[at + 1] ?? 0, 0, t[at + 3] ?? 0, 0, 0, t[at + 2] ?? 1], k * 7);
+            });
+            trees.setInstanceNumbers(out);
+        };
+        const update = async () => {
+            if (this.destroyed)
+                return;
+            const { key, maxzoom, layers: list } = await renderer;
+            const camera = this.map.getCamera();
+            const z = maxzoom;
+            const wanted = camera.zoom < minZoom ? [] : tilesAround(this.map, camera, z, maxTiles);
+            const keys = new Set(wanted.map(([x, y]) => `${z}/${x}/${y}`));
+            const metres = list.map((l) => (typeof spacing === 'number' ? spacing : spacing(l)));
+            const dropped = [...held.keys()].filter((k) => !keys.has(k));
+            // Out of view: dropped, or no longer asked for
+            dropped.forEach((k) => {
+                held.get(k)?.abort();
+                held.delete(k);
+                found.delete(k);
+            });
+            // Dense around the new center
+            send();
+            wanted.forEach(([x, y], index) => {
+                const k = `${z}/${x}/${y}`;
+                if (held.has(k))
+                    return;
+                const controller = new AbortController();
+                const priority = index < 4 ? 'auto' : 'low';
+                const work = { type: 'trees', key, z, x, y, spacing: metres, maxTrees, priority };
+                held.set(k, controller);
+                this.request(z, x, y, work, controller.signal).then((r) => {
+                    if (controller.signal.aborted || !('trees' in r))
+                        return;
+                    found.set(k, r.trees);
+                    send();
+                }, () => {
+                    // A failure is asked for again on the next update
+                    if (held.get(k) === controller)
+                        held.delete(k);
+                });
+            });
+        };
+        // While the camera moves, the trees drawn follow its center (dense near it)
+        this.followView(update, held, send);
+        return trees;
+    }
+    /**
+     * A layer drawing the style's fills, lines and buildings (or those `layers` keeps; backgrounds as fills, the
+     * `fill-extrusion` layers raised into buildings by their height and base height) as geometry instead of images: the
+     * workers cut the vector tiles in view into polygons and lines, which the engine draws on the globe and the relief,
+     * in the style's order, each style layer over its zoom range. Sharp at any zoom
+     * and pitch, picked by feature (`pick` gives its properties and style layer), restyled without cutting the tiles
+     * again (`setPaintProperty`, `setLayoutProperty`). Its tiles follow the view, while it moves too, coarser far away in a
+     * tilted view, and those leaving it stay until the ones replacing them are there; past the source's deepest level,
+     * cut again from its tiles down to level 18 (overzoom: their filters and styles those of their level). The fills' outlines are drawn one
+     * pixel wide, the lines' ends as their `line-cap` says (their joins round), the colors follow the camera's zoom. The
+     * layers drawn with a pattern and the circles are left out (the raster path draws them), as are `line-offset`,
+     * `line-blur` and the translations (`fill-translate`, `line-translate`); `raster` stays the lighter path for heavy
+     * styles and small devices. At night (`setSun`) the line layers `streets` keeps glow (by default those whose id names
+     * a road, not its casing, a railway, a path or a tunnel).
+     */
+    vectors(options = {}) {
+        const { layers = () => true, streets = isStreet, before } = options;
+        const vector = this.map.addVectorLayer(before);
+        const state = { renderer: this.renderer((l) => vectorKind(l) !== undefined && layers(l), []), update: 0, style: 0 };
+        state.renderer.catch(() => undefined);
+        this.layers.push(vector);
+        const sublayers = (list) => {
+            const zoom = this.map.getCamera().zoom;
+            return list.map((l) => ({
+                id: l.id,
+                sourceLayer: l['source-layer'],
+                kind: vectorKind(l) ?? 'fill',
+                minZoom: l.minzoom ?? 0,
+                maxZoom: l.maxzoom ?? 24,
+                visible: l.layout?.visibility !== 'none',
+                opacity: zoomOnly(l.paint?.[`${l.type}-opacity`], 1) ?? 1,
+                cap: lineCap(l.layout?.['line-cap'], zoom),
+                lit: l.type === 'line' && streets(l),
+                dash: l.type === 'line' ? dashes(l.paint?.['line-dasharray'], zoom) : [0, 0, 0, 0],
+            }));
+        };
+        /** The tiles held or asked for, by `z/x/y` */
+        const held = new Map();
+        /** A tile's geometry, or its styles alone, asked of the worker of its tile of the source's level (which keeps the
+         * decoded tile its deeper tiles are cut from) */
+        const ask = ({ key, maxzoom }, [z = 0, x = 0, y = 0], styles, priority, signal) => {
+            const d = Math.max(0, z - maxzoom);
+            const work = { type: 'vectors', key, z, x, y, deepest: deepestLevel(maxzoom), priority };
+            // The geometry made ready for the GPU in the workers, with the prisms the relief needs
+            return this.request(z - d, Math.floor(x / 2 ** d), Math.floor(y / 2 ** d), styles ? { ...work, styles } : { ...work, prism: this.map.hasRelief }, signal);
+        };
+        // The workers tessellate the tiles (the main thread only uploads them), once they know the module
+        this.pool.broadcast({ type: 'tess', url: this.map.tessUrl });
+        /** The styles of a tile held asked for again, the tile kept as it is */
+        const restyleTile = async (renderer, k) => {
+            const r = await ask(renderer, k.split('/').map(Number), true, 'auto').catch(() => undefined);
+            if (r && 'styles' in r)
+                vector.setTileStyles(k, r.styles);
+        };
+        const update = async () => {
+            if (this.destroyed)
+                return;
+            const generation = ++state.update;
+            const { key, maxzoom, layers: list } = await state.renderer;
+            vector.setSublayers(sublayers(state.own ?? list));
+            const view = this.map.engine.vectorTilesInView(0, deepestLevel(maxzoom));
+            const wanted = Array.from({ length: Math.floor(view.length / 3) }, (_, i) => [
+                ...view.subarray(i * 3, i * 3 + 3),
+            ]);
+            const keys = new Set(wanted.map((t) => t.join('/')));
+            const loads = wanted.flatMap((t, index) => {
+                const k = t.join('/');
+                if (held.has(k))
+                    return [];
+                const controller = new AbortController();
+                const style = state.style;
+                held.set(k, controller);
+                return [
+                    ask({ key, maxzoom }, t, false, index < 4 ? 'high' : 'auto', controller.signal).then(async (r) => {
+                        if (controller.signal.aborted || !('vectors' in r))
+                            return;
+                        vector.setTile(k, r.vectors);
+                        // Cut under a style changed since: its styles asked for again
+                        if (style !== state.style)
+                            await restyleTile(await state.renderer, k);
+                    }, () => {
+                        // A failure is asked for again on the next update
+                        if (held.get(k) === controller)
+                            held.delete(k);
+                    }),
+                ];
+            });
+            // Out of view: those still asked for go at once, those drawn once their replacements are there (no hole)
+            const drop = (drawn) => {
+                const shown = new Set(vector.tileKeys);
+                [...held].forEach(([k, controller]) => {
+                    if (keys.has(k) || shown.has(k) !== drawn)
+                        return;
+                    controller.abort();
+                    held.delete(k);
+                    vector.removeTile(k);
+                });
+            };
+            drop(false);
+            await Promise.all(loads);
+            // A later update (the view moved again meanwhile) drops for its own view: these keys are no longer the view
+            if (!this.destroyed && generation === state.update)
+                drop(true);
+        };
+        const refresh = () => {
+            update().catch(() => undefined);
+        };
+        /** The style layers changed: the workers' copy, then the styles of the tiles held */
+        const restyle = async (list) => {
+            state.own = list;
+            state.style++;
+            state.renderer = state.renderer.then(({ key }) => this.renderer(() => false, list, key));
+            const renderer = await state.renderer;
+            vector.setSublayers(sublayers(list));
+            await Promise.all(vector.tileKeys.map((k) => restyleTile(renderer, k)));
+        };
+        vector.restyle = (id, group, name, value) => {
+            state.renderer
+                .then(({ layers: list }) => {
+                const next = (state.own ?? list).map((l) => l.id === id ? { ...l, [group]: { ...l[group], [name]: value } } : l);
+                // Visibility and dashes are the engine's: the tiles stay as they are
+                if ((group === 'layout' && name === 'visibility') || name === 'line-dasharray') {
+                    state.own = next;
+                    vector.setSublayers(sublayers(next));
+                    return undefined;
+                }
+                // An outline added or taken away: a feature more or less in each tile, cut again
+                if (name === 'fill-outline-color' || name === 'fill-antialias') {
+                    state.own = next;
+                    state.style++;
+                    state.renderer = state.renderer.then(({ key }) => this.renderer(() => false, next, key));
+                    vector.setSublayers(sublayers(next));
+                    vector.recut?.();
+                    return undefined;
+                }
+                return restyle(next);
+            })
+                .catch(() => undefined);
+        };
+        vector.recut = () => {
+            held.forEach((controller) => {
+                controller.abort();
+            });
+            held.clear();
+            refresh();
+        };
+        vector.styled = state.renderer.then(({ layers: list }) => {
+            if (!this.destroyed)
+                vector.setSublayers(sublayers(state.own ?? list));
+        });
+        // Reported by the style's `ready`
+        vector.styled.catch(() => undefined);
+        // While the camera moves, the tiles follow it (as the labels do: a long drag or flight does not leave the view of
+        // its start drawn)
+        this.followView(update, held, update);
+        return vector;
+    }
     /**
      * A symbol layer with the labels of the style's symbol layers (or those `layers` keeps), updated as the view
      * moves: the labels of the vector tiles in view, the higher style layers placed first. With a raster layer of
@@ -453,7 +627,7 @@ export class VectorTiles {
             color: (p) => p.color,
             haloColor: (p) => p.haloColor,
             haloWidth: (p) => p.haloWidth,
-            anchor: (p) => p.anchor,
+            anchor: (p) => anchor(p.anchor),
             offset: (p) => p.offset,
             maxWidth: (p) => p.maxWidth,
             lineHeight: (p) => p.lineHeight,
@@ -462,7 +636,7 @@ export class VectorTiles {
             textOptional: (p) => p.textOptional === true,
             icon: (p) => (p.icon ? this.iconPrefix + p.icon.image : ''),
             iconSize: (p) => size(p.icon?.size ?? 1, 1),
-            iconAnchor: (p) => (p.icon?.anchor ?? 'center'),
+            iconAnchor: (p) => anchor(p.icon?.anchor),
             iconOffset: (p) => p.icon?.offset ?? [0, 0],
             iconRotate: (p) => p.icon?.rotate ?? 0,
             iconRotationAlignment: (p) => p.icon?.alignment ?? 'viewport',
@@ -482,10 +656,10 @@ export class VectorTiles {
             // Its icons from its sprites, before the first labels
             const icons = style.layers.some((l) => l.type === 'symbol' && l.layout?.['icon-image'] !== undefined);
             if (icons && style.sprite) {
-                for (const sprite of await this.loadSprites(style.sprite)) {
+                (await this.loadSprites(style.sprite)).forEach((sprite) => {
                     if (!this.destroyed)
                         this.map.icons.addSprite(this.iconPrefix, sprite.icons, () => readPixels(sprite.image));
-                }
+                });
             }
             return this.renderer((l) => l.type === 'symbol' && layers(l), []);
         });
@@ -510,57 +684,39 @@ export class VectorTiles {
             if (ground.length > 0) {
                 // The ground's tiles, the nearest first: a tile so many levels coarser than the finest in view has its
                 // labels of a zoom as many under the view's, past the source's deepest level those of that level at the zoom
-                let top = 0;
-                for (let i = 0; i < ground.length; i += 3)
-                    top = Math.max(top, ground[i]);
-                for (let i = 0; i < ground.length && keys.length < maxTiles; i += 3) {
-                    const [z, x, y] = [ground[i], ground[i + 1], ground[i + 2]];
+                const groundTiles = Array.from({ length: Math.ceil(ground.length / 3) }, (_, k) => [
+                    ground[3 * k] ?? 0,
+                    ground[3 * k + 1] ?? 0,
+                    ground[3 * k + 2] ?? 0,
+                ]);
+                const top = groundTiles.reduce((t, [z]) => Math.max(t, z), 0);
+                groundTiles.forEach(([z, x, y]) => {
+                    if (keys.length >= maxTiles)
+                        return;
                     const at = Math.max(0, zoom - (top - z));
                     const tz = Math.min(at, maxzoom, z);
                     const shift = 2 ** (z - tz);
                     const key = `${tz}/${Math.floor(x / shift)}/${Math.floor(y / shift)}${at > tz ? `@${at}` : ''}`;
                     if (!keys.includes(key))
                         keys.push(key);
-                }
+                });
             }
             else {
                 const z = Math.min(zoom, maxzoom);
-                const n = 2 ** z;
-                const [west, south, east, north] = this.map.getBounds();
-                const tx = (lon) => Math.floor(mercatorX(lon) * n);
-                const ty = (lat) => Math.floor(mercatorY(lat) * n);
-                const [cx, cy] = [mercatorX(camera.center[0]) * n, ty(camera.center[1])];
-                // The tiles of the bounds, within a window around the center: a tilted view's bounds reach far, and only
-                // the nearest `maxTiles` are kept anyway
-                const reach = Math.ceil(Math.sqrt(maxTiles)) + 2;
-                const [x0, x1] = [
-                    Math.max(0, tx(west), Math.floor(cx) - reach),
-                    Math.min(n - 1, tx(east), Math.floor(cx) + reach),
-                ];
-                const [y0, y1] = [
-                    Math.max(0, ty(north), Math.floor(cy) - reach),
-                    Math.min(n - 1, ty(south), Math.floor(cy) + reach),
-                ];
-                const wanted = [];
-                for (let y = y0; y <= y1; y += 1)
-                    for (let x = x0; x <= x1; x += 1)
-                        wanted.push([x, y]);
-                // Nearest to the center first, at most `maxTiles` (tilted views reach far)
-                wanted.sort((a, b) => Math.hypot(a[0] + 0.5 - cx, a[1] + 0.5 - cy) - Math.hypot(b[0] + 0.5 - cx, b[1] + 0.5 - cy));
+                const wanted = tilesAround(this.map, camera, z, maxTiles);
                 // Past the source's deepest level, its tiles' labels at the zoom of the view (the layers of the deeper zooms)
-                for (const [x, y] of wanted.slice(0, maxTiles))
-                    keys.push(`${z}/${x}/${y}${zoom > z ? `@${zoom}` : ''}`);
+                keys.push(...wanted.map(([x, y]) => `${z}/${x}/${y}${zoom > z ? `@${zoom}` : ''}`));
             }
             // The same tiles as the labels shown: nothing to do
             const set = keys.join(' ');
             if (set === shown)
                 return;
             const lists = await Promise.all(keys.map((k, index) => {
-                let p = tiles.get(k);
-                if (p)
-                    return p;
+                const cached = tiles.get(k);
+                if (cached)
+                    return cached;
                 const [tile, deeper] = k.split('@');
-                const [tz, x, y] = (tile ?? '').split('/').map(Number);
+                const [tz = 0, x = 0, y = 0] = (tile ?? '').split('/').map(Number);
                 // The nearest tiles first: the others wait for the raster tiles
                 const priority = index < 4 ? 'auto' : 'low';
                 const work = {
@@ -572,7 +728,7 @@ export class VectorTiles {
                     priority,
                     ...(deeper === undefined ? {} : { zoom: Number(deeper) }),
                 };
-                p = this.request(tz, x, y, work).then((r) => tileLabels('labels' in r ? r.labels : []), () => {
+                const p = this.request(tz, x, y, work).then((r) => tileLabels('labels' in r ? r.labels : []), () => {
                     // A network error is not kept: the tile is asked for again on the next update
                     tiles.delete(k);
                     return [];
@@ -594,14 +750,7 @@ export class VectorTiles {
             // The labels of the higher style layers first: they win the collisions; for each style layer, the tiles nearest
             // to the center first
             const layerIds = [...new Set(lists.flatMap((list) => list.map(([layer]) => layer)))].sort((a, b) => b - a);
-            const groups = [];
-            for (const layer of layerIds) {
-                for (const list of lists) {
-                    const group = list.find(([l]) => l === layer)?.[1];
-                    if (group)
-                        groups.push(group);
-                }
-            }
+            const groups = layerIds.flatMap((layer) => lists.map((list) => list.find(([l]) => l === layer)?.[1]).filter((group) => group !== undefined));
             symbol.setGroups(groups);
         };
         // The style failed to load: reported by `ready`
@@ -624,24 +773,53 @@ export class VectorTiles {
         refresh();
         return symbol;
     }
+    /**
+     * Makes a layer's tiles follow the view: `update` now and where the camera stops (`moveend`), `moving` every
+     * `VECTOR_MOVE_REFRESH_MS` while it moves; the requests `held` aborted when destroyed
+     */
+    followView(update, held, moving) {
+        const refresh = () => {
+            update().catch(() => undefined);
+        };
+        const pace = { timer: 0 };
+        const follow = () => {
+            if (pace.timer)
+                return;
+            pace.timer = window.setTimeout(() => {
+                pace.timer = 0;
+                Promise.resolve(moving()).catch(() => undefined);
+            }, VECTOR_MOVE_REFRESH_MS);
+        };
+        this.cleanup.push(this.map.on('move', follow), this.map.on('moveend', refresh), () => {
+            clearTimeout(pace.timer);
+            held.forEach((controller) => {
+                controller.abort();
+            });
+            held.clear();
+        });
+        refresh();
+    }
     /** Stops its workers' work and removes its raster and label layers from the map (those still there) */
     destroy() {
         if (this.destroyed)
             return;
         this.destroyed = true;
-        for (const off of this.cleanup)
+        this.cleanup.forEach((off) => {
             off();
+        });
         this.cleanup.length = 0;
-        for (const layer of this.layers)
+        this.layers.forEach((layer) => {
             if (this.map.hasLayer(layer))
                 layer.remove();
+        });
         this.layers.length = 0;
         this.map.dropVectorTiles(this);
         // The page's copy of the sprites (the workers have theirs), and their icons
         this.sprites
             ?.then((sprites) => {
-            for (const sprite of sprites)
+            sprites.forEach((sprite) => {
                 sprite.image.close();
+            });
             this.map.icons.remove(this.iconPrefix, true);
         })
             .catch(() => undefined);
@@ -651,97 +829,41 @@ export class VectorTiles {
         else {
             // Shared workers: only its requests stop and its renderers go
             this.pool.cancel(this);
-            for (const key of this.renderers)
+            this.renderers.forEach((key) => {
                 this.pool.broadcast({ type: 'drop', key });
+            });
         }
         this.renderers.length = 0;
     }
 }
-/** Colors of the layers of `basicStyle`, in turn */
-const BASIC_COLORS = ['#2f6fd1', '#d1495b', '#2a9d8f', '#e9a03b', '#7b5ea7', '#5c7a29', '#c8553d', '#3d8eb9'];
 /**
- * A plain style for vector tiles known only by their layers' names (a PMTiles archive's `vector_layers`, an MBTiles'
- * metadata): each layer's polygons filled, its lines and outlines stroked and its points as circles, a color per
- * layer, the `name` of points as labels. `source` is the style's vector source (`url`: TileJSON or `pmtiles://…`, or
- * `tiles`)
+ * A `line-dasharray` as the engine takes it: two dashes and gaps in line widths (an odd count repeated, as the
+ * canvas's `setLineDash`; past four, the first four), zeros for a solid line
  */
-export function basicStyle(source, layers) {
-    const out = [];
-    layers.forEach((name, i) => {
-        const color = BASIC_COLORS[i % BASIC_COLORS.length];
-        const base = { source: 'data', 'source-layer': name };
-        out.push({ id: `${name}-fill`, type: 'fill', ...base, paint: { 'fill-color': color, 'fill-opacity': 0.18 } }, { id: `${name}-line`, type: 'line', ...base, paint: { 'line-color': color, 'line-width': 1.2 } }, {
-            id: `${name}-circle`,
-            type: 'circle',
-            ...base,
-            paint: { 'circle-color': color, 'circle-radius': 3.5, 'circle-stroke-color': '#fff', 'circle-stroke-width': 1 },
-        });
-    });
-    layers.forEach((name) => {
-        out.push({
-            id: `${name}-label`,
-            type: 'symbol',
-            source: 'data',
-            'source-layer': name,
-            filter: ['all', ['==', ['geometry-type'], 'Point'], ['has', 'name']],
-            layout: { 'text-field': ['get', 'name'], 'text-size': 12, 'text-offset': [0, 0.9], 'text-anchor': 'top' },
-            paint: { 'text-color': '#1d2433', 'text-halo-color': '#fff', 'text-halo-width': 1.5 },
-        });
-    });
-    return { version: 8, sources: { data: { type: 'vector', ...source } }, layers: out };
-}
-/** HTML of a file reduced to its text, escaped: credits from an archive's metadata cannot run in the page */
-function plainText(html) {
-    return html
-        .replace(/<[^>]*>/g, '')
-        .replace(/&(?!(amp|lt|gt|quot|copy|#\d+);)/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-/** @internal `GeoMap.addPmtiles`: a raster layer of the archive's images, or vector tiles with their raster layer and
- * labels */
-export async function pmtilesLayer(map, url, options) {
-    const archiveUrl = pmtilesUrl(url.startsWith('pmtiles://') ? url : `pmtiles://${url}`);
-    const archive = pmtiles(archiveUrl);
-    const [header, metadata] = await Promise.all([archive.header(), archive.metadata().catch(() => ({}))]);
-    const credit = metadata.attribution;
-    const attribution = options.attribution ?? (typeof credit === 'string' && credit ? plainText(credit) : undefined);
-    const kind = options.kind ?? (header.tileType === 'mvt' ? 'vector' : 'raster');
-    const credits = attribution ? { attribution } : {};
-    if (kind === 'raster') {
-        return map.addRaster({
-            url: `pmtiles://${archiveUrl}`,
-            minZoom: header.minZoom,
-            maxZoom: Math.max(header.maxZoom, 19),
-            ...(options.opacity === undefined ? {} : { opacity: options.opacity }),
-            ...(options.size === undefined ? {} : { size: options.size }),
-            ...(options.before ? { before: options.before } : {}),
-            ...credits,
-        });
-    }
-    const layers = metadata.vector_layers;
-    const names = Array.isArray(layers) ? layers.map((l) => l?.id).filter((id) => typeof id === 'string') : [];
-    const style = options.style ?? basicStyle({ url: `pmtiles://${archiveUrl}` }, names);
-    const tiles = map.vectorTiles({ style, ...credits });
-    tiles.raster({
-        ...(options.opacity === undefined ? {} : { opacity: options.opacity }),
-        ...(options.before ? { before: options.before } : {}),
-    });
-    tiles.labels();
-    return tiles;
-}
-/** A raster loader reading the tiles of a `pmtiles://` archive URL (images of any size, drawn at `size`); undefined
- * for another URL */
-export function pmtilesRasterLoader(url, size) {
-    const archiveUrl = pmtilesUrl(url);
-    if (!archiveUrl)
-        return undefined;
-    const archive = pmtiles(archiveUrl);
-    return async (z, x, y, signal) => {
-        const bytes = await archive.tile(z, x, y, signal);
-        if (!bytes)
-            return null;
-        return createImageBitmap(new Blob([bytes]), { resizeWidth: size, resizeHeight: size });
-    };
-}
+export const dashes = (value, zoom) => {
+    const v = isExpression(value) ? evaluate(value, { zoom, properties: {}, type: 'Unknown' }) : value;
+    const list = Array.isArray(v) ? v.map(Number).filter((d) => Number.isFinite(d) && d >= 0) : [];
+    const even = list.length % 2 === 1 ? [...list, ...list] : list;
+    const [a = 0, b = 0, c = 0, d = 0] = even.length >= 2 && even.some((x) => x > 0) ? even : [];
+    return [a, b, c, d];
+};
+/** Metres around the view's center where every tree is drawn at zoom 16 (twice as far a zoom level out) */
+const TREES_NEAR_METRES = 350;
+/** Whether a style layer draws streets, which glow at night: its id names a road (OpenMapTiles' styles, PLAN IGN's),
+ * not its casing, a railway, a path or a tunnel */
+const isStreet = (layer) => /road|highway|street|motorway|trunk|primary|secondary|tertiary|minor|routier/i.test(layer.id) &&
+    !/casing|outline|rail|path|track|ferry|tunnel|pier|area|pattern|label/i.test(layer.id);
+/** A `line-cap` as the engine draws it, at the camera's zoom (MapLibre's default: butt) */
+const lineCap = (value, zoom) => {
+    const v = isExpression(value) ? evaluate(value, { zoom, properties: {}, type: 'Unknown' }) : value;
+    return v === 'round' || v === 'square' ? v : 'butt';
+};
+/** The deepest level `vectors()` cuts its tiles at: past the source's deepest level, its tiles cut again into deeper
+ * ones (overzoom, as MapLibre does) down to level 18, their filters and styles those of their level, smaller tiles
+ * drawn in a closer view; past it, the tiles of that level stretched */
+const OVERZOOM_LEVEL = 18;
+/** The deepest level of the tiles of `vectors()` over a source whose deepest is `maxzoom` */
+const deepestLevel = (maxzoom) => Math.max(maxzoom, OVERZOOM_LEVEL);
+/** Milliseconds between two updates of the tiles of `vectors()` while the camera moves */
+const VECTOR_MOVE_REFRESH_MS = 250;
 //# sourceMappingURL=vectortiles.js.map