diff --git a/src/controls/measure.js b/src/controls/measure.js index 31efec281..0d91c355e 100644 --- a/src/controls/measure.js +++ b/src/controls/measure.js @@ -23,7 +23,8 @@ const Measure = function Measure({ snap = false, snapIsActive = true, snapLayers, - snapRadius = 15 + snapRadius = 15, + highlightColor } = {}) { let map; let activeButton; @@ -74,7 +75,7 @@ const Measure = function Measure({ function styleFunction(feature, segments, drawType, tip) { const styleScale = feature.get('styleScale') || 1; const labelStyle = drawStyles.getLabelStyle(styleScale); - let styles = [measureStyle(styleScale)]; + let styles = measureStyle({ styleScale, highlightColor }); const geometry = feature.getGeometry(); const geomType = geometry.getType(); let point; let line; let label; @@ -206,8 +207,12 @@ const Measure = function Measure({ } const pointCenter = feature.getGeometry().getCoordinates(); const bufferCircle = new Circle(pointCenter, bufferSize); + + feature.setStyle((feat) => { + const [styleColl, ...styles] = drawStyles.bufferStyleFunction(feat, highlightColor); + return [...styleColl, ...styles]; + }); feature.setGeometry(bufferCircle); - feature.setStyle((feat) => drawStyles.bufferStyleFunction(feat)); } function clearSnapInteractions() { diff --git a/src/style/drawstyles.js b/src/style/drawstyles.js index 320f4bea3..8b5c5681a 100644 --- a/src/style/drawstyles.js +++ b/src/style/drawstyles.js @@ -10,6 +10,11 @@ import { import { getArea, getLength } from 'ol/sphere'; import { LineString, MultiPoint, Point } from 'ol/geom'; +function isValidRgbaString(colorString) { + const regex = /^rgba\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d+(?:\.\d+)?)\s*\)$/; + return regex.test(colorString); +} + function createRegularShape(type, pointSize, pointFill, pointStroke, pointRotation) { let style; const size = pointSize || 10; @@ -219,26 +224,45 @@ const selectionStyle = new Style({ } }); -const measureStyle = function measureStyle(scale = 1) { - return new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.4)' - }), - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.8)', - lineDash: [10 * scale, 10 * scale], - width: 2 * scale +const measureStyle = function measureStyle({ scale = 1, highlightColor } = {}) { + const highlight = isValidRgbaString(highlightColor) ? highlightColor : 'rgba(133, 193, 233, 0.8)'; + return [ + new Style({ + fill: new Fill({ + color: 'rgba(255, 255, 255, 0.4)' + }), + stroke: new Stroke({ + color: highlight, + lineDash: [10 * scale, 10 * scale], + width: 5 * scale + }), + image: new CircleStyle({ + radius: 7 * scale, + stroke: new Stroke({ + color: highlight + }), + fill: new Fill({ + color: 'rgba(255, 255, 255, 0.2)' + }) + }) }), - image: new CircleStyle({ - radius: 5 * scale, + new Style({ stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.7)' + color: 'rgba(0, 0, 0, 0.8)', + lineDash: [10 * scale, 10 * scale], + width: 2 * scale }), - fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' + image: new CircleStyle({ + radius: 5 * scale, + stroke: new Stroke({ + color: 'rgba(0, 0, 0, 0.7)' + }), + fill: new Fill({ + color: 'rgba(255, 255, 255, 0.2)' + }) }) }) - }); + ]; }; const labelStyle = function labelStyle(scale = 1) { @@ -412,11 +436,11 @@ function getBufferPointStyle(scale = 1) { }); } -function bufferStyleFunction(feature) { +function bufferStyleFunction(feature, highlightColor) { const styleScale = feature.get('styleScale') || 1; const bufferLabelStyle = getBufferLabelStyle(`${formatRadius(feature)}`, styleScale); const pointStyle = getBufferPointStyle(styleScale); - return [measureStyle(styleScale), bufferLabelStyle, pointStyle]; + return [measureStyle({ scale: styleScale, highlightColor }), bufferLabelStyle, pointStyle]; } const measure = {