dyomedea/src/components/gpx/styles.ts

73 lines
1.7 KiB
TypeScript
Raw Normal View History

2022-11-28 11:14:09 +00:00
import { Circle, Fill, Text, Icon, Stroke, Style } from 'ol/style';
2022-11-28 07:38:21 +00:00
import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
2022-11-28 11:14:09 +00:00
import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
2022-11-28 07:38:21 +00:00
import { Feature } from 'ol';
const trackStrokeStyle = new Stroke({
color: 'blue',
width: 2,
});
const trtksegStartImageStyle = new Icon({
src: startIcon,
scale: 0.2,
opacity: 0.6,
2022-11-28 10:52:50 +00:00
anchor: [0.5, 1],
2022-11-28 07:38:21 +00:00
});
const trtksegFinishImageStyle = new Icon({
src: finishIcon,
scale: 0.2,
opacity: 0.6,
2022-11-28 10:52:50 +00:00
anchor: [0.5, 1],
});
const wptImageStyle = new Icon({
src: wptIcon,
scale: 0.1,
opacity: 0.8,
anchor: [0.5, 1],
2022-11-28 07:38:21 +00:00
});
2022-11-28 11:14:09 +00:00
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,
});
2022-11-28 07:38:21 +00:00
const trtksegStyle = new Style({ stroke: trackStrokeStyle });
const trtksegStartStyle = new Style({ image: trtksegStartImageStyle });
const trtksegFinishStyle = new Style({ image: trtksegFinishImageStyle });
2022-11-28 11:14:09 +00:00
const wptStyle = (feature: Feature) =>
new Style({ image: wptImageStyle, text: wptTextStyle(feature) });
2022-11-28 10:52:50 +00:00
2022-11-28 07:38:21 +00:00
export const style = (feature: Feature, resolution: number) => {
const type = feature.get('type');
if (type === 'trkseg') {
return trtksegStyle;
}
if (type === 'trkseg-start') {
return trtksegStartStyle;
}
if (type === 'trkseg-finish') {
return trtksegFinishStyle;
}
2022-11-28 10:52:50 +00:00
if (type === 'wpt') {
2022-11-28 11:14:09 +00:00
return wptStyle(feature);
2022-11-28 10:52:50 +00:00
}
2022-11-28 07:38:21 +00:00
};
export default style;