Styles.
This commit is contained in:
parent
d5be1b8672
commit
82cdad5f1f
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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
|
||||
<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 |
Loading…
Reference in New Issue