Mechanism to add style functions

This commit is contained in:
Eric van der Vlist 2022-12-10 12:16:46 +01:00
parent 821957a4f7
commit 327f0a6910
1 changed files with 37 additions and 4 deletions

View File

@ -1,4 +1,4 @@
import { Fill, Text, Icon, Stroke, Style } from 'ol/style';
import { Fill, Text, Icon, Stroke, Style, Circle } from 'ol/style';
import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
@ -14,6 +14,7 @@ import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
import { Feature } from 'ol';
import memoize from 'memoizee';
import { getState } from '../map';
import { Point } from 'ol/geom';
interface StyleParameters {
type: string;
@ -113,8 +114,30 @@ const rteStrokeSel = new Stroke({
width: 3,
});
const circleFill = new Fill({
color: 'rgba(255,255,255,0.4)',
});
const circleStroke = new Stroke({
color: '#3399CC',
width: 1.25,
});
const circle = new Circle({
fill: circleFill,
stroke: circleStroke,
radius: 5,
});
const replacer = (key: string, value: any) => {
if (key === 'feature' && typeof value === 'object') {
return { id: value.get('id'), rev: value.getRevision() };
}
return value;
};
const normalizer = (params: any) => {
const key = JSON.stringify(params);
const key = JSON.stringify(params, replacer);
// console.log({ caller: 'getStyle / normalizer', key });
return key;
};
@ -161,12 +184,22 @@ const styles = {
getParameters: (feature: Feature) => {
return {
isSelected: feature.get('isSelected') ?? false,
feature: zoom() >= 15 ? feature : undefined,
};
},
getStyle: memoize((params: any) => {
console.log({ caller: 'getStyle', params });
const { isSelected } = params;
return new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke });
const { isSelected, feature } = params;
const styles = [
new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }),
];
if (feature) {
const geometry = feature.getGeometry();
geometry.forEachSegment((start: any, end: any) => {
styles.push(new Style({ geometry: new Point(end), image: circle }));
});
}
return styles;
}, memoizeOptions),
},
rte: {