isard 0.6.1 → 0.8.0

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;
@@ -532,7 +602,7 @@ export class GeoMap {
             ...(o.direction === undefined
                 ? [Number.NaN, 0, 0, 0]
                 : [o.direction, o.tilt ?? 0, o.fov ?? 60, o.verticalFov ?? 40]),
-        ])), new Float32Array(rgb(first.visibleColor ?? '#2f9e44')), new Float32Array(rgb(first.hiddenColor ?? '#e03131')), first.opacity ?? 0.55);
+        ])), new Float32Array(rgb(first.visibleColor ?? '#2f9e44')), new Float32Array(rgb(first.hiddenColor ?? '#e03131')), first.opacity ?? 0.7, new Float32Array(first.coneColor ? rgb(first.coneColor) : []));
         this.requestRender();
     }
     /** Relief under the basemap: true for the body's terrain model (on the Earth the worldwide Terrain Tiles, NASA's
@@ -634,14 +704,99 @@ export class GeoMap {
         cancelAnimationFrame(this.hoverPoll);
         this.hoverPoll = 0;
     }
-    /** Screen point (CSS pixels) of a position, undefined behind the camera */
-    project(lonLat) {
-        return this.engine.project(lonLat[0], lonLat[1]);
+    /** Screen point (CSS pixels) of a position on the ground (the relief), or `height` metres above it, undefined
+     * behind the camera */
+    project(lonLat, height = 0) {
+        return this.engine.project(lonLat[0], lonLat[1], height);
     }
     /** Position under a screen point (CSS pixels), undefined above the horizon */
     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 */
+    pickSurface(point) {
+        const hit = this.engine.surface(point[0], point[1]);
+        return hit && { lonLat: [hit[0], hit[1]], height: hit[2] };
+    }
+    /** The height above the relief, in metres, of the top of what stands at a position: a roof, a mesh, 0 on the bare
+     * ground; undefined where nothing of the last frame is there. The scene is drawn from above into a single pixel and
+     * read back: cheap, but it waits for the GPU */
+    surfaceAt(lonLat) {
+        return this.engine.surfaceAt(lonLat[0], lonLat[1]);
+    }
     // ── Overlays and controls ──
     /** Adds a control in a corner of the map; controls stack from the corner inward */
     addControl(control, position = 'top-right') {
@@ -893,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
@@ -1063,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();
@@ -1089,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