Mechanism to add style functions
This commit is contained in:
parent
821957a4f7
commit
327f0a6910
|
@ -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: {
|
||||
|
|
Loading…
Reference in New Issue