gridviz 3.0.33 → 3.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.33",
+    "version": "3.0.34",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/layer/GeoJSONLayer.js

@@ -30,6 +30,7 @@ export class GeoJSONLayer extends Layer {
         this.preprocess = opts.preprocess
 
         //for points
+
         /**
          * @private
          * @type {function(object,number):string} */
@@ -39,36 +40,32 @@ export class GeoJSONLayer extends Layer {
          * @private
          * @type {function(object,number):number} */
         this.size = opts.size || ((f, z) => 10)
-        /**
-         * @private
-         * @type {function(object,number):string} */
-        this.strokeStyle = opts.strokeStyle || ((f, z) => 'red')
-        /**
-         * @private
-         * @type {function(object,number):string} */
-        this.fillStyle = opts.fillStyle || ((f, z) => 'black')
-        /**
-         * In pixel
-         * @private
-         * @type {function(object,number):number} */
-        this.lineWidth = opts.lineWidth || ((f, z) => 2)
 
-        //for lines
+        // for lines and polygon outlines
 
         /**
          * @private
          * @type {function(object,number):string} */
-        this.color = opts.color || ((f, z) => 'gray')
+        this.strokeStyle = opts.strokeStyle || opts.color || ((f, z) => 'gray')
         /**
          * In pixel
          * @private
          * @type {function(object,number):number} */
-        this.width = opts.width || ((f, z) => 2)
+        this.lineWidth = opts.lineWidth || opts.width || ((f, z) => 2)
         /**
          * @private
          * @type {function(object,number):Array.<number>|undefined} */
         this.lineDash = opts.lineDash || ((f, z) => undefined)
 
+
+        // for polygon filling and point symbol filling
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.fillStyle = opts.fillStyle || ((f, z) => 'black')
+
+
+
         /**
          * @private
          * @type {Array.<object> | undefined} */
@@ -96,81 +93,136 @@ export class GeoJSONLayer extends Layer {
         const z = geoCanvas.view.z
         const ctx = geoCanvas.offscreenCtx
 
-        for (const f of this.fs) {
-            const gt = f.geometry.type
-
-            if (gt == 'Point' || gt == 'MultiPoint') {
-
-                //get style parameters for the point feature
-                const shape = this.shape(f, z)
-                if (!shape || shape == 'none') continue
-                const size = this.size(f, z) * z
-                if (!size) continue
-                const strokeStyle = this.strokeStyle(f, z)
-                const fillStyle = this.fillStyle(f, z)
-                const lineWidth = this.lineWidth(f, z) * z
-
-                //set canvas drawing parameters
-                if (strokeStyle) ctx.strokeStyle = strokeStyle
-                if (fillStyle) ctx.fillStyle = fillStyle
-                if (lineWidth) ctx.lineWidth = lineWidth
-
-                let cs = f.geometry.coordinates
-                if (gt == 'Point') cs = [cs]
-
-                if (shape == 'circle') {
-                    //draw circle - fill and stroke
-                    for (const c of cs) {
-                        ctx.beginPath()
-                        ctx.arc(c[0], c[1], size / 2, 0, 2 * Math.PI, false)
-                        if (fillStyle) ctx.fill()
-                        if (strokeStyle && lineWidth) ctx.stroke()
-                    }
-                } else if (shape == 'square') {
-                    //draw square - fill and stroke
-                    for (const c of cs) {
-                        ctx.beginPath()
-                        ctx.rect(c[0] - size / 2, c[1] - size / 2, size, size)
-                        if (fillStyle) ctx.fill()
-                        if (strokeStyle && lineWidth) ctx.stroke()
-                    }
-                } else {
-                    console.error('Unexpected shape for point geojson: ' + shape)
+        // draw each feature
+        for (const f of this.fs)
+            this.drawGeometry(f, f.geometry, f.geometry.type, z, ctx)
+
+    }
+
+    /**
+     * @private
+     * Draw a geometry on the canvas, according to its type and the layer style.
+     * @param {object} f The feature to draw
+     * @param {object} geom The geometry of the feature to draw
+     * @param {string} gt The geometry type (e.g. 'Point', 'LineString', etc.)
+     * @param {number} z The current zoom level of the map
+     * @param {CanvasRenderingContext2D} ctx The canvas context to draw on
+     * @returns {void}
+     */
+    drawGeometry(f, geom, gt, z, ctx) {
+        if (gt == 'Point' || gt == 'MultiPoint') {
+
+            //get style parameters for the point feature
+            const shape = this.shape(f, z)
+            if (!shape || shape == 'none') return
+            const size = this.size(f, z) * z
+            if (!size) return
+
+            const strokeStyle = this.strokeStyle(f, z)
+            const fillStyle = this.fillStyle(f, z)
+            const lineWidth = this.lineWidth(f, z) * z
+
+            //set canvas drawing parameters
+            ctx.save()
+            if (strokeStyle) ctx.strokeStyle = strokeStyle
+            if (fillStyle) ctx.fillStyle = fillStyle
+            if (lineWidth) ctx.lineWidth = lineWidth
+
+            let cs = geom.coordinates
+            if (gt == 'Point') cs = [cs]
+
+            if (shape == 'circle') {
+                //draw circle - fill and stroke
+                for (const c of cs) {
+                    ctx.beginPath()
+                    ctx.arc(c[0], c[1], size / 2, 0, 2 * Math.PI, false)
+                    if (fillStyle) ctx.fill()
+                    if (strokeStyle && lineWidth) ctx.stroke()
+                }
+            } else if (shape == 'square') {
+                //draw square - fill and stroke
+                for (const c of cs) {
+                    ctx.beginPath()
+                    ctx.rect(c[0] - size / 2, c[1] - size / 2, size, size)
+                    if (fillStyle) ctx.fill()
+                    if (strokeStyle && lineWidth) ctx.stroke()
                 }
-            } else if (gt == 'LineString' || gt == 'MultiLineString') {
+            } else {
+                console.error('Unexpected shape for point GeoJSON: ' + shape)
+            }
+            ctx.restore()
+
+        } else if (gt == 'LineString' || gt == 'MultiLineString') {
 
-                //set color
-                const col = this.color(f, z)
-                if (!col || col == 'none') continue
-                ctx.strokeStyle = col
+            const col = this.strokeStyle(f, z)
+            if (!col || col === 'none') return
 
-                //set linewidth
-                const wP = this.width(f, z)
-                if (!wP || wP < 0) continue
-                ctx.lineWidth = wP * z
+            const wP = this.lineWidth(f, z)
+            if (!wP || wP < 0) return
 
-                //set line dash
-                const ldP = this.lineDash(f, z)
-                if (ldP) ctx.setLineDash(ldP)
+            ctx.save()
+            ctx.strokeStyle = col
+            ctx.lineWidth = wP * z
+            ctx.setLineDash(this.lineDash(f, z) || [])
+
+            //
+            const css = gt === 'LineString' ? [geom.coordinates] : geom.coordinates
+
+            for (const cs of css) {
+                if (cs.length < 2) continue
+                ctx.beginPath()
+                ctx.moveTo(cs[0][0], cs[0][1])
+                for (let i = 1; i < cs.length; i++) ctx.lineTo(cs[i][0], cs[i][1])
+                ctx.stroke()
+            }
 
-                let css = f.geometry.coordinates
-                if (gt == 'LineString') css = [css]
+            ctx.restore()
 
-                //draw lines
-                for (const cs of css) {
+        } else if (gt == 'Polygon' || gt == 'MultiPolygon') {
+            ctx.save()
+
+            // A Polygon is [ outerRing, ...holes ]. A MultiPolygon is [ [ outerRing, ...holes ], ... ]
+            const polygons = gt === 'Polygon' ? [geom.coordinates] : geom.coordinates
+
+            ctx.beginPath()
+
+            for (const rings of polygons) {
+                for (const cs of rings) {
                     if (cs.length < 2) continue
-                    ctx.beginPath()
                     ctx.moveTo(cs[0][0], cs[0][1])
                     for (let i = 1; i < cs.length; i++) ctx.lineTo(cs[i][0], cs[i][1])
+                    ctx.closePath()
+                }
+            }
+
+            // Fill
+            const fillStyle = this.fillStyle(f, z)
+            if (fillStyle && fillStyle !== 'none') {
+                ctx.fillStyle = fillStyle
+                ctx.fill('evenodd')         // even-odd punches holes correctly regardless of ring winding order
+            }
+
+            // Stroke (optional, only if style provides a width)
+            const wP = this.lineWidth(f, z)
+            if (wP && wP > 0) {
+                const strokeStyle = this.strokeStyle?.(f, z) ?? fillStyle
+                if (strokeStyle && strokeStyle !== 'none') {
+                    ctx.strokeStyle = strokeStyle
+                    ctx.lineWidth = wP * z
+                    ctx.setLineDash(this.lineDash?.(f, z) || [])
                     ctx.stroke()
                 }
-            } else {
-                console.log('Unsupported geometry type in GeoJSONLayer: ' + gt)
             }
-        }
+            ctx.restore()
+
+        } else if (gt == 'GeometryCollection') {
+            //recursive call for each geometry in the collection
+            for (const g of geom.geometries)
+                this.drawGeometry(f, g, g.type, z, ctx)
 
-        //...
-        ctx.setLineDash([])
+        } else {
+            console.log('Unexpected geometry type in GeoJSONLayer: ' + gt)
+        }
     }
 
     /**
@@ -180,7 +232,7 @@ export class GeoJSONLayer extends Layer {
      */
     async load(callback) {
         if (!this.url) {
-            console.log('Failed loading boundaries: No URL specified. ' + this.url)
+            console.log('Failed loading GeoJSON data: No URL specified. ' + this.url)
             this.loadingStatus = 'failed'
             this.labels = []
             return
@@ -216,7 +268,7 @@ export class GeoJSONLayer extends Layer {
             //redraw
             if (callback) callback()
         } catch (error) {
-            console.log('Failed loading boundaries from ' + this.url)
+            console.log('Failed loading GeoJSON from ' + this.url)
             this.fs = []
             this.loadingStatus = 'failed'
         }