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

Trying new styles for ways

This commit is contained in:
Eric van der Vlist 2023-02-03 21:29:02 +01:00
parent 1388f993ea
commit adce285b0f
1 changed files with 135 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -269,31 +269,124 @@ const styles = {
return new Style({ stroke: isSelected ? rteStrokeSel : rteStroke }); return new Style({ stroke: isSelected ? rteStrokeSel : rteStroke });
}, memoizeOptions), }, memoizeOptions),
}, },
way: { way: {
strokes: { strokes: {
iwn: new Stroke({ lowZoom: {
color: [174, 33, 219, 0.8], iwn: [
width: 3, new Style({
}), stroke: new Stroke({
nwn: new Stroke({ color: [255, 0, 0, 0.8],
color: [174, 33, 219, 0.8], width: 3,
width: 3, }),
}), }),
rwn: new Stroke({ ],
color: [174, 33, 219, 0.8], nwn: [
width: 2, new Style({
lineDash: [10, 10], stroke: new Stroke({
}), color: [255, 0, 0, 0.8],
lwn: new Stroke({ width: 3,
color: [174, 33, 219, 0.8], }),
width: 2, }),
lineDash: [10, 10], ],
}), rwn: [
default: new Stroke({ new Style({
color: [174, 33, 219, 0.8], stroke: new Stroke({
width: 1, color: [255, 128, 0, 0.8],
lineDash: [10, 10], width: 3,
}), }),
}),
],
lwn: [
new Style({
stroke: new Stroke({
color: [255, 255, 0, 0.8],
width: 3,
}),
}),
],
default: [
new Style({
stroke: new Stroke({
color: [255, 255, 0, 0.8],
width: 3,
lineDash: [10, 10],
}),
}),
],
},
highZoom: {
iwn: [
new Style({
stroke: new Stroke({
color: [255, 0, 0, 0.8],
width: 3,
lineDash: [10, 10],
lineDashOffset: 10,
}),
}),
new Style({
stroke: new Stroke({
color: [255, 255, 255, 0.8],
width: 3,
lineDash: [10, 10],
lineDashOffset: 0,
}),
}),
],
nwn: [
new Style({
stroke: new Stroke({
color: [255, 0, 0, 0.8],
width: 3,
lineDash: [10, 10],
lineDashOffset: 10,
}),
}),
new Style({
stroke: new Stroke({
color: [255, 255, 255, 0.8],
width: 3,
lineDash: [10, 10],
lineDashOffset: 0,
}),
}),
],
rwn: [
new Style({
stroke: new Stroke({
color: [255, 0, 0, 0.8],
width: 3,
lineDash: [10, 10],
lineDashOffset: 10,
}),
}),
new Style({
stroke: new Stroke({
color: [255, 255, 0, 0.8],
width: 3,
lineDash: [10, 10],
lineDashOffset: 0,
}),
}),
],
lwn: [
new Style({
stroke: new Stroke({
color: [255, 255, 0, 0.8],
width: 3,
}),
}),
],
default: [
new Style({
stroke: new Stroke({
color: [225, 220, 94, 0.8],
width: 3,
lineDash: [10, 10],
}),
}),
],
},
}, },
getParameters: (feature: Feature) => { getParameters: (feature: Feature) => {
// let tags = feature.get('tags'); // let tags = feature.get('tags');
@ -322,23 +415,29 @@ const styles = {
// isSelected: feature.get('isSelected') ?? false, // isSelected: feature.get('isSelected') ?? false,
name: feature.get('name'), name: feature.get('name'),
network, network,
zoom: getZoomInteger() >= 12 ? 'highZoom' : 'lowZoom',
}; };
}, },
getStyle: memoize((params: any) => { getStyle: memoize((params: any) => {
// console.log({ caller: 'getStyle', params }); // console.log({ caller: 'getStyle', params });
const { isSelected, name, network } = params; const { name, network, zoom } = params;
return new Style({ return [
stroke: styles.way.strokes[network] || styles.way.strokes.default, ...(styles.way.strokes[zoom][network] ??
text: new Text({ styles.way.strokes[zoom].default),
text: name, new Style({
font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"', text: new Text({
placement: 'line', text: name,
padding: [2, 2, 2, 2], font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
fill: new Fill({ placement: 'line',
color: 'black', overflow: false,
textBaseline: ['iwn', 'nwn'].includes(network) ? 'top' : 'bottom',
padding: [2, 2, 2, 2],
fill: new Fill({
color: 'black',
}),
}), }),
}), }),
}); ];
}, memoizeOptions), }, memoizeOptions),
}, },
poi: { poi: {