diff --git a/src/style/drawstyles.js b/src/style/drawstyles.js index 1c7c736b6..a27f26f27 100644 --- a/src/style/drawstyles.js +++ b/src/style/drawstyles.js @@ -10,7 +10,7 @@ import { import { getArea, getLength } from 'ol/sphere'; import { LineString, MultiPoint, Point } from 'ol/geom'; -function createRegularShape(type, pointSize, pointFill, pointStroke) { +function createRegularShape(type, pointSize, pointFill, pointStroke, pointRotation) { let style; const size = pointSize || 10; const stroke = pointStroke || new Stroke({ @@ -19,6 +19,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) { const fill = pointFill || new Fill({ color: 'rgba(0, 153, 255, 0.8)' }); + const rotation = pointRotation || 0; switch (type) { case 'square': style = new Style({ @@ -27,6 +28,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) { stroke, points: 4, radius: size, + rotation: (rotation / 360) * Math.PI, angle: Math.PI / 4 }) }); @@ -39,7 +41,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) { stroke, points: 3, radius: size, - rotation: 0, + rotation: (rotation / 360) * Math.PI, angle: 0 }) }); @@ -53,6 +55,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) { points: 5, radius: size, radius2: size / 2.5, + rotation: (rotation / 360) * Math.PI, angle: 0 }) }); @@ -66,6 +69,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) { points: 4, radius: size, radius2: 0, + rotation: (rotation / 360) * Math.PI, angle: 0 }) }); @@ -79,6 +83,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) { points: 4, radius: size, radius2: 0, + rotation: (rotation / 360) * Math.PI, angle: Math.PI / 4 }) }); @@ -112,6 +117,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) { image: new Icon({ src: `data:image/svg+xml;utf8,${svg}`, scale: size / 10 || 1, + rotation: (rotation / 360) * Math.PI, anchor: [0.5, 0.85] }) }); diff --git a/src/style/styletemplate.js b/src/style/styletemplate.js index 81846e257..4b3f349a1 100644 --- a/src/style/styletemplate.js +++ b/src/style/styletemplate.js @@ -101,5 +101,14 @@ export default function styleTemplate(palette, swStyle) { `; - return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml; + const rotateHtml = `
Rotation
+ +
+ + Graders rotation + 360° +
+
`; + + return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml + rotateHtml; } diff --git a/src/style/stylewindow.js b/src/style/stylewindow.js index 8878a6371..891850fbf 100644 --- a/src/style/stylewindow.js +++ b/src/style/stylewindow.js @@ -37,7 +37,8 @@ const Stylewindow = function Stylewindow(optOptions = {}) { textFont: '"Helvetica Neue", Helvetica, Arial, sans-serif', showMeasureSegments: false, showMeasure: false, - selected: false + selected: false, + objRotation: 0 }; function escapeQuotes(s) { @@ -124,6 +125,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { strokeType: swStyle.strokeType, pointSize: swStyle.pointSize, pointType: swStyle.pointType, + objRotation: swStyle.objRotation, selected }; break; @@ -133,6 +135,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { textSize: swStyle.textSize, textString: swStyle.textString, textFont: swStyle.textFont, + objRotation: swStyle.objRotation, selected }; break; @@ -150,6 +153,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { document.getElementById('o-draw-style-point').classList.remove('hidden'); document.getElementById('o-draw-style-text').classList.remove('hidden'); document.getElementById('o-draw-style-measure').classList.remove('hidden'); + document.getElementById('o-draw-style-rotation').classList.remove('hidden'); } function updateStylewindow(feature) { @@ -167,11 +171,13 @@ const Stylewindow = function Stylewindow(optOptions = {}) { document.getElementById('o-draw-style-fill').classList.add('hidden'); document.getElementById('o-draw-style-point').classList.add('hidden'); document.getElementById('o-draw-style-text').classList.add('hidden'); + document.getElementById('o-draw-style-rotation').classList.add('hidden'); break; case 'Polygon': case 'MultiPolygon': document.getElementById('o-draw-style-point').classList.add('hidden'); document.getElementById('o-draw-style-text').classList.add('hidden'); + document.getElementById('o-draw-style-rotation').classList.add('hidden'); break; case 'Point': case 'MultiPoint': @@ -190,6 +196,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { document.getElementById('o-draw-style-pointType').value = swStyle.pointType; document.getElementById('o-draw-style-textSizeSlider').value = swStyle.textSize; document.getElementById('o-draw-style-textString').value = swStyle.textString; + document.getElementById('o-draw-style-rotationSlider').value = swStyle.objRotation; swStyle.strokeOpacity = rgbaToOpacity(swStyle.strokeColor); swStyle.strokeColor = rgbaToRgb(swStyle.strokeColor); const strokeEl = document.getElementById('o-draw-style-strokeColor'); @@ -353,14 +360,15 @@ const Stylewindow = function Stylewindow(optOptions = {}) { break; case 'Point': case 'MultiPoint': - style[0] = drawStyles.createRegularShape(newStyleObj.pointType, newStyleObj.pointSize, fill, stroke); + style[0] = drawStyles.createRegularShape(newStyleObj.pointType, newStyleObj.pointSize, fill, stroke, newStyleObj.objRotation); break; case 'TextPoint': style[0] = new Style({ text: new Text({ text: newStyleObj.textString || 'Text', font, - fill + fill, + rotation: (newStyleObj.objRotation / 360) * Math.PI || 0 }) }); feature.set(annotationField, newStyleObj.textString || 'Text'); @@ -371,6 +379,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { } if (newStyleObj.selected) { style.push(drawStyles.selectionStyle); + swStyle.objRotation = 0; } return style; } @@ -470,6 +479,11 @@ const Stylewindow = function Stylewindow(optOptions = {}) { swStyle.textSize = escapeQuotes(this.value); styleSelectedFeatures(); }); + + document.getElementById('o-draw-style-rotationSlider').addEventListener('input', function e() { + swStyle.objRotation = escapeQuotes(this.value); + styleSelectedFeatures(); + }); } annotationField = optOptions.annotation || 'annotation';