Merge pull request #5079 from mind84/circle_measurement

[Feature] Circular geometry measurement on draw

Author: nboisteault

assets/src/modules/Digitizing.js

@@ -24,7 +24,7 @@ import { Vector as VectorLayer } from 'ol/layer.js';
 import { Feature } from 'ol';
 
 import { Point, LineString, Polygon, Circle as CircleGeom, MultiPoint, GeometryCollection } from 'ol/geom.js';
-import { circular } from 'ol/geom/Polygon.js';
+import { circular, fromCircle } from 'ol/geom/Polygon.js';
 
 import { getArea, getLength } from 'ol/sphere.js';
 import Overlay from 'ol/Overlay.js';
@@ -480,11 +480,7 @@ export class Digitizing {
                     geom.set('totalOverlay', Array.from(this._measureTooltips).pop()[1], true);
                     geom.on('change', (e) => {
                         const geom = e.target;
-                        if (geom instanceof Polygon) {
-                            this._updateTotalMeasureTooltip(geom.getCoordinates()[0], geom, 'Polygon', geom.get('totalOverlay'));
-                        } else if (geom instanceof LineString) {
-                            this._updateTotalMeasureTooltip(geom.getCoordinates(), geom, 'Linestring', geom.get('totalOverlay'));
-                        }
+                        this._setTooltipContentByGeom(geom);
                     });
 
                     this._constraintLayer.setVisible(false);
@@ -809,7 +805,10 @@ export class Digitizing {
 
         // Total length for LineStrings
         // Perimeter and area for Polygons
-        if (coords.length > 2) {
+        // Radius and area for Circles
+        if(geomType == 'Circle') {
+            this._updateTotalMeasureTooltip(coords, geom, geomType, Array.from(this._measureTooltips).pop()[1]);
+        } else if (coords.length > 2) {
             this._updateTotalMeasureTooltip(coords, geom, geomType, Array.from(this._measureTooltips).pop()[1]);
 
             // Display angle ABC between three points. B is center
@@ -830,8 +829,8 @@ export class Digitizing {
             segmentTooltipContent += '<br>' + angleInDegrees + '°';
         }
 
-        // Display current segment measure only when drawing lines, polygons or circles
-        if (['line', 'polygon', 'circle'].includes(this.toolSelected)) {
+        // Display current segment measure only when drawing lines or polygons
+        if (['line', 'polygon'].includes(this.toolSelected)) {
             this._segmentMeasureTooltipElement.innerHTML = segmentTooltipContent;
             Array.from(this._measureTooltips).pop()[0].setPosition(geom.getLastCoordinate());
         }
@@ -847,7 +846,16 @@ export class Digitizing {
 
             overlay.getElement().innerHTML = totalTooltipContent;
             overlay.setPosition(geom.getInteriorPoint().getCoordinates());
-        } else {
+        } else if(geomType == 'Circle') {
+            // get polygon from circular geometry by approximating the circle with a 128-sided polygon
+            let circularGeom = fromCircle(geom,128);
+            let totalTooltipContent = this.formatLength(new LineString([coords[0], coords[1]]));
+            totalTooltipContent += '<br>' + this.formatArea(circularGeom);
+
+            overlay.getElement().innerHTML = totalTooltipContent;
+            overlay.setPosition(circularGeom.getInteriorPoint().getCoordinates());
+        }
+        else {
             overlay.getElement().innerHTML = this.formatLength(geom);
             overlay.setPosition(geom.getCoordinateAt(0.5));
         }
@@ -885,6 +893,43 @@ export class Digitizing {
         return output;
     }
 
+    /**
+     * Initializes measure tooltip and change event on a feature loaded from local storage.
+     * @param {Geometry} geom The geometry.
+     */
+    _initMeasureTooltipOnLoadedFeatures(geom){
+        // create overlays
+        this.createMeasureTooltips();
+
+        geom.set('totalOverlay', Array.from(this._measureTooltips).pop()[1], true);
+        // calculate measures
+        this._setTooltipContentByGeom(geom);
+        geom.on('change', (e) => {
+            const geom = e.target;
+            this._setTooltipContentByGeom(geom);
+        });
+        // make measure tooltip static and hidden
+        this._totalMeasureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
+        this._totalMeasureTooltipElement.classList.toggle('hide', !this._hasMeasureVisible);
+
+        // reset measureTooltip element
+        this._totalMeasureTooltipElement = null;
+    }
+
+    /**
+     * Calculates measuements for a specific geometry.
+     * @param {Geometry} geom The geometry.
+     */
+    _setTooltipContentByGeom(geom){
+        if (geom instanceof Polygon) {
+            this._updateTotalMeasureTooltip(geom.getCoordinates()[0], geom, 'Polygon', geom.get('totalOverlay'));
+        } else if (geom instanceof LineString) {
+            this._updateTotalMeasureTooltip(geom.getCoordinates(), geom, 'Linestring', geom.get('totalOverlay'));
+        } else if ( geom instanceof CircleGeom) {
+            this._updateTotalMeasureTooltip([geom.getFirstCoordinate(), geom.getLastCoordinate()], geom, 'Circle', geom.get('totalOverlay'));
+        }
+    }
+
     /**
      * Creates measure tooltips
      */
@@ -1100,6 +1145,8 @@ export class Digitizing {
 
                     if(loadedGeom){
                         const loadedFeature = new Feature(loadedGeom);
+                        // init measure tooltip
+                        this._initMeasureTooltipOnLoadedFeatures(loadedFeature.getGeometry());
                         loadedFeature.set('color', feature.color);
                         loadedFeatures.push(loadedFeature);
                     }
@@ -1114,6 +1161,8 @@ export class Digitizing {
                     console.log(loadedFeatures.length+' features read from WKT!');
                     // set color
                     for(const loadedFeature of loadedFeatures){
+                        // init measure tooltip
+                        this._initMeasureTooltipOnLoadedFeatures(loadedFeature.getGeometry());
                         loadedFeature.set('color', this._drawColor);
                     }
                     // No features read from localStorage so remove the data

tests/end2end/playwright/draw.spec.js

@@ -281,6 +281,26 @@ test.describe('Draw', () => {
         expect(await page.evaluate(() => lizMap.mainLizmap.digitizing.featureDrawn)).toBeNull();
     });
 
+    test('Circular geometry measure', async ({ page }) => {
+        await page.locator('#draw button.dropdown-toggle:nth-child(2)').click();
+        await page.locator('.digitizing-circle > svg').click();
+        await page.locator('#newOlMap').click({
+            position: {
+                x: 450,
+                y: 75
+            }
+        });
+        await page.locator('#newOlMap').click({
+            position: {
+                x: 480,
+                y: 115
+            }
+        });
+        await page.locator('#draw button.digitizing-toggle-measure').click();
+        await expect(page.locator('.ol-tooltip.ol-tooltip-static')).toBeVisible();
+        await expect(page.locator('.ol-tooltip.ol-tooltip-static')).toHaveText('3.3 km34.27 km2');
+    })
+
     test('From local storage', async ({ page }) => {
         const the_json = '[{"type":"Polygon","color":"#000000","coords":[[[764321.0416656,6290805.935670358],[767628.3399468632,6290805.935670358],[767628.3399468632,6295105.423436],[764321.0416656,6295105.423436],[764321.0416656,6290805.935670358],[764321.0416656,6290805.935670358]]]}]';
         await page.evaluate(token => localStorage.setItem('testsrepository_draw_draw_drawLayer', token), the_json);
@@ -313,6 +333,13 @@ test.describe('Draw', () => {
         await expect(drawn[0][4]).toHaveLength(2);
         await expect(drawn[0][5]).toHaveLength(2);
 
+        // check measure initialization
+        await page.locator('#draw button.digitizing-toggle-measure').click();
+        await expect(page.locator('.ol-tooltip.ol-tooltip-static')).toBeVisible();
+        await expect(page.locator('.ol-tooltip.ol-tooltip-static')).toHaveText('15.2 km14.19 km2');
+        // hide measure
+        await page.locator('#draw button.digitizing-toggle-measure').click();
+
         // Hide all elements but #map, #newOlMap and their children
         await page.$eval("*", el => el.style.visibility = 'hidden');
         await page.$eval("#newOlMap, #newOlMap *", el => el.style.visibility = 'visible');