@npm9912/v-map 0.1.0

package/dist/collection/map-provider/geotiff/utils/sampling-utils.js

@@ -0,0 +1,108 @@
+import { normalizeValue, normalizeToColorMapRange, } from "./normalization-utils";
+import { applyColorMap } from "./colormap-utils";
+/**
+ * Nearest-Neighbor Sampling with window-based reading and multi-band support
+ * Returns [R, G, B, A] values (0-255)
+ */
+export function sampleNearest(x, y, rasterBands, arrayType, width, height, offsetX, offsetY, colorStops) {
+    const px = Math.round(x) - offsetX;
+    const py = Math.round(y) - offsetY;
+    if (px < 0 || px >= width || py < 0 || py >= height) {
+        return null;
+    }
+    const idx = py * width + px;
+    const bandCount = rasterBands.length;
+    if (bandCount === 1) {
+        // Grayscale - apply colormap if specified
+        const rawValue = rasterBands[0][idx];
+        if (colorStops) {
+            // Apply colormap (only for Float types or when colorStops provided)
+            const normalizedValue = normalizeToColorMapRange(rawValue);
+            const [r, g, b] = applyColorMap(normalizedValue, colorStops);
+            return [r, g, b, 255];
+        }
+        else {
+            // Regular grayscale normalization
+            const gray = normalizeValue(rawValue, arrayType);
+            return [gray, gray, gray, 255];
+        }
+    }
+    else if (bandCount === 3) {
+        // RGB
+        const r = normalizeValue(rasterBands[0][idx], arrayType);
+        const g = normalizeValue(rasterBands[1][idx], arrayType);
+        const b = normalizeValue(rasterBands[2][idx], arrayType);
+        return [r, g, b, 255];
+    }
+    else if (bandCount >= 4) {
+        // RGBA
+        const r = normalizeValue(rasterBands[0][idx], arrayType);
+        const g = normalizeValue(rasterBands[1][idx], arrayType);
+        const b = normalizeValue(rasterBands[2][idx], arrayType);
+        const a = normalizeValue(rasterBands[3][idx], arrayType);
+        return [r, g, b, a];
+    }
+    return null;
+}
+/**
+ * Bilinear Interpolation with window-based reading and multi-band support
+ * Returns [R, G, B, A] values (0-255)
+ */
+export function sampleBilinear(x, y, rasterBands, arrayType, width, height, offsetX, offsetY, colorStops) {
+    const localX = x - offsetX;
+    const localY = y - offsetY;
+    // Bounds-Check
+    if (localX < 0 ||
+        localX >= width - 1 ||
+        localY < 0 ||
+        localY >= height - 1) {
+        return null;
+    }
+    // Bilineare Interpolation
+    const x0 = Math.floor(localX);
+    const x1 = Math.ceil(localX);
+    const y0 = Math.floor(localY);
+    const y1 = Math.ceil(localY);
+    const fx = localX - x0;
+    const fy = localY - y0;
+    const bandCount = rasterBands.length;
+    const result = [0, 0, 0, 255];
+    if (bandCount === 1) {
+        // Grayscale - interpolate first, then apply colormap
+        const band = rasterBands[0];
+        const v00 = band[y0 * width + x0];
+        const v10 = band[y0 * width + x1];
+        const v01 = band[y1 * width + x0];
+        const v11 = band[y1 * width + x1];
+        const v0 = v00 * (1 - fx) + v10 * fx;
+        const v1 = v01 * (1 - fx) + v11 * fx;
+        const interpolated = v0 * (1 - fy) + v1 * fy;
+        if (colorStops) {
+            // Apply colormap (only for Float types or when colorStops provided)
+            const normalizedValue = normalizeToColorMapRange(interpolated);
+            const [r, g, b] = applyColorMap(normalizedValue, colorStops);
+            return [r, g, b, 255];
+        }
+        else {
+            // Regular grayscale normalization
+            const gray = normalizeValue(interpolated, arrayType);
+            return [gray, gray, gray, 255];
+        }
+    }
+    else {
+        // RGB/RGBA - interpolate each band
+        const bandsToProcess = Math.min(bandCount, 4);
+        for (let b = 0; b < bandsToProcess; b++) {
+            const band = rasterBands[b];
+            const v00 = band[y0 * width + x0];
+            const v10 = band[y0 * width + x1];
+            const v01 = band[y1 * width + x0];
+            const v11 = band[y1 * width + x1];
+            const v0 = v00 * (1 - fx) + v10 * fx;
+            const v1 = v01 * (1 - fx) + v11 * fx;
+            const interpolated = v0 * (1 - fy) + v1 * fy;
+            result[b] = normalizeValue(interpolated, arrayType);
+        }
+    }
+    return result;
+}

package/dist/collection/map-provider/leaflet/GeoTIFFGridLayer.js

@@ -0,0 +1,147 @@
+import * as L from "leaflet";
+import { GeoTIFFTileProcessor } from "../geotiff/utils/GeoTIFFTileProcessor";
+import { getColorStops } from "../geotiff/utils/colormap-utils";
+import { loadGeoTIFFSource } from "../geotiff/geotiff-source";
+export class GeoTIFFGridLayer extends L.GridLayer {
+    geotiffOptions;
+    tileProcessor = null;
+    colorStops;
+    loadingPromise;
+    defaultResolution = 1;
+    defaultResample = 'bilinear';
+    constructor(options) {
+        super(options);
+        this.geotiffOptions = { ...options };
+    }
+    onAdd(map) {
+        super.onAdd(map);
+        void this.ensureReady().then(() => this.redraw());
+        return this;
+    }
+    createTile(coords, done) {
+        const size = this.getTileSize();
+        const canvas = L.DomUtil.create('canvas', 'leaflet-tile');
+        canvas.width = size.x;
+        canvas.height = size.y;
+        this.ensureReady()
+            .then(async () => {
+            if (!this.tileProcessor) {
+                done(null, canvas);
+                return;
+            }
+            try {
+                const rgba = await this.tileProcessor.getTileData({
+                    x: coords.x,
+                    y: coords.y,
+                    z: coords.z,
+                    tileSize: size.x,
+                    resolution: this.geotiffOptions.resolution ?? this.defaultResolution,
+                    resampleMethod: this.geotiffOptions.resampleMethod ?? this.defaultResample,
+                    colorStops: this.colorStops,
+                });
+                if (!rgba) {
+                    done(null, canvas);
+                    return;
+                }
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    const imageData = ctx.createImageData(size.x, size.y);
+                    imageData.data.set(rgba);
+                    ctx.putImageData(imageData, 0, 0);
+                }
+                done(null, canvas);
+            }
+            catch (err) {
+                done(err, canvas);
+            }
+        })
+            .catch(err => {
+            done(err, canvas);
+        });
+        return canvas;
+    }
+    async ensureReady() {
+        if (!this.loadingPromise) {
+            this.loadingPromise = this.initializeProcessor();
+        }
+        return this.loadingPromise;
+    }
+    async updateSource(options) {
+        Object.assign(this.geotiffOptions, options);
+        this.tileProcessor = null;
+        this.colorStops = undefined;
+        this.loadingPromise = undefined;
+        await this.ensureReady();
+        this.redraw();
+    }
+    async initializeProcessor() {
+        if (this.tileProcessor)
+            return;
+        const [geotiffModule, { default: proj4 }, geokeysModule] = await Promise.all([
+            import('geotiff'),
+            import('proj4'),
+            import('geotiff-geokeys-to-proj4'),
+        ]);
+        const source = await loadGeoTIFFSource(this.geotiffOptions.url, {
+            projection: undefined,
+            forceProjection: false,
+            nodata: this.geotiffOptions.nodata,
+        }, {
+            geotiff: geotiffModule,
+            proj4,
+            geokeysToProj4: geokeysModule,
+        });
+        const transformViewToSourceMapFn = (coord) => {
+            const result = source.proj4(this.geotiffOptions.viewProjection, //source.toProjection,
+            source.fromProjection, coord);
+            return [Number(result[0]), Number(result[1])];
+        };
+        const transformSourceMapToViewFn = (coord) => {
+            const result = source.proj4(source.fromProjection, this.geotiffOptions.viewProjection, //source.toProjection,
+            coord);
+            return [Number(result[0]), Number(result[1])];
+        };
+        this.tileProcessor = new GeoTIFFTileProcessor({
+            transformViewToSourceMapFn,
+            transformSourceMapToViewFn,
+            sourceBounds: source.sourceBounds,
+            sourceRef: source.sourceRef,
+            resolution: source.resolution,
+            imageWidth: source.width,
+            imageHeight: source.height,
+            fromProjection: source.fromProjection,
+            toProjection: this.geotiffOptions.viewProjection, //source.toProjection,
+            baseImage: source.baseImage,
+            overviewImages: source.overviewImages ?? [],
+        });
+        this.tileProcessor.createGlobalTriangulation();
+        // Set bounds to restrict tile loading to GeoTIFF coverage area
+        this.setViewBounds(source.sourceBounds, transformSourceMapToViewFn);
+        if (this.geotiffOptions.colorMap) {
+            const { stops } = getColorStops(this.geotiffOptions.colorMap, this.geotiffOptions.valueRange);
+            this.colorStops = stops;
+        }
+    }
+    /**
+     * Set Leaflet bounds from GeoTIFF source bounds
+     * Restricts tile loading to the GeoTIFF coverage area
+     */
+    setViewBounds(sourceBounds, transformSourceToView) {
+        const [srcWest, srcSouth, srcEast, srcNorth] = sourceBounds;
+        // Transform corners from Source to View (Web Mercator for Leaflet)
+        const sw = transformSourceToView([srcWest, srcSouth]);
+        const se = transformSourceToView([srcEast, srcSouth]);
+        const nw = transformSourceToView([srcWest, srcNorth]);
+        const ne = transformSourceToView([srcEast, srcNorth]);
+        // Calculate bounds in View coordinates
+        const minX = Math.min(sw[0], se[0], nw[0], ne[0]);
+        const maxX = Math.max(sw[0], se[0], nw[0], ne[0]);
+        const minY = Math.min(sw[1], se[1], nw[1], ne[1]);
+        const maxY = Math.max(sw[1], se[1], nw[1], ne[1]);
+        // Convert to Leaflet LatLngBounds (Web Mercator meters to lat/lng)
+        const southWest = L.CRS.EPSG3857.unproject(L.point(minX, maxY));
+        const northEast = L.CRS.EPSG3857.unproject(L.point(maxX, minY));
+        // Set bounds option - Leaflet will use this to restrict tile loading
+        this.options.bounds = L.latLngBounds(southWest, northEast);
+    }
+}

package/dist/collection/map-provider/leaflet/WCSGridLayer.js

@@ -0,0 +1,124 @@
+import * as L from "leaflet";
+import { log, error } from "../../utils/logger";
+const LOG_PREFIX = 'v-map - leaflet - wcs - tile - ';
+/**
+ * Custom Leaflet GridLayer for WCS (Web Coverage Service) support
+ *
+ * Supports:
+ * - WCS 2.0.1 with subset parameters
+ * - WCS 1.x.x with BBOX parameters (backward compatibility)
+ * - GeoTIFF FLOAT32 format
+ * - Dynamic BBOX-based requests
+ */
+export class WCSGridLayer extends L.GridLayer {
+    wcsOptions;
+    constructor(options) {
+        super(options);
+        this.wcsOptions = {
+            ...options,
+            version: options.version ?? '2.0.1',
+            format: options.format ?? 'image/tiff',
+            projection: options.projection ?? 'EPSG:4326',
+        };
+    }
+    /**
+     * Build WCS GetCoverage URL for a given tile
+     */
+    buildWCSUrl(coords) {
+        const { url, coverageName, version, format, projection, params } = this.wcsOptions;
+        // Calculate tile bounds in lat/lng
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Leaflet private method not exposed in type definitions
+        const tileBounds = this._tileCoordsToBounds(coords);
+        const southwest = tileBounds.getSouthWest();
+        const northeast = tileBounds.getNorthEast();
+        const minx = southwest.lng;
+        const miny = southwest.lat;
+        const maxx = northeast.lng;
+        const maxy = northeast.lat;
+        const baseParams = {
+            SERVICE: 'WCS',
+            REQUEST: 'GetCoverage',
+            VERSION: version,
+            FORMAT: format,
+        };
+        // WCS 2.0.1 uses subset parameters
+        if (version.startsWith('2.0')) {
+            baseParams.coverageId = coverageName;
+            // Build URL with subset parameters
+            // Note: We can't use the same param name twice in URLSearchParams,
+            // so we'll manually construct the query string
+            const extraParams = params ? { ...params } : {};
+            const allParams = { ...baseParams, ...extraParams };
+            // Add GeoTIFF compression if format is tiff
+            if (format.includes('tiff') || format.includes('geotiff')) {
+                allParams['geotiff:compression'] = 'LZW';
+            }
+            const query = new URLSearchParams();
+            Object.entries(allParams).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    query.set(key, String(value));
+                }
+            });
+            // Manually add subset parameters (can't use URLSearchParams for duplicate keys)
+            const queryString = query.toString();
+            const subsetX = `subset=X(${minx},${maxx})`;
+            const subsetY = `subset=Y(${miny},${maxy})`;
+            return `${url}${url.includes('?') ? '&' : '?'}${queryString}&${subsetX}&${subsetY}`;
+        }
+        // WCS 1.x.x uses BBOX parameter
+        else {
+            baseParams.COVERAGE = coverageName;
+            baseParams.BBOX = `${minx},${miny},${maxx},${maxy}`;
+            baseParams.CRS = projection;
+            // Calculate width and height for the tile
+            const tileSize = this.getTileSize();
+            baseParams.WIDTH = typeof tileSize === 'number' ? tileSize : tileSize.x;
+            baseParams.HEIGHT = typeof tileSize === 'number' ? tileSize : tileSize.y;
+            const extraParams = params ? { ...params } : {};
+            const allParams = { ...baseParams, ...extraParams };
+            const query = new URLSearchParams();
+            Object.entries(allParams).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    query.set(key, String(value));
+                }
+            });
+            return `${url}${url.includes('?') ? '&' : '?'}${query.toString()}`;
+        }
+    }
+    /**
+     * Create tile element (required by GridLayer)
+     */
+    createTile(coords, done) {
+        const tile = document.createElement('img');
+        const wcsUrl = this.buildWCSUrl(coords);
+        log(`${LOG_PREFIX}load: coords=(${coords.x},${coords.y},${coords.z})`);
+        log(`${LOG_PREFIX}url: ${wcsUrl}`);
+        tile.onload = () => {
+            done(null, tile);
+        };
+        tile.onerror = (err) => {
+            error(`${LOG_PREFIX}failed to load tile:`, err);
+            done(err instanceof Error ? err : new Error(String(err)), tile);
+        };
+        // Set crossOrigin for CORS support
+        tile.crossOrigin = 'anonymous';
+        tile.src = wcsUrl;
+        return tile;
+    }
+    /**
+     * Update WCS options and redraw
+     */
+    updateOptions(newOptions) {
+        this.wcsOptions = {
+            ...this.wcsOptions,
+            ...newOptions,
+        };
+        this.redraw();
+    }
+}
+/**
+ * Factory function to create a WCS GridLayer
+ */
+export function createWCSGridLayer(options) {
+    return new WCSGridLayer(options);
+}