diff --git a/src/controls/draw/drawtools.js b/src/controls/draw/drawtools.js index dfaeec900..93fd2f010 100644 --- a/src/controls/draw/drawtools.js +++ b/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; diff --git a/src/controls/draw/shapes.js b/src/controls/draw/shapes.js index 06bbac099..8af44ca9c 100644 --- a/src/controls/draw/shapes.js +++ b/src/controls/draw/shapes.js @@ -1,4 +1,4 @@ -import { createBox } from 'ol/interaction/Draw'; +import { createBox, createRegularPolygon } from 'ol/interaction/Draw'; export default (drawType) => { const types = { @@ -6,6 +6,13 @@ export default (drawType) => { type: 'Circle', geometryFunction: createBox() }, + square: { + type: 'Circle', + geometryFunction: createRegularPolygon(4) + }, + circle: { + type: 'Circle' + }, freehand: { freehand: true } diff --git a/src/style/drawstyles.js b/src/style/drawstyles.js index a27f26f27..320f4bea3 100644 --- a/src/style/drawstyles.js +++ b/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`; diff --git a/src/style/stylewindow.js b/src/style/stylewindow.js index a13882175..2bcef505c 100644 --- a/src/style/stylewindow.js +++ b/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,