feature(Style): points can now be displayed as icons

iTowns · Sep 17, 2021 · 8250e82 · 8250e82
1 parent 04b8806
commit 8250e82
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/examples/source_file_shapefile.html b/examples/source_file_shapefile.html
@@ -61,13 +61,18 @@
                     point: {
                         color: 'white',
                         line: 'green',
+                        radius: 5,
+                        width: 1,
                     },
                     text: {
                         field: '{name}\n(id: {station_id})',
                         size: 14,
                         haloColor: 'white',
                         haloWidth: 1,
                         font: ['monospace'],
+                        anchor: 'top-left',
+                        justify: 'left',
+                        offset: [5, 5],
                     },
                 });
 

diff --git a/src/Converter/Feature2Texture.js b/src/Converter/Feature2Texture.js
@@ -114,6 +114,9 @@ function drawFeature(ctx, feature, extent, style, invCtxScale) {
 
             if (contextStyle) {
                 if (feature.type === FEATURE_TYPES.POINT) {
+                    // Prevent trying to draw points when style.point is not defined by the user
+                    if (!contextStyle.point) { continue; }
+
                     // cross multiplication to know in the extent system the real size of
                     // the point
                     const px = (Math.round(contextStyle.point.radius * invCtxScale) || 3 * invCtxScale) * scaleRadius;

diff --git a/src/Layer/LabelLayer.js b/src/Layer/LabelLayer.js
@@ -57,6 +57,49 @@ class LabelLayer extends Layer {
         this.buildExtent = true;
 
         this.labelDomelement = config.domElement;
+
+        if (
+            this.style
+            && (this.style.point && (this.style.point.color || this.style.point.line))
+            && !(this.style.icon && (this.style.icon.source || this.style.icon.key))
+        ) {
+            // Create a canvas
+            const canvas = document.createElement('canvas');
+
+            // Set canvas dimensions
+            const width = this.style.point.radius + this.style.point.width;
+            canvas.width = 2 * width;
+            canvas.height = 2 * width;
+
+            if (canvas.getContext) {
+                const ctx = canvas.getContext('2d');
+
+                // Draw a circle with dimensions specified in layer style
+                ctx.beginPath();
+                ctx.arc(width, width, this.style.point.radius, 0, 2 * Math.PI);
+
+                // Apply transparency to the circle if specified in layer style
+                ctx.globalAlpha = this.style.point.opacity;
+
+                // Fill the circle if specified in layer style
+                if (this.style.point.color) {
+                    ctx.fillStyle = this.style.point.color;
+                    ctx.fill();
+                }
+
+                // Draw the circle's edges if specified in layer style
+                if (this.style.point.line) {
+                    ctx.lineWidth = this.style.point.width;
+                    ctx.strokeStyle = this.style.point.line;
+                    ctx.stroke();
+                }
+
+                this.style.icon = this.style.icon || {};
+                this.style.icon.source = canvas.toDataURL();
+                this.style.point.color = undefined;
+                this.style.point.line = undefined;
+            }
+        }
     }
 
     /**

diff --git a/test/unit/label.js b/test/unit/label.js
@@ -38,6 +38,16 @@ describe('LabelLayer', function () {
         const labels = layer.convert(collection, extent);
         assert.ok(labels[0].isLabel);
     });
+
+    it('should replace style.point by style.icon', function () {
+        const labelLayer = new LabelLayer('labelLayer', {
+            source: false,
+            style: { point: { color: 'red', line: 'green' } },
+        });
+        labelLayer.source = {};
+        assert.strictEqual(labelLayer.style.point.color, undefined);
+        assert.strictEqual(labelLayer.style.point.line, undefined);
+    });
 });
 
 describe('Label', function () {