Adding Wpt names.

This commit is contained in:
Eric van der Vlist 2022-11-28 12:14:09 +01:00
parent 6121df68bf
commit 1fb7f47c05
2 changed files with 22 additions and 5 deletions

View File

@ -1,7 +1,7 @@
import { Circle, Fill, Icon, Stroke, Style } from 'ol/style'; import { Circle, Fill, Text, Icon, Stroke, Style } from 'ol/style';
import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg'; import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg'; import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
import wptIcon from '../../icons/location-pin-svgrepo-com.svg'; import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
import { Feature } from 'ol'; import { Feature } from 'ol';
const trackStrokeStyle = new Stroke({ const trackStrokeStyle = new Stroke({
@ -30,11 +30,28 @@ const wptImageStyle = new Icon({
anchor: [0.5, 1], anchor: [0.5, 1],
}); });
const textStroke = new Stroke({
color: '#fff',
width: 3,
});
const textFill = new Fill({
color: '#000',
});
const wptTextStyle = (feature: Feature) =>
new Text({
font: '12px Calibri,sans-serif',
text: feature.get('name'),
fill: textFill,
stroke: textStroke,
});
const trtksegStyle = new Style({ stroke: trackStrokeStyle }); const trtksegStyle = new Style({ stroke: trackStrokeStyle });
const trtksegStartStyle = new Style({ image: trtksegStartImageStyle }); const trtksegStartStyle = new Style({ image: trtksegStartImageStyle });
const trtksegFinishStyle = new Style({ image: trtksegFinishImageStyle }); const trtksegFinishStyle = new Style({ image: trtksegFinishImageStyle });
const wptStyle = new Style({ image: wptImageStyle }); const wptStyle = (feature: Feature) =>
new Style({ image: wptImageStyle, text: wptTextStyle(feature) });
export const style = (feature: Feature, resolution: number) => { export const style = (feature: Feature, resolution: number) => {
const type = feature.get('type'); const type = feature.get('type');
@ -48,7 +65,7 @@ export const style = (feature: Feature, resolution: number) => {
return trtksegFinishStyle; return trtksegFinishStyle;
} }
if (type === 'wpt') { if (type === 'wpt') {
return wptStyle; return wptStyle(feature);
} }
}; };

View File

@ -37,7 +37,7 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
type: 'Point', type: 'Point',
coordinates: [wpt().$.lon, wpt().$.lat], coordinates: [wpt().$.lon, wpt().$.lat],
}, },
properties: { type: 'wpt' }, properties: { type: 'wpt', ...wpt() },
}, },
], ],
}; };