Starting to refactor OL styles to be able to support arrows and point markers.
This commit is contained in:
parent
da053dcb50
commit
821957a4f7
|
|
@ -82,6 +82,10 @@ const textStroke = new Stroke({
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
width: 3,
|
width: 3,
|
||||||
});
|
});
|
||||||
|
const textStrokeSel = new Stroke({
|
||||||
|
color: 'blue',
|
||||||
|
width: 2,
|
||||||
|
});
|
||||||
const textFill = new Fill({
|
const textFill = new Fill({
|
||||||
color: '#000',
|
color: '#000',
|
||||||
});
|
});
|
||||||
|
|
@ -89,176 +93,106 @@ const textFillSel = new Fill({
|
||||||
color: 'red',
|
color: 'red',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const trksegStroke = new Stroke({
|
||||||
|
color: 'blue',
|
||||||
|
width: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
const trksegStrokeSel = new Stroke({
|
||||||
|
color: 'red',
|
||||||
|
width: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rteStroke = new Stroke({
|
||||||
|
color: 'green',
|
||||||
|
width: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rteStrokeSel = new Stroke({
|
||||||
|
color: 'red',
|
||||||
|
width: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
const normalizer = (params: any) => {
|
||||||
|
const key = JSON.stringify(params);
|
||||||
|
// console.log({ caller: 'getStyle / normalizer', key });
|
||||||
|
return key;
|
||||||
|
};
|
||||||
|
|
||||||
|
const memoizeOptions = {
|
||||||
|
length: 1,
|
||||||
|
normalizer,
|
||||||
|
max: 1024,
|
||||||
|
};
|
||||||
|
|
||||||
|
const zoom = () => Math.floor(getState().zoom);
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
default: {
|
wpt: {
|
||||||
trkseg: {
|
getParameters: (feature: Feature) => {
|
||||||
stroke: new Stroke({
|
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
|
||||||
color: 'blue',
|
return {
|
||||||
width: 3,
|
isSelected: feature.get('isSelected') ?? false,
|
||||||
}),
|
text: feature.get('name'),
|
||||||
|
customIcon: icons[feature.get('sym') as keyof typeof icons],
|
||||||
|
hidden: minZoom && zoom() < minZoom,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
'trkseg-start': {
|
getStyle: memoize((params: any) => {
|
||||||
image: new Icon({
|
console.log({ caller: 'getStyle', params });
|
||||||
src: startIcon,
|
const { isSelected, text, customIcon, hidden } = params;
|
||||||
scale: 0.2,
|
if (hidden) {
|
||||||
opacity: 0.6,
|
return null;
|
||||||
anchor: [0.5, 1],
|
}
|
||||||
}),
|
const icon = customIcon ?? wptIconObj;
|
||||||
},
|
return new Style({
|
||||||
'trkseg-finish': {
|
image: new Icon(icon),
|
||||||
image: new Icon({
|
text: new Text({
|
||||||
src: finishIcon,
|
|
||||||
scale: 0.2,
|
|
||||||
opacity: 0.6,
|
|
||||||
anchor: [0.5, 1],
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
rte: {
|
|
||||||
stroke: new Stroke({
|
|
||||||
color: 'green',
|
|
||||||
width: 5,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
'rte-start': {
|
|
||||||
image: new Icon({
|
|
||||||
src: startIcon,
|
|
||||||
scale: 0.3,
|
|
||||||
opacity: 0.6,
|
|
||||||
anchor: [0.5, 1],
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
'rte-finish': {
|
|
||||||
image: new Icon({
|
|
||||||
src: finishIcon,
|
|
||||||
scale: 0.3,
|
|
||||||
opacity: 0.6,
|
|
||||||
anchor: [0.5, 1],
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
wpt: {
|
|
||||||
image: (feature: Feature, zoom: number) => {
|
|
||||||
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
|
|
||||||
if (minZoom && zoom < minZoom) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const customIcon = icons[feature.get('sym') as keyof typeof icons];
|
|
||||||
const icon = customIcon ?? wptIconObj;
|
|
||||||
return new Icon(icon);
|
|
||||||
},
|
|
||||||
text: (feature: Feature, zoom: number) => {
|
|
||||||
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
|
|
||||||
if (minZoom && zoom < minZoom) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return new Text({
|
|
||||||
font: '16px Calibri,sans-serif',
|
font: '16px Calibri,sans-serif',
|
||||||
text: feature.get('name'),
|
text: text,
|
||||||
fill: textFill,
|
fill: isSelected ? textFillSel : textFill,
|
||||||
stroke: textStroke,
|
stroke: isSelected ? textStrokeSel : textStroke,
|
||||||
offsetY: -40,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
selected: {
|
|
||||||
trkseg: {
|
|
||||||
stroke: new Stroke({
|
|
||||||
color: 'red',
|
|
||||||
width: 3,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
rte: {
|
|
||||||
stroke: new Stroke({
|
|
||||||
color: 'red',
|
|
||||||
width: 5,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
wpt: {
|
|
||||||
image: new Icon({
|
|
||||||
src: wptIconSel,
|
|
||||||
scale: 0.1,
|
|
||||||
opacity: 0.9,
|
|
||||||
anchor: [0.5, 1],
|
|
||||||
}),
|
|
||||||
text: (feature: Feature) =>
|
|
||||||
new Text({
|
|
||||||
font: '16px Calibri,sans-serif',
|
|
||||||
text: feature.get('name'),
|
|
||||||
fill: textFillSel,
|
|
||||||
stroke: textStroke,
|
|
||||||
offsetY: -40,
|
offsetY: -40,
|
||||||
}),
|
}),
|
||||||
|
});
|
||||||
|
}, memoizeOptions),
|
||||||
|
},
|
||||||
|
trkseg: {
|
||||||
|
getParameters: (feature: Feature) => {
|
||||||
|
return {
|
||||||
|
isSelected: feature.get('isSelected') ?? false,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
getStyle: memoize((params: any) => {
|
||||||
|
console.log({ caller: 'getStyle', params });
|
||||||
|
const { isSelected } = params;
|
||||||
|
return new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke });
|
||||||
|
}, memoizeOptions),
|
||||||
|
},
|
||||||
|
rte: {
|
||||||
|
getParameters: (feature: Feature) => {
|
||||||
|
return {
|
||||||
|
isSelected: feature.get('isSelected') ?? false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getStyle: memoize((params: any) => {
|
||||||
|
console.log({ caller: 'getStyle', params });
|
||||||
|
const { isSelected } = params;
|
||||||
|
return new Style({ stroke: isSelected ? rteStrokeSel : rteStroke });
|
||||||
|
}, memoizeOptions),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const styleRequiresFeatureAndZoom = memoize(
|
|
||||||
(type: keyof typeof styles.default) => {
|
|
||||||
const defaults = styles.default[type];
|
|
||||||
const selected = styles.selected[type];
|
|
||||||
const all = { ...selected, ...defaults };
|
|
||||||
for (const key of Object.keys(all)) {
|
|
||||||
if (all[key] instanceof Function && all[key].length > 1) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const styleRequiresFeature = memoize((type: keyof typeof styles.default) => {
|
|
||||||
const defaults = styles.default[type];
|
|
||||||
const selected = styles.selected[type];
|
|
||||||
const all = { ...selected, ...defaults };
|
|
||||||
for (const key of Object.keys(all)) {
|
|
||||||
if (all[key] instanceof Function) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
const getStyle = memoize(
|
|
||||||
(
|
|
||||||
type: keyof typeof styles.default,
|
|
||||||
isSelected: boolean = false,
|
|
||||||
feature: any,
|
|
||||||
zoom: any
|
|
||||||
) => {
|
|
||||||
const defaults = styles.default[type];
|
|
||||||
const selected = styles.selected[type];
|
|
||||||
const all = isSelected ? { ...defaults, ...selected } : { ...defaults };
|
|
||||||
// console.log({
|
|
||||||
// caller: 'style / getStyle',
|
|
||||||
// type,
|
|
||||||
// isSelected,
|
|
||||||
// params,
|
|
||||||
// defaults,
|
|
||||||
// selected,
|
|
||||||
// all,
|
|
||||||
// });
|
|
||||||
for (const key of Object.keys(all)) {
|
|
||||||
if (all[key] instanceof Function) {
|
|
||||||
all[key] = all[key](feature, zoom);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return new Style(all);
|
|
||||||
},
|
|
||||||
{ length: 4, max: 1024 }
|
|
||||||
);
|
|
||||||
|
|
||||||
export const style = (feature: Feature) => {
|
export const style = (feature: Feature) => {
|
||||||
const type = feature.get('type');
|
const type = feature.get('type') as keyof typeof styles;
|
||||||
const isSelected = feature.get('isSelected') === true;
|
console.log({ caller: 'style', type });
|
||||||
// console.log({ caller: 'style', type, isSelected });
|
const styleForType = styles[type];
|
||||||
if (styleRequiresFeatureAndZoom(type)) {
|
if (!styleForType) {
|
||||||
const zoom = Math.floor(getState().zoom);
|
return null;
|
||||||
return getStyle(type, isSelected, feature, zoom);
|
|
||||||
}
|
}
|
||||||
if (styleRequiresFeature(type)) {
|
const params = styles[type].getParameters(feature);
|
||||||
return getStyle(type, isSelected, feature, null);
|
const getStyle = styles[type].getStyle;
|
||||||
}
|
return getStyle(params);
|
||||||
return getStyle(type, isSelected, null, null);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default style;
|
export default style;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue