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