isard 1.2.0 → 1.4.0

package/dist/basemap/vectortiles.js

@@ -8,22 +8,24 @@
  * 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 { latitude, longitude, 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 { isStyle, 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',
     liberty: 'https://tiles.openfreemap.org/styles/liberty',
     bright: 'https://tiles.openfreemap.org/styles/bright',
+    dark: 'https://tiles.openfreemap.org/styles/dark',
+    fiord: 'https://tiles.openfreemap.org/styles/fiord',
 };
 /** PLAN.IGN vector styles of the Géoplateforme (France) */
 export const PLAN_STYLES = {
@@ -35,6 +37,7 @@ export const VECTOR_BASEMAPS = {
     'osm-positron': OPENFREEMAP_STYLES.positron,
     'osm-liberty': OPENFREEMAP_STYLES.liberty,
     'osm-bright': OPENFREEMAP_STYLES.bright,
+    'osm-dark': OPENFREEMAP_STYLES.dark,
     'ign-plan-vector': PLAN_STYLES.standard,
     'ign-plan-grey-vector': PLAN_STYLES.grey,
 };
@@ -120,193 +123,26 @@ const resolveSource = async (source) => {
 };
 /** 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 const 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 const 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 const 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
-    const along = Math.abs(x + 0.5 - cx) % n;
-    const dx = Math.min(along, n - along);
-    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 const 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 const 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;
-        const start = () => {
-            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.workers = [start(), ...Array.from({ length: Math.max(1, count) - 1 }, start)];
-        this.unfollow = onHeaderRules((rules) => {
-            this.workers.forEach((w) => {
-                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)`);
-        this.pending.forEach((p, id) => {
-            if (p.worker !== worker)
-                return;
-            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)
-        this.workers.forEach((w) => {
-            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) {
-        this.pending.forEach((p, id) => {
-            if (p.owner !== owner)
-                return;
-            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();
-        this.workers.forEach((w) => {
-            w.terminate();
-        });
-        const pending = [...this.pending.values()];
-        this.pending.clear();
-        pending.forEach((p) => {
-            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 const tileLabels = (candidates) => {
     const byLayer = new Map();
@@ -425,10 +261,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
@@ -436,8 +272,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
@@ -472,6 +309,431 @@ 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;
+    }
+    /**
+     * The wind through the streets around the view, as particles at street level (`height`, default 3 metres) between
+     * the style's buildings (`layers`, default its `building` and `bati_surf` layers): their footprints laid on a grid of
+     * `cell` metres (default 4) over a square of `size` metres (default 1200) around the view's center, the flow of the
+     * air round them a potential flow (it goes round the blocks and faster through the narrow streets; no wake behind
+     * them), computed in a worker by the grid module from street level (`minZoom`, default 15) and again when the view
+     * leaves the square's middle. `wind` is the wind far away (east and north, m/s, default a light breeze from the
+     * south-west); `setWind` changes it at once (the flow is linear in it: nothing computed again), from a model's hour
+     * (`windAt`) for instance; `computed` resolves once the first square's flow is there. The other options are the flow
+     * layer's (`addFlow`)
+     */
+    streetWind(options = {}) {
+        const { size = 1200, cell = 4, iterations = 300, layers = isBuildings, minZoom = 15, ...flow } = options;
+        const renderer = this.renderer((l) => (l.type === 'fill' || l.type === 'fill-extrusion') && layers(l), []);
+        const [lon, lat] = this.map.getCamera().center;
+        // Nothing yet: a field of no value, where no particle is born
+        const empty = { width: 2, height: 2, u: [NaN, NaN, NaN, NaN], v: [NaN, NaN, NaN, NaN] };
+        const layer = this.map.addFlow({
+            height: 3,
+            ...flow,
+            field: { ...empty, bounds: [lon, lat, lon + 1e-4, lat + 1e-4] },
+        });
+        const state = { wind: options.wind ?? [3, 2], asked: 0, wait: 1000 };
+        /** The flow of the wind far away: `u` times the flow towards the east plus `v` times the one towards the north */
+        const send = () => {
+            const { flows, grid, wind } = state;
+            if (!flows || !grid)
+                return;
+            const [wu, wv] = wind;
+            const u = flows.eastU.map((e, i) => wu * e + wv * (flows.northU[i] ?? 0));
+            const v = flows.eastV.map((e, i) => wu * e + wv * (flows.northV[i] ?? 0));
+            layer.setField({ ...grid, u, v });
+        };
+        const held = new Map();
+        const first = {};
+        const computed = new Promise((resolve) => {
+            first.resolve = resolve;
+        });
+        const update = async () => {
+            if (this.destroyed)
+                return;
+            const camera = this.map.getCamera();
+            const [x, y] = [mercatorX(camera.center[0]), mercatorY(camera.center[1])];
+            // Half the square in Mercator, at its latitude
+            const half = size / 2 / (40_075_016.686 * Math.cos((camera.center[1] * Math.PI) / 180));
+            const square = state.square;
+            // Off street level, or still in the square's middle: nothing to compute
+            if (camera.zoom < minZoom)
+                return;
+            if (square &&
+                Math.abs(x - (square[0] + square[2]) / 2) < half / 3 &&
+                Math.abs(y - (square[1] + square[3]) / 2) < half / 3) {
+                return;
+            }
+            const { key, maxzoom } = await renderer;
+            const bounds = [x - half, y - half, x + half, y + half];
+            const n = 2 ** maxzoom;
+            const tiles = [];
+            for (let ty = Math.floor(bounds[1] * n); ty <= Math.floor(bounds[3] * n); ty++) {
+                for (let tx = Math.floor(bounds[0] * n); tx <= Math.floor(bounds[2] * n); tx++)
+                    tiles.push(tx, ty);
+            }
+            const sides = Math.max(8, Math.round(size / cell));
+            const work = {
+                type: 'street',
+                key,
+                module: this.map.gridUrl,
+                z: maxzoom,
+                tiles,
+                bounds,
+                width: sides,
+                height: sides,
+                iterations,
+            };
+            const asked = ++state.asked;
+            held.forEach((c) => {
+                c.abort();
+            });
+            held.clear();
+            const controller = new AbortController();
+            held.set('square', controller);
+            state.square = bounds;
+            const answer = await this.request(maxzoom, Math.floor(x * n), Math.floor(y * n), work, controller.signal).catch((error) => ({ error }));
+            if (asked !== state.asked || controller.signal.aborted)
+                return;
+            // Failed (a tile or the grid module not fetched, a worker of an older build): the square asked for again later,
+            // a while after each failure
+            if (!('street' in answer)) {
+                console.warn("isard: the streets' wind not computed, tried again", 'error' in answer ? answer.error : answer);
+                state.square = undefined;
+                clearTimeout(state.retry);
+                state.retry = window.setTimeout(() => {
+                    update().catch(() => undefined);
+                }, state.wait);
+                state.wait = Math.min(state.wait * 2, 30_000);
+                return;
+            }
+            state.wait = 1000;
+            state.flows = answer.street;
+            state.grid = {
+                width: sides,
+                height: sides,
+                bounds: [longitude(bounds[0]), latitude(bounds[3]), longitude(bounds[2]), latitude(bounds[1])],
+            };
+            send();
+            first.resolve?.();
+        };
+        renderer.catch(() => undefined);
+        this.layers.push(layer);
+        this.followView(update, held, () => undefined);
+        this.cleanup.push(() => {
+            clearTimeout(state.retry);
+        });
+        return Object.assign(layer, {
+            computed,
+            setWind: (wind) => {
+                state.wind = wind;
+                send();
+            },
+        });
+    }
+    /**
+     * 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
@@ -565,27 +827,9 @@ export class VectorTiles {
             }
             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 = Array.from({ length: y1 - y0 + 1 }, (_, j) => y0 + j).flatMap((y) => Array.from({ length: x1 - x0 + 1 }, (_, i) => [x0 + i, 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)
-                keys.push(...wanted.slice(0, maxTiles).map(([x, y]) => `${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(' ');
@@ -653,6 +897,32 @@ 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)
@@ -690,96 +960,34 @@ export class VectorTiles {
         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 const basicStyle = (source, layers) => {
-    const out = [];
-    layers.forEach((name, i) => {
-        const color = BASIC_COLORS[i % BASIC_COLORS.length] ?? '#2f6fd1';
-        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 */
-const plainText = (html) => {
-    return html
-        .replace(/<[^>]*>/g, '')
-        .replace(/&(?!(amp|lt|gt|quot|copy|#\d+);)/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
+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];
 };
-/** @internal `GeoMap.addPmtiles`: a raster layer of the archive's images, or vector tiles with their raster layer and
- * labels */
-export const pmtilesLayer = async (map, url, options) => {
-    const archiveUrl = pmtilesUrl(url.startsWith('pmtiles://') ? url : `pmtiles://${url}`) ?? 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) => (isRecord(l) ? l.id : undefined)).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 const 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 });
-    };
+/** 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