Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Vector tiles (adjusting styles)

This commit is contained in:
Eric van der Vlist 2023-01-16 09:11:42 +01:00
parent 944c8eee53
commit 47a6159226
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/gpx/styles.ts
View File

@ -140,6 +140,10 @@ const circleStroke = new Stroke({
width: 1.25, width: 1.25,
}); });
const poiTextFill = new Fill({
color: 'white',
});
const circle = new Circle({ const circle = new Circle({
fill: circleFill, fill: circleFill,
stroke: circleStroke, stroke: circleStroke,
@ -317,31 +321,38 @@ const styles = {
isSelected: feature.get('isSelected') ?? false, isSelected: feature.get('isSelected') ?? false,
name: feature.get('name'), name: feature.get('name'),
klass: feature.get('class'), klass: feature.get('class'),
isHidden: zoom() < 14,
}; };
}, },
getStyle: memoize((params: any) => { getStyle: memoize((params: any) => {
console.log({ caller: 'getStyle', params }); console.log({ caller: 'getStyle', params });
const { isSelected, name, klass } = params; const { isSelected, name, klass, isHidden } = params;
if (isHidden) {
return null;
}
const icon = osmIcons[klass]; const icon = osmIcons[klass];
if (icon === undefined) { if (icon === undefined) {
return null; return undefined;
} }
return new Style({ return new Style({
image: new Icon({ image: new Icon({
src: icon, src: icon,
scale: 1.5, scale: 1.5,
opacity: 0.9, opacity: 1,
// anchor: [0, 0], // anchor: [0, 0],
}), }),
text: new Text({ text: name
text: name, ? new Text({
font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"', text: name,
offsetY: +20, font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
padding: [2, 2, 2, 2], offsetY: +20,
fill: new Fill({ padding: [0, 0, 0, 0],
color: 'black', fill: new Fill({
}), color: 'black',
}), }),
backgroundFill: poiTextFill,
})
: undefined,
}); });
}, memoizeOptions), }, memoizeOptions),
}, },
@ -362,7 +373,7 @@ export const style = (feature: Feature, resolution: number) => {
const getStyle = styles[type].getStyle; const getStyle = styles[type].getStyle;
const style = getStyle(params); const style = getStyle(params);
console.log({ caller: 'style', feature, type, params, style }); console.log({ caller: 'style', feature, type, params, style });
if (style === null) { if (style === undefined) {
return createDefaultStyle(feature, resolution)[0]; return createDefaultStyle(feature, resolution)[0];
} }
return style; return style;