This commit is contained in:
Eric van der Vlist 2022-11-29 21:07:46 +01:00
parent d5be1b8672
commit 82cdad5f1f
3 changed files with 62 additions and 19 deletions

View File

@ -1,7 +1,8 @@
import { Fill, Text, Icon, Stroke, Style } from 'ol/style';
import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
import wptIcon from '../../icons/location-pin-svgrepo-com-red.svg';
import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
import { Feature } from 'ol';
import memoize from 'memoizee';
@ -17,6 +18,9 @@ const textStroke = new Stroke({
const textFill = new Fill({
color: '#000',
});
const textFillSel = new Fill({
color: 'red',
});
const styles = {
default: {
@ -66,6 +70,22 @@ const styles = {
width: 3,
}),
},
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,
}),
},
},
};
@ -90,15 +110,15 @@ const getStyle = memoize(
const defaults = styles.default[type];
const selected = styles.selected[type];
const all = isSelected ? { ...defaults, ...selected } : { ...defaults };
console.log({
caller: 'style / getStyle',
type,
isSelected,
params,
defaults,
selected,
all,
});
// console.log({
// caller: 'style / getStyle',
// type,
// isSelected,
// params,
// defaults,
// selected,
// all,
// });
for (const key of Object.keys(all)) {
if (all[key] instanceof Function) {
all[key] = all[key](params);
@ -112,7 +132,7 @@ const getStyle = memoize(
export const style = (feature: Feature, resolution: number) => {
const type = feature.get('type');
const isSelected = feature.get('isSelected') === true;
console.log({ caller: 'style', type, isSelected });
// console.log({ caller: 'style', type, isSelected });
if (styleRequiresFeature(type)) {
return getStyle(type, isSelected, feature);
}

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="297" height="297" >
<g color='blue' fill='blue' >
<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
C179.265,127.948,165.464,141.901,148.5,141.901z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1016 B

View File

@ -1,14 +1,23 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="297" height="297" >
<g color='#228b22' fill='#228b22' >
<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
<?xml version="1.0" encoding="iso-8859-1" ?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="297"
height="297"
>
<g color='green' fill='green'>
<path
d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"
/>
<path
d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
C179.265,127.948,165.464,141.901,148.5,141.901z"/>
C179.265,127.948,165.464,141.901,148.5,141.901z"
/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1022 B

After

Width:  |  Height:  |  Size: 1.0 KiB