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

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

@ -271,29 +271,122 @@ const styles = {
}, },
way: { way: {
strokes: { strokes: {
iwn: new Stroke({ lowZoom: {
color: [174, 33, 219, 0.8], iwn: [
new Style({
stroke: new Stroke({
color: [255, 0, 0, 0.8],
width: 3, width: 3,
}), }),
nwn: new Stroke({ }),
color: [174, 33, 219, 0.8], ],
nwn: [
new Style({
stroke: new Stroke({
color: [255, 0, 0, 0.8],
width: 3, width: 3,
}), }),
rwn: new Stroke({ }),
color: [174, 33, 219, 0.8], ],
width: 2, rwn: [
new Style({
stroke: new Stroke({
color: [255, 128, 0, 0.8],
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], lineDash: [10, 10],
}), }),
lwn: new Stroke({ }),
color: [174, 33, 219, 0.8], ],
width: 2, },
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], lineDash: [10, 10],
}), }),
default: new Stroke({
color: [174, 33, 219, 0.8],
width: 1,
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] ??
styles.way.strokes[zoom].default),
new Style({
text: new Text({ text: 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"',
placement: 'line', placement: 'line',
overflow: false,
textBaseline: ['iwn', 'nwn'].includes(network) ? 'top' : 'bottom',
padding: [2, 2, 2, 2], padding: [2, 2, 2, 2],
fill: new Fill({ fill: new Fill({
color: 'black', color: 'black',
}), }),
}), }),
}); }),
];
}, memoizeOptions), }, memoizeOptions),
}, },
poi: { poi: {