isard 0.7.0 → 0.8.0

package/dist/map.d.ts

@@ -3,9 +3,10 @@ import { ExtrusionLayer, type ExtrusionOptions } from './extrusions.ts';
 import { CircleLayer, type CircleOptions, FillLayer, type FillOptions, LineLayer, type LineOptions } from './features.ts';
 import { type ImageOptions, type Pixels } from './icons.ts';
 import { CustomLayer, type CustomLayerInterface, GroundLayer, type GroundOptions, type Layer, ModelLayer, type ModelOptions, NetworkLayer, RasterLayer, Tiles3dLayer } from './layers.ts';
+import { type PanoramaOptions, type Panoramas } from './panoramas.ts';
 import { PointCloudLayer, type PointCloudOptions } from './pointclouds.ts';
 import { SymbolLayer, type SymbolOptions } from './symbols.ts';
-import type { AnimationOptions, AtmosphereOptions, Basemap, FeatureHit, FlyToOptions, GeoMapOptions, LoadingMode, LonLat, MapEvents, NetworkOptions, Point, Projection, RasterOptions, TerrainModel, TerrainOptions, Tiles3dOptions, ViewshedOptions } from './types.ts';
+import type { AnimationOptions, AtmosphereOptions, Basemap, FeatureHit, FirstPersonView, FlyToOptions, GeoMapOptions, LoadingMode, LonLat, MapEvents, NetworkOptions, Point, Projection, RasterOptions, SwipeOptions, TerrainModel, TerrainOptions, Tiles3dOptions, ViewshedOptions } from './types.ts';
 import { type PmtilesOptions, VectorTiles, type VectorTilesOptions } from './vectortiles.ts';
 import type { Camera, PickHit, RasterLayerStats } from './wasm/isard.js';
 /** A map (see `GeoMap.create`); layers take it as their host */
@@ -82,6 +83,8 @@ export declare class GeoMap {
     private basemapPool;
     /** Stops watching the device pixel ratio */
     private unwatchRatio;
+    /** Stops following the page's request headers (`setRequestHeaders`) */
+    private unwatchHeaders;
     /** Stops listening to the canvas's context loss and restoration */
     private readonly unwatchContext;
     /** The loaders of the relief by encoding, URL and floor: the same loader for the same tiles (the engine keeps its
@@ -104,6 +107,23 @@ export declare class GeoMap {
     private preloadTiles3d;
     /** After a context loss: a new engine with the same camera, settings and layers (same handles, same order) */
     private restore;
+    /** The street-level eye, if the camera is one */
+    get firstPerson(): Readonly<Required<FirstPersonView>> | undefined;
+    /**
+     * Puts the camera at street level: an eye `height` metres above the ground, looking `bearing` and `pitch`, the
+     * drag turning it around (the wheel narrows or widens its field of view); undefined gives back the camera turning
+     * around a point, above where the eye stood, facing the same way
+     */
+    setFirstPerson(view: FirstPersonView | undefined): void;
+    /** The swipe set (`setSwipe`), applied again with the layers' ids of a new engine */
+    private swipe;
+    /**
+     * Compares two states of a place: `layers` shown on one side of a vertical line only, at `position` CSS pixels
+     * from the left of the map (left of it by default, `side: 'right'` for the other), the layers beneath them on the
+     * other side. Set again as the line moves (a slider, a drag); undefined stops
+     */
+    setSwipe(options: SwipeOptions | undefined): void;
+    private applySwipe;
     /** Takes a layer out of the drawing order (to put it back elsewhere, or for good) */
     private unlist;
     private add;
@@ -140,6 +160,8 @@ export declare class GeoMap {
      * (`direction`): the relief, extrusions, 3D Tiles and models hide what lies behind them (only what the map has
      * loaded for its view). Several observers (16 at most): what any of them sees is seen, what is hidden from all those
      * that reach it is hidden, in the colors and opacity of the first. Undefined or none removes it */
+    /** The viewshed set, set again in a new engine */
+    private viewshed;
     setViewshed(options: ViewshedOptions | readonly ViewshedOptions[] | undefined): void;
     /** Relief under the basemap: true for the body's terrain model (on the Earth the worldwide Terrain Tiles, NASA's
      * on the Moon and Mars), one of the Earth's models by name (`'ign'`), its options, or false; on another body, its
@@ -176,6 +198,21 @@ export declare class GeoMap {
     project(lonLat: LonLat, height?: number): Point | undefined;
     /** Position under a screen point (CSS pixels), undefined above the horizon */
     unproject(point: Point): LonLat | undefined;
+    /**
+     * Street-level panoramas (oriented images of a vehicle's cameras, the iTowns immersive format): their positions
+     * and calibrations loaded, none shown until `show`, which projects one onto the scene around it
+     */
+    addPanoramas(options: PanoramaOptions): Promise<Panoramas>;
+    /** The panorama sets, their panorama shown again in a new engine */
+    private readonly panoramaSets;
+    /** Altitude of the relief at a position, in metres (exaggeration included): from the copy of its tiles the map
+     * keeps, as fine as the tiles loaded there; undefined without relief or where none is loaded yet */
+    elevationAt(lonLat: LonLat): number | undefined;
+    /** Metres on the ground per CSS pixel at a screen point (default the center of the map), across the screen: for a
+     * scale bar; undefined above the horizon */
+    metersPerPixel(point?: Point): number | undefined;
+    /** Whether a double click zooms in (Shift: out), on by default: off while a drawing takes double clicks */
+    setDoubleClickZoom(enabled: boolean): void;
     /** What is drawn under a screen point (CSS pixels), on the relief or standing on it (a roof, a wall, a mesh): its
      * position and its height above the relief, in metres; undefined where nothing was drawn. The last frame's scene is
      * drawn again and read back, waiting for the GPU (a stall): for clicks and drags */

package/dist/map.js

@@ -15,7 +15,9 @@ import { equirectangularGrid, gridLoader, gridZooms, resolveGrid } from "./grid.
 import { Icons, readPixels } from "./icons.js";
 import { Interaction } from "./interaction.js";
 import { CustomLayer, GroundLayer, ModelLayer, NetworkLayer, RasterLayer, Tiles3dLayer, } from "./layers.js";
+import { loadPanoramas } from "./panoramas.js";
 import { PointCloudLayer } from "./pointclouds.js";
+import { headerRules, onHeaderRules } from "./requests.js";
 import { atmosphereSettings, bodySettings, haloSettings, rgb, terrainSettings, } from "./settings.js";
 import { injectStyle } from "./style.js";
 import { SymbolLayer, symbolStyle } from "./symbols.js";
@@ -138,6 +140,8 @@ export class GeoMap {
     basemapPool;
     /** Stops watching the device pixel ratio */
     unwatchRatio;
+    /** Stops following the page's request headers (`setRequestHeaders`) */
+    unwatchHeaders = () => undefined;
     /** Stops listening to the canvas's context loss and restoration */
     unwatchContext;
     /** The loaders of the relief by encoding, URL and floor: the same loader for the same tiles (the engine keeps its
@@ -202,6 +206,8 @@ export class GeoMap {
             globeColor: this.earth ? SEA['osm-positron'] : rgb(body.color),
         };
         this.#engine = this.createEngine();
+        // Once it has an engine: a map whose creation failed before is not left following them
+        this.unwatchHeaders = onHeaderRules((rules) => sendHeaders(this.#engine, rules));
         // The browser may take the GPU away (driver reset, background tab on mobile): the map waits, then rebuilds
         const lost = (event) => {
             event.preventDefault();
@@ -256,6 +262,7 @@ export class GeoMap {
         // The body first: the layers' shaders may take its size
         const { radius, flattening, atmosphere: air, relief } = this.settings.body;
         engine.setBody(radius, flattening, haloSettings(air), ...relief);
+        sendHeaders(engine, headerRules());
         const { zoomRange, maxPitch, globe, sky, atmosphere, terrain, loading, background, globeColor } = this.settings;
         engine.setZoomRange(...zoomRange);
         engine.setMaxPitch(maxPitch);
@@ -349,8 +356,68 @@ export class GeoMap {
                 report(error);
             }
         }
+        this.applySwipe();
+        // A street-level eye stays one in the new engine
+        if (this.#firstPerson)
+            this.setFirstPerson(this.#firstPerson);
+        // What the old engine drew over the scene: the viewshed, the panoramas shown
+        if (this.viewshed)
+            this.setViewshed(this.viewshed);
+        for (const set of this.panoramaSets)
+            if (set.current)
+                void set.show(set.current.index).catch(report);
         this.resize();
     }
+    /** The street-level eye, while there is one (`setFirstPerson`) */
+    #firstPerson;
+    /** The street-level eye, if the camera is one */
+    get firstPerson() {
+        return this.#firstPerson;
+    }
+    /**
+     * Puts the camera at street level: an eye `height` metres above the ground, looking `bearing` and `pitch`, the
+     * drag turning it around (the wheel narrows or widens its field of view); undefined gives back the camera turning
+     * around a point, above where the eye stood, facing the same way
+     */
+    setFirstPerson(view) {
+        if (!view) {
+            const was = this.#firstPerson;
+            this.#firstPerson = undefined;
+            if (was)
+                this.setCamera({ center: was.lonLat, zoom: 18, pitch: 60, bearing: was.bearing });
+            return;
+        }
+        const eye = {
+            height: 1.7,
+            pitch: 90,
+            fov: 75,
+            ...view,
+            lonLat: [view.lonLat[0], view.lonLat[1]],
+        };
+        eye.pitch = Math.max(1, Math.min(179, eye.pitch));
+        eye.fov = Math.max(10, Math.min(140, eye.fov));
+        eye.bearing = ((eye.bearing % 360) + 360) % 360;
+        this.#firstPerson = eye;
+        this.engine.setFirstPerson(eye.lonLat[0], eye.lonLat[1], eye.height, eye.bearing, eye.pitch, eye.fov);
+        this.requestRender();
+    }
+    /** The swipe set (`setSwipe`), applied again with the layers' ids of a new engine */
+    swipe;
+    /**
+     * Compares two states of a place: `layers` shown on one side of a vertical line only, at `position` CSS pixels
+     * from the left of the map (left of it by default, `side: 'right'` for the other), the layers beneath them on the
+     * other side. Set again as the line moves (a slider, a drag); undefined stops
+     */
+    setSwipe(options) {
+        this.swipe = options && options.layers.length > 0 ? { ...options, layers: [...options.layers] } : undefined;
+        this.applySwipe();
+        this.requestRender();
+    }
+    applySwipe() {
+        const s = this.swipe;
+        const ids = Uint32Array.from((s?.layers ?? []).filter((l) => l.id >= 0), (l) => l.id);
+        this.engine.setSwipe(s && ids.length > 0 ? s.position : Number.NaN, s?.side === 'right', ids);
+    }
     /** @internal Forgets a removed layer */
     detach(layer) {
         this.unlist(layer);
@@ -515,7 +582,10 @@ export class GeoMap {
      * (`direction`): the relief, extrusions, 3D Tiles and models hide what lies behind them (only what the map has
      * loaded for its view). Several observers (16 at most): what any of them sees is seen, what is hidden from all those
      * that reach it is hidden, in the colors and opacity of the first. Undefined or none removes it */
+    /** The viewshed set, set again in a new engine */
+    viewshed;
     setViewshed(options) {
+        this.viewshed = options;
         let observers = [];
         if (options)
             observers = 'position' in options ? [options] : options;
@@ -643,6 +713,77 @@ export class GeoMap {
     unproject(point) {
         return this.engine.ground(point[0], point[1]);
     }
+    /**
+     * Street-level panoramas (oriented images of a vehicle's cameras, the iTowns immersive format): their positions
+     * and calibrations loaded, none shown until `show`, which projects one onto the scene around it
+     */
+    async addPanoramas(options) {
+        // Drawn by the engine with 3D Tiles: loaded first if needed
+        if (!this.tiles3dModule) {
+            this.upgrade();
+            await this.upgrading;
+            if (!this.tiles3dModule)
+                throw new Error('isard: panoramas need the engine with 3D Tiles, which failed to load');
+        }
+        const host = {
+            setPanorama: (...args) => {
+                this.engine.setPanorama(...args);
+                this.requestRender();
+            },
+            setPanoramaImage: (index, image) => this.engine.setPanoramaImage(index, image),
+            clearPanorama: () => this.engine.clearPanorama(),
+            geoidHeight: (lon, lat) => this.engineClass.geoidHeight(lon, lat),
+            firstPerson: () => this.firstPerson,
+            setFirstPerson: (view) => this.setFirstPerson(view),
+            elevationAt: (lonLat) => this.elevationAt(lonLat),
+            listen: (click, key, wheel) => {
+                const off = this.on('click', ({ lonLat }) => click(lonLat));
+                const container = this.getContainer();
+                // Before the map's own wheel (its zoom, the eye's field of view)
+                const onWheel = (e) => {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    wheel(e);
+                };
+                container.addEventListener('keydown', key);
+                container.addEventListener('wheel', onWheel, { capture: true, passive: false });
+                return () => {
+                    off();
+                    container.removeEventListener('keydown', key);
+                    container.removeEventListener('wheel', onWheel, { capture: true });
+                };
+            },
+        };
+        const panoramas = await loadPanoramas(host, options);
+        this.panoramaSets.add(panoramas);
+        return panoramas;
+    }
+    /** The panorama sets, their panorama shown again in a new engine */
+    panoramaSets = new Set();
+    /** Altitude of the relief at a position, in metres (exaggeration included): from the copy of its tiles the map
+     * keeps, as fine as the tiles loaded there; undefined without relief or where none is loaded yet */
+    elevationAt(lonLat) {
+        return this.engine.elevationAt(lonLat[0], lonLat[1]);
+    }
+    /** Metres on the ground per CSS pixel at a screen point (default the center of the map), across the screen: for a
+     * scale bar; undefined above the horizon */
+    metersPerPixel(point) {
+        const [x, y] = point ?? [this.canvas.clientWidth / 2, this.canvas.clientHeight / 2];
+        const a = this.unproject([x - 0.5, y]);
+        const b = this.unproject([x + 0.5, y]);
+        if (!a || !b)
+            return undefined;
+        // Haversine, on the mean radius of the body
+        const rad = Math.PI / 180;
+        const [dLat, dLon] = [(b[1] - a[1]) * rad, (b[0] - a[0]) * rad];
+        const h = Math.sin(dLat / 2) ** 2 + Math.cos(a[1] * rad) * Math.cos(b[1] * rad) * Math.sin(dLon / 2) ** 2;
+        return 2 * this.settings.body.radius * Math.asin(Math.min(1, Math.sqrt(h)));
+    }
+    /** Whether a double click zooms in (Shift: out), on by default: off while a drawing takes double clicks */
+    setDoubleClickZoom(enabled) {
+        if (this.interaction)
+            this.interaction.doubleClickZoom = enabled;
+    }
     /** What is drawn under a screen point (CSS pixels), on the relief or standing on it (a roof, a wall, a mesh): its
      * position and its height above the relief, in metres; undefined where nothing was drawn. The last frame's scene is
      * drawn again and read back, waiting for the GPU (a stall): for clicks and drags */
@@ -907,8 +1048,13 @@ export class GeoMap {
     }
     /** Textured meshes in 3D Tiles (photogrammetry, buildings), drawn with depth over the basemap */
     addTiles3d(options) {
-        const { url, maxScreenSpaceError = 16, opacity = 1, pointSize } = options;
-        return this.add(new Tiles3dLayer(this, url, { maxScreenSpaceError, opacity, ...(pointSize !== undefined ? { pointSize } : {}) }));
+        const { url, maxScreenSpaceError = 16, opacity = 1, pointSize, color, geoid = false } = options;
+        return this.add(new Tiles3dLayer(this, url, geoid, {
+            maxScreenSpaceError,
+            opacity,
+            ...(pointSize !== undefined ? { pointSize } : {}),
+            ...(color !== undefined ? { color } : {}),
+        }));
     }
     /**
      * A point cloud (see `PointCloudOptions`): a COPC file read by range requests (IGN's LiDAR HD…), or 3D Tiles
@@ -1077,6 +1223,7 @@ export class GeoMap {
         this.basemapPool = undefined;
         this.unwatchRatio?.();
         this.unwatchRatio = undefined;
+        this.unwatchHeaders();
         this.resizeObserver.disconnect();
         this.interaction?.destroy();
         this.loader?.destroy();
@@ -1103,4 +1250,8 @@ export class GeoMap {
             listeners.clear();
     }
 }
+/** The page's request headers to an engine (its own requests: raster tiles, tilesets, point clouds) */
+function sendHeaders(engine, rules) {
+    engine.setRequestHeaders(rules.map(([prefix]) => prefix), Uint32Array.from(rules, ([, headers]) => Object.keys(headers).length), rules.flatMap(([, headers]) => Object.entries(headers).flat()));
+}
 //# sourceMappingURL=map.js.map