gridviz 2.0.28 → 2.0.31

package/src/BackgroundLayer.js

@@ -0,0 +1,182 @@
+//@ts-check
+'use strict'
+
+/**
+ *
+ * A map background layer in "Slippy map" XYZ standard.
+ * See https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
+ * https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/#6/27.88/44.48
+ * 
+ * @author Julien Gaffuri
+ */
+export class BackgroundLayer {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** An attribute to specify if a layer should be drawn or not
+         * @type {boolean} */
+        this.visible = opts.visible == false ? false : true
+
+        /** The minimum zoom factor: Below this level, the layer is not shown.
+         * @type {number} */
+        this.minZoom = opts.minZoom || 0
+
+        /** The maximum zoom factor: Above this level, the layer is not shown.
+         * @type {number} */
+        this.maxZoom = opts.maxZoom || Infinity
+
+        //ensure acceptable values for the zoom limits.
+        if (this.minZoom >= this.maxZoom)
+            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
+
+        /** The image cache, indexed by z/y/x */
+        this.cache = {}
+
+        /**
+         * @type {string} */
+        this.url = opts.url
+        /** @type {function(number,number,number):string} */
+        this.urlFun = opts.urlFun || ((x, y, z) => this.url + z + '/' + x + '/' + y + '.png')
+
+        /** @type {Array.<number>} */
+        this.resolutions = opts.resolutions
+        if (!this.resolutions || this.resolutions.length == 0)
+            throw new Error('No resolutions provided for background layer')
+
+        /** @type {number} */
+        this.nbPix = opts.nbPix || 256
+        /** CRS coordinates of top left corner
+         * @type {Array.<number>} */
+        this.origin = opts.origin || [0, 0]
+        /** @type {number} */
+        this.z0 = opts.z0 || 0
+
+        /** @type {function(number):string} */
+        this.filterColor = opts.filterColor // (zf) => "#eee7"
+    }
+
+    /**
+     * Get z/x/y cache data.
+     * @param {number} z
+     * @param {number} x
+     * @param {number} y
+     * @returns {HTMLImageElement|string|undefined}
+     * @private
+     */
+    get(z, x, y) {
+        let d = this.cache[z]
+        if (!d) return
+        d = d[x]
+        if (!d) return
+        return d[y]
+    }
+
+    /**
+     * Get z/x/y cache data.
+     * @param {HTMLImageElement|string} img
+     * @param {number} z
+     * @param {number} x
+     * @param {number} y
+     * @returns
+     * @private
+     */
+    put(img, z, x, y) {
+        if (!this.cache[z]) this.cache[z] = {}
+        if (!this.cache[z][x]) this.cache[z][x] = {}
+        this.cache[z][x][y] = img
+    }
+
+    /**
+     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @returns {void}
+     */
+    draw(cg) {
+        if (!this.resolutions || this.resolutions.length == 0) {
+            console.error('No resolutions provided for background layer')
+            return
+        }
+
+        //
+        const zf = cg.getZf()
+        const x0 = this.origin[0],
+            y0 = this.origin[1]
+
+        //get zoom level and resolution
+        let z = 0
+        for (z = 0; z < this.resolutions.length; z++) if (this.resolutions[z] < zf) break
+        z -= 1
+        z = Math.max(0, z)
+        z = Math.min(z, this.resolutions.length - 1)
+        //console.log(this.resolutions.length, z)
+        const res = this.resolutions[z]
+
+        z += this.z0
+
+        const sizeG = this.nbPix * res
+        const size = sizeG / zf
+
+        //get tile numbers
+        const xGeoToTMS = (x) => Math.ceil((x - x0) / sizeG)
+        const yGeoToTMS = (y) => Math.ceil(-(y - y0) / sizeG)
+        const xMin = xGeoToTMS(cg.extGeo.xMin) - 1
+        const xMax = xGeoToTMS(cg.extGeo.xMax)
+        const yMax = yGeoToTMS(cg.extGeo.yMin)
+        const yMin = yGeoToTMS(cg.extGeo.yMax) - 1
+
+        //TODO ?
+        //cg.setCanvasTransform()
+
+        //handle images
+        for (let x = xMin; x < xMax; x++) {
+            for (let y = yMin; y < yMax; y++) {
+                //get image
+                let img = this.get(z, x, y)
+
+                //load image
+                if (!img) {
+                    const img = new Image()
+                    this.put(img, z, x, y)
+                    img.onload = () => {
+                        cg.redraw()
+                    }
+                    img.onerror = () => {
+                        //case when no image
+                        this.put('failed', z, x, y)
+                    }
+                    img.src = this.urlFun(x, y, z)
+                    continue
+                }
+
+                //case when no image
+                if (img === 'failed') continue
+                if (!(img instanceof HTMLImageElement)) {
+                    console.log(img)
+                    continue
+                }
+                if (img.width == 0 || img.height == 0) continue
+
+                //draw image
+                const xGeo = x0 + x * sizeG
+                const yGeo = y0 - y * sizeG
+                try {
+                    cg.ctx.drawImage(img, cg.geoToPixX(xGeo), cg.geoToPixY(yGeo), size, size)
+                    //cg.ctx.drawImage(img, xGeo, yGeo, sizeG, -sizeG)
+                } catch (error) {
+                    console.error(error)
+                }
+            }
+        }
+
+        //apply filter
+        if (this.filterColor) {
+            const fc = this.filterColor(zf)
+            if (fc && fc != 'none') {
+                cg.ctx.fillStyle = fc
+                cg.ctx.fillRect(0, 0, cg.w, cg.h)
+            }
+        }
+    }
+}

package/src/BackgroundLayerWMS.js

@@ -0,0 +1,131 @@
+//@ts-check
+'use strict'
+
+/**
+ *
+ * A map WMS background layer.
+ * 
+ * @author Julien Gaffuri
+ */
+export class BackgroundLayerWMS {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** An attribute to specify if a layer should be drawn or not
+         * @type {boolean} */
+        this.visible = opts.visible == false ? false : true
+
+        /** The minimum zoom factor: Below this level, the layer is not shown.
+         * @type {number} */
+        this.minZoom = opts.minZoom || 0
+
+        /** The maximum zoom factor: Above this level, the layer is not shown.
+         * @type {number} */
+        this.maxZoom = opts.maxZoom || Infinity
+
+        //ensure acceptable values for the zoom limits.
+        if (this.minZoom >= this.maxZoom)
+            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
+
+        /**
+         * @type {string} */
+        this.url = opts.url
+
+        /** @type {function(number):string} */
+        this.filterColor = opts.filterColor // (zf) => "#eee7"
+
+        /** @type {HTMLImageElement|undefined} */
+        this.img = undefined;
+
+        /** @type {number|undefined} */
+        this.xMin = undefined;
+        /** @type {number|undefined} */
+        this.xMax = undefined;
+        /** @type {number|undefined} */
+        this.yMin = undefined;
+        /** @type {number|undefined} */
+        this.yMax = undefined;
+    }
+
+    /** Check if the view has moved and a new image needs to be retrieved.
+     * @private */
+    hasMoved(extGeo) {
+        if ((extGeo.xMin) != this.xMin) return true
+        else if ((extGeo.xMax) != this.xMax) return true
+        else if ((extGeo.yMin) != this.yMin) return true
+        else if ((extGeo.yMax) != this.yMax) return true
+        else return false
+    }
+
+
+    /**
+     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @returns {void}
+     */
+    draw(cg) {
+
+        //update map extent
+        cg.updateExtentGeo(0)
+
+        if (!this.hasMoved(cg.extGeo) && this.img) {
+            //the map did not move and the image was already downloaded: draw the image
+            cg.ctx.drawImage(this.img, 0, 0, cg.w, cg.h)
+
+        } else {
+            //the map moved: retrieve new image
+
+            //
+            this.xMin = cg.extGeo.xMin
+            this.xMax = cg.extGeo.xMax
+            this.yMin = cg.extGeo.yMin
+            this.yMax = cg.extGeo.yMax
+
+            //build WMS URL
+            const url = []
+            url.push(this.url)
+            url.push("&width=")
+            url.push(cg.w)
+            url.push("&height=")
+            url.push(cg.h)
+            //bbox: xmin ymin xmax ymax
+            url.push("&bbox=")
+            url.push(cg.extGeo.xMin)
+            url.push(",")
+            url.push(cg.extGeo.yMin)
+            url.push(",")
+            url.push(cg.extGeo.xMax)
+            url.push(",")
+            url.push(cg.extGeo.yMax)
+
+            const urlS = url.join("")
+            //console.log(urlS)
+
+            if (!this.img) {
+                this.img = new Image()
+                this.img.onload = () => {
+                    cg.redraw()
+                }
+                this.img.onerror = () => {
+                    //case when no image
+                    console.warn("Could not retrieve WMS background image from", urlS)
+                }
+            }
+
+            //set URL to launch the download
+            this.img.src = urlS
+        }
+
+        //apply filter
+        const zf = cg.getZf()
+        if (this.filterColor) {
+            const fc = this.filterColor(zf)
+            if (fc && fc != 'none') {
+                cg.ctx.fillStyle = fc
+                cg.ctx.fillRect(0, 0, cg.w, cg.h)
+            }
+        }
+    }
+}

package/src/Dataset.js

@@ -0,0 +1,76 @@
+//@ts-check
+'use strict'
+
+/**
+ * A grid cell.
+ * @typedef {{x: number, y: number}} Cell */
+/**
+ * An envelope.
+ * @typedef { {xMin: number, xMax: number, yMin: number, yMax: number} } Envelope */
+
+/**
+ * A multi resolution dataset of grid cells.
+ * It consists of different {@link DatasetComponent}s for each resolution.
+ *
+ * @abstract
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Dataset {
+    /**
+     * @param {Array.<import("./DatasetComponent").DatasetComponent>} datasetComponents The dataset components
+     * @param {Array.<number>} resolutions The resolutions of the dataset components, in CRS geographical unit
+     * @param { {preprocess?:function(Cell):boolean} } opts Options. preprocess: A function to apply on each dataset cell to prepare its values. Can be used also to select cells to keep.
+     */
+    constructor(datasetComponents, resolutions, opts = {}) {
+        opts = opts || {}
+
+        /** The dataset components.
+         * @type {Array.<import("./DatasetComponent").DatasetComponent>} */
+        this.datasetComponents = datasetComponents
+
+        /** The resolutions of the dataset components, in CRS geographical unit.
+         * @type {Array.<number>} */
+        this.resolutions = resolutions
+
+        //there must be as many dataset components as resolutions
+        if (this.datasetComponents.length > 1 && this.datasetComponents.length != this.resolutions.length)
+            throw new Error(
+                'Uncompatible number of datasets and resolutions: ' +
+                    this.datasetComponents.length +
+                    ' ' +
+                    this.resolutions.length
+            )
+
+        //set dataset preprocesses if specified
+        if (opts.preprocess) this.setPrepocesses(opts.preprocess)
+    }
+
+    /**
+     * Set a preprocess function for all dataset components.
+     * This is a function applied on each cell after it has been loaded.
+     *
+     * @param {function(Cell):boolean} preprocess
+     * @returns {this}
+     */
+    setPrepocesses(preprocess) {
+        for (let ds of this.datasetComponents) ds.preprocess = preprocess
+        return this
+    }
+
+    /**
+     * A function to ease the creation of datasets from their components.
+     *
+     * @param {Array.<number>} resolutions The resolutions of the dataset components, in CRS geographical unit
+     * @param {function(number):import("./DatasetComponent").DatasetComponent} resToDatasetComponent Function returning a dataset component from a resolution
+     * @param { {preprocess?:function(Cell):boolean} } opts Options. preprocess: A function to apply on each dataset cell to prepare its values
+     * @returns {Dataset}
+     */
+    static make(resolutions, resToDatasetComponent, opts) {
+        //make dataset components
+        const dsc = []
+        for (const res of resolutions) dsc.push(resToDatasetComponent(res))
+        //make dataset
+        return new Dataset(dsc, resolutions, opts)
+    }
+}

package/src/DatasetComponent.js

@@ -0,0 +1,103 @@
+//@ts-check
+'use strict'
+
+/** @typedef {"CSV"|"PARQUET"} Format */
+
+/**
+ * A dataset component, of grid cells.
+ * @abstract
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class DatasetComponent {
+    /**
+     * @param {string} url The URL of the dataset.
+     * @param {number} resolution The dataset resolution, in the CRS geographical unit.
+     * @param {{preprocess?:function(import("./Dataset").Cell):boolean}} opts
+     * @abstract
+     */
+    constructor(url, resolution, opts = {}) {
+        opts = opts || {}
+
+        /**
+         * The url of the dataset.
+         * @protected
+         * @type {string} */
+        this.url = url
+
+        /**
+         * The dataset resolution in geographical unit.
+         * @protected
+         * @type {number} */
+        this.resolution = resolution
+
+        /**
+         * A preprocess to run on each cell after loading. It can be used to apply some specific treatment before or compute a new column. And also to determine which cells to keep after loading.
+         * @type {(function(import("./Dataset").Cell):boolean )| undefined } */
+        this.preprocess = opts.preprocess || undefined
+
+        /** The cells within the view
+         * @protected
+         * @type {Array.<import("./Dataset").Cell>} */
+        this.cellsViewCache = []
+    }
+
+    /**
+     * Request data within a geographic envelope.
+     *
+     * @abstract
+     * @param {import("./Dataset").Envelope|undefined} extGeo
+     * @param {function():void} callback
+     * @returns {this}
+     */
+    getData(extGeo, callback) {
+        throw new Error('Method getData not implemented.')
+    }
+
+    /**
+     * Fill the view cache with all cells which are within a geographical envelope.
+     * @abstract
+     * @param {import("./Dataset").Envelope} extGeo The view geographical envelope.
+     * @returns {void}
+     */
+    updateViewCache(extGeo) {
+        throw new Error('Method updateViewCache not implemented.')
+    }
+
+    /**
+     * Get a cell under a given position, if any.
+     *
+     * @param {{x:number,y:number}} posGeo
+     * @param {Array.<import("./Dataset").Cell>} cells Some cells from the dataset (a subset if necessary, usually the view cache).
+     * @returns {import("./Dataset").Cell|undefined}
+     */
+    getCellFromPosition(posGeo, cells) {
+        //compute candidate cell position
+        /** @type {number} */
+        const r = this.getResolution()
+        /** @type {number} */
+        const cellX = r * Math.floor(posGeo.x / r)
+        /** @type {number} */
+        const cellY = r * Math.floor(posGeo.y / r)
+
+        //get cell
+        for (const cell of cells) {
+            if (cell.x != cellX) continue
+            if (cell.y != cellY) continue
+            return cell
+        }
+        return undefined
+    }
+
+    //getters and setters
+
+    /** @returns {number} */
+    getResolution() {
+        return this.resolution
+    }
+
+    /** @returns {Array.<import("./Dataset").Cell>} */
+    getViewCache() {
+        return this.cellsViewCache
+    }
+}