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
`;
+
+ 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';