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

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
? new Text({
text: name, text: name,
font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"', font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
offsetY: +20, offsetY: +20,
padding: [2, 2, 2, 2], padding: [0, 0, 0, 0],
fill: new Fill({ fill: new Fill({
color: 'black', 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;