2022-11-29 18:49:05 +00:00
|
|
|
import { 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-29 20:07:46 +00:00
|
|
|
import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
|
2022-12-07 12:30:46 +00:00
|
|
|
import houseIcon from '../../icons/house-svgrepo-com.svg';
|
|
|
|
import houseFlatIcon from '../../icons/houseFlat-svgrepo-com.svg';
|
|
|
|
import campingIcon from '../../icons/camping-14-svgrepo-com.svg';
|
|
|
|
import farmPigIcon from '../../icons/farm-pig-svgrepo-com.svg';
|
|
|
|
import cheeseIcon from '../../icons/cheese-svgrepo-com.svg';
|
|
|
|
import trainIcon from '../../icons/train-svgrepo-com.svg';
|
|
|
|
import picnicIcon from '../../icons/picnic-svgrepo-com.svg';
|
|
|
|
import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg';
|
2022-11-29 20:07:46 +00:00
|
|
|
import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
|
2022-11-28 07:38:21 +00:00
|
|
|
import { Feature } from 'ol';
|
2022-11-29 18:49:05 +00:00
|
|
|
import memoize from 'memoizee';
|
2022-12-07 14:09:08 +00:00
|
|
|
import { getState } from '../map';
|
2022-11-28 07:38:21 +00:00
|
|
|
|
2022-11-29 18:49:05 +00:00
|
|
|
interface StyleParameters {
|
|
|
|
type: string;
|
|
|
|
isSelected: boolean;
|
|
|
|
}
|
2022-11-28 07:38:21 +00:00
|
|
|
|
2022-12-07 12:30:46 +00:00
|
|
|
const icons = {
|
|
|
|
house: {
|
|
|
|
src: houseIcon,
|
|
|
|
scale: 1 / 15,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
houseFlat: {
|
|
|
|
src: houseFlatIcon,
|
|
|
|
scale: 1 / 15,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
camping: {
|
|
|
|
src: campingIcon,
|
|
|
|
scale: 2,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
farmPig: {
|
|
|
|
src: farmPigIcon,
|
|
|
|
scale: 1 / 12,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
cheese: {
|
|
|
|
src: cheeseIcon,
|
|
|
|
scale: 3 / 4,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
train: {
|
|
|
|
src: trainIcon,
|
|
|
|
scale: 1 / 10,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
picnic: {
|
|
|
|
src: picnicIcon,
|
|
|
|
scale: 1 / 15,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
cave: {
|
|
|
|
src: caveIcon,
|
|
|
|
scale: 1 / 7,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const wptIconObj = {
|
|
|
|
src: wptIcon,
|
|
|
|
scale: 0.1,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
};
|
|
|
|
|
2022-11-28 11:14:09 +00:00
|
|
|
const textStroke = new Stroke({
|
|
|
|
color: '#fff',
|
|
|
|
width: 3,
|
|
|
|
});
|
|
|
|
const textFill = new Fill({
|
|
|
|
color: '#000',
|
|
|
|
});
|
2022-11-29 20:07:46 +00:00
|
|
|
const textFillSel = new Fill({
|
|
|
|
color: 'red',
|
|
|
|
});
|
2022-11-28 11:14:09 +00:00
|
|
|
|
2022-11-29 18:49:05 +00:00
|
|
|
const styles = {
|
|
|
|
default: {
|
|
|
|
trkseg: {
|
|
|
|
stroke: new Stroke({
|
|
|
|
color: 'blue',
|
|
|
|
width: 3,
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
'trkseg-start': {
|
|
|
|
image: new Icon({
|
|
|
|
src: startIcon,
|
|
|
|
scale: 0.2,
|
|
|
|
opacity: 0.6,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
'trkseg-finish': {
|
|
|
|
image: new Icon({
|
|
|
|
src: finishIcon,
|
|
|
|
scale: 0.2,
|
|
|
|
opacity: 0.6,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
wpt: {
|
2022-12-07 14:09:08 +00:00
|
|
|
image: (feature: Feature, zoom: number) => {
|
|
|
|
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
|
|
|
|
if (minZoom && zoom < minZoom) {
|
|
|
|
return null;
|
|
|
|
}
|
2022-12-07 12:30:46 +00:00
|
|
|
const customIcon = icons[feature.get('sym') as keyof typeof icons];
|
|
|
|
const icon = customIcon ?? wptIconObj;
|
|
|
|
return new Icon(icon);
|
|
|
|
},
|
2022-12-07 14:09:08 +00:00
|
|
|
text: (feature: Feature, zoom: number) => {
|
|
|
|
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
|
|
|
|
if (minZoom && zoom < minZoom) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return new Text({
|
2022-11-29 18:49:05 +00:00
|
|
|
font: '16px Calibri,sans-serif',
|
|
|
|
text: feature.get('name'),
|
|
|
|
fill: textFill,
|
|
|
|
stroke: textStroke,
|
|
|
|
offsetY: -40,
|
2022-12-07 14:09:08 +00:00
|
|
|
});
|
|
|
|
},
|
2022-11-29 18:49:05 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
selected: {
|
|
|
|
trkseg: {
|
|
|
|
stroke: new Stroke({
|
|
|
|
color: 'red',
|
|
|
|
width: 3,
|
|
|
|
}),
|
|
|
|
},
|
2022-11-29 20:07:46 +00:00
|
|
|
wpt: {
|
|
|
|
image: new Icon({
|
|
|
|
src: wptIconSel,
|
|
|
|
scale: 0.1,
|
|
|
|
opacity: 0.9,
|
|
|
|
anchor: [0.5, 1],
|
|
|
|
}),
|
|
|
|
text: (feature: Feature) =>
|
|
|
|
new Text({
|
|
|
|
font: '16px Calibri,sans-serif',
|
|
|
|
text: feature.get('name'),
|
|
|
|
fill: textFillSel,
|
|
|
|
stroke: textStroke,
|
|
|
|
offsetY: -40,
|
|
|
|
}),
|
|
|
|
},
|
2022-11-29 18:49:05 +00:00
|
|
|
},
|
|
|
|
};
|
2022-11-28 11:14:09 +00:00
|
|
|
|
2022-12-07 14:09:08 +00:00
|
|
|
const styleRequiresFeatureAndZoom = memoize(
|
|
|
|
(type: keyof typeof styles.default) => {
|
|
|
|
const defaults = styles.default[type];
|
|
|
|
const selected = styles.selected[type];
|
|
|
|
const all = { ...selected, ...defaults };
|
|
|
|
for (const key of Object.keys(all)) {
|
|
|
|
if (all[key] instanceof Function && all[key].length > 1) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2022-11-29 18:49:05 +00:00
|
|
|
const styleRequiresFeature = memoize((type: keyof typeof styles.default) => {
|
|
|
|
const defaults = styles.default[type];
|
|
|
|
const selected = styles.selected[type];
|
2022-12-07 14:09:08 +00:00
|
|
|
const all = { ...selected, ...defaults };
|
2022-11-29 18:49:05 +00:00
|
|
|
for (const key of Object.keys(all)) {
|
|
|
|
if (all[key] instanceof Function) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
2022-11-28 07:38:21 +00:00
|
|
|
|
2022-11-29 18:49:05 +00:00
|
|
|
const getStyle = memoize(
|
|
|
|
(
|
|
|
|
type: keyof typeof styles.default,
|
|
|
|
isSelected: boolean = false,
|
2022-12-07 14:09:08 +00:00
|
|
|
feature: any,
|
|
|
|
zoom: any
|
2022-11-29 18:49:05 +00:00
|
|
|
) => {
|
|
|
|
const defaults = styles.default[type];
|
|
|
|
const selected = styles.selected[type];
|
|
|
|
const all = isSelected ? { ...defaults, ...selected } : { ...defaults };
|
2022-11-29 20:07:46 +00:00
|
|
|
// console.log({
|
|
|
|
// caller: 'style / getStyle',
|
|
|
|
// type,
|
|
|
|
// isSelected,
|
|
|
|
// params,
|
|
|
|
// defaults,
|
|
|
|
// selected,
|
|
|
|
// all,
|
|
|
|
// });
|
2022-11-29 18:49:05 +00:00
|
|
|
for (const key of Object.keys(all)) {
|
|
|
|
if (all[key] instanceof Function) {
|
2022-12-07 14:09:08 +00:00
|
|
|
all[key] = all[key](feature, zoom);
|
2022-11-29 18:49:05 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
return new Style(all);
|
|
|
|
},
|
2022-12-07 14:09:08 +00:00
|
|
|
{ length: 4, max: 1024 }
|
2022-11-29 18:49:05 +00:00
|
|
|
);
|
2022-11-28 10:52:50 +00:00
|
|
|
|
2022-12-07 14:09:08 +00:00
|
|
|
export const style = (feature: Feature) => {
|
2022-11-28 07:38:21 +00:00
|
|
|
const type = feature.get('type');
|
2022-11-29 18:49:05 +00:00
|
|
|
const isSelected = feature.get('isSelected') === true;
|
2022-11-29 20:07:46 +00:00
|
|
|
// console.log({ caller: 'style', type, isSelected });
|
2022-12-07 14:09:08 +00:00
|
|
|
if (styleRequiresFeatureAndZoom(type)) {
|
|
|
|
const zoom = Math.floor(getState().zoom);
|
|
|
|
return getStyle(type, isSelected, feature, zoom);
|
|
|
|
}
|
2022-11-29 18:49:05 +00:00
|
|
|
if (styleRequiresFeature(type)) {
|
2022-12-07 14:09:08 +00:00
|
|
|
return getStyle(type, isSelected, feature, null);
|
2022-11-28 10:52:50 +00:00
|
|
|
}
|
2022-12-07 14:09:08 +00:00
|
|
|
return getStyle(type, isSelected, null, null);
|
2022-11-28 07:38:21 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default style;
|