feature: circle and square as polygon draw shapes

src/controls/draw/drawtools.js

@@ -11,6 +11,8 @@ const drawToolsSelector = function drawToolsSelector(extraTools, v, toolCmps) {
     Point: 'Punkt',
     LineString: 'Linje',
     box: 'Rektangel',
+    square: 'Kvadrat',
+    circle: 'Cirkel',
     freehand: 'Frihandsläge'
   };
   viewer = v;

src/controls/draw/shapes.js

@@ -1,11 +1,18 @@
-import { createBox } from 'ol/interaction/Draw';
+import { createBox, createRegularPolygon } from 'ol/interaction/Draw';
 
 export default (drawType) => {
   const types = {
     box: {
       type: 'Circle',
       geometryFunction: createBox()
     },
+    square: {
+      type: 'Circle',
+      geometryFunction: createRegularPolygon(4)
+    },
+    circle: {
+      type: 'Circle'
+    },
     freehand: {
       freehand: true
     }

src/style/drawstyles.js

@@ -146,8 +146,8 @@ function formatLength(line, projection) {
   return output;
 }
 
-function formatArea(polygon, useHectare, projection) {
-  const area = getArea(polygon, { projection });
+function formatArea(polygon, useHectare, projection, featureArea) {
+  const area = featureArea || getArea(polygon, { projection });
   let output;
   if (area > 10000000) {
     output = `${Math.round((area / 1000000) * 100) / 100} km\xB2`;

src/style/stylewindow.js

@@ -9,6 +9,7 @@ import * as drawStyles from './drawstyles';
 import styleTemplate from './styletemplate';
 import hexToRgba from './hextorgba';
 import { Component, Button, Element, dom } from '../ui';
+import formatLengthString from '../utils/formatlengthstring';
 
 const Stylewindow = function Stylewindow(optOptions = {}) {
   const {
@@ -139,6 +140,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
           selected
         };
         break;
+      case 'Circle':
       case 'Polygon':
       case 'MultiPolygon':
         styleObject = {
@@ -220,6 +222,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
         document.getElementById('o-draw-style-backgroundStroke').classList.add('hidden');
         document.getElementById('o-draw-style-padding').classList.add('hidden');
         break;
+      case 'Circle':
       case 'Polygon':
       case 'MultiPolygon':
         document.getElementById('o-draw-style-point').classList.add('hidden');
@@ -418,6 +421,29 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
           });
         }
         break;
+      case 'Circle':
+        style[0] = new Style({
+          fill,
+          stroke
+        });
+        if (newStyleObj.showMeasureSegments) {
+          const radius = geom.getRadius();
+          const circ = radius * 2 * Math.PI;
+          const label = formatLengthString(circ, { decimals: 2 });
+          const labelStyle = drawStyles.getBufferLabelStyle(label, styleScale);
+          style = style.concat(labelStyle);
+        }
+        if (newStyleObj.showMeasure) {
+          const radius = geom.getRadius();
+          const area = radius * radius * Math.PI;
+          const label = drawStyles.formatArea(undefined, true, projection, area);
+          const point = new Point(geom.getCenter());
+          const labelStyle = drawStyles.getLabelStyle(styleScale);
+          labelStyle.setGeometry(point);
+          labelStyle.getText().setText(label);
+          style = style.concat(labelStyle);
+        }
+        break;
       case 'Polygon':
         style[0] = new Style({
           fill,