Adding minZoom extension property for Wpts
This commit is contained in:
parent
008ca2ce3b
commit
38224d73da
|
@ -13,6 +13,7 @@ import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg';
|
|||
import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
|
||||
import { Feature } from 'ol';
|
||||
import memoize from 'memoizee';
|
||||
import { getState } from '../map';
|
||||
|
||||
interface StyleParameters {
|
||||
type: string;
|
||||
|
@ -113,19 +114,28 @@ const styles = {
|
|||
}),
|
||||
},
|
||||
wpt: {
|
||||
image: (feature: Feature) => {
|
||||
image: (feature: Feature, zoom: number) => {
|
||||
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
|
||||
if (minZoom && zoom < minZoom) {
|
||||
return null;
|
||||
}
|
||||
const customIcon = icons[feature.get('sym') as keyof typeof icons];
|
||||
const icon = customIcon ?? wptIconObj;
|
||||
return new Icon(icon);
|
||||
},
|
||||
text: (feature: Feature) =>
|
||||
new Text({
|
||||
text: (feature: Feature, zoom: number) => {
|
||||
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
|
||||
if (minZoom && zoom < minZoom) {
|
||||
return null;
|
||||
}
|
||||
return new Text({
|
||||
font: '16px Calibri,sans-serif',
|
||||
text: feature.get('name'),
|
||||
fill: textFill,
|
||||
stroke: textStroke,
|
||||
offsetY: -40,
|
||||
}),
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
selected: {
|
||||
|
@ -154,10 +164,24 @@ const styles = {
|
|||
},
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
);
|
||||
|
||||
const styleRequiresFeature = memoize((type: keyof typeof styles.default) => {
|
||||
const defaults = styles.default[type];
|
||||
const selected = styles.selected[type];
|
||||
const all = { ...defaults, ...selected };
|
||||
const all = { ...selected, ...defaults };
|
||||
for (const key of Object.keys(all)) {
|
||||
if (all[key] instanceof Function) {
|
||||
return true;
|
||||
|
@ -170,7 +194,8 @@ const getStyle = memoize(
|
|||
(
|
||||
type: keyof typeof styles.default,
|
||||
isSelected: boolean = false,
|
||||
params: any
|
||||
feature: any,
|
||||
zoom: any
|
||||
) => {
|
||||
const defaults = styles.default[type];
|
||||
const selected = styles.selected[type];
|
||||
|
@ -186,22 +211,26 @@ const getStyle = memoize(
|
|||
// });
|
||||
for (const key of Object.keys(all)) {
|
||||
if (all[key] instanceof Function) {
|
||||
all[key] = all[key](params);
|
||||
all[key] = all[key](feature, zoom);
|
||||
}
|
||||
}
|
||||
return new Style(all);
|
||||
},
|
||||
{ length: 3, max: 1024 }
|
||||
{ length: 4, max: 1024 }
|
||||
);
|
||||
|
||||
export const style = (feature: Feature, resolution: number) => {
|
||||
export const style = (feature: Feature) => {
|
||||
const type = feature.get('type');
|
||||
const isSelected = feature.get('isSelected') === true;
|
||||
// console.log({ caller: 'style', type, isSelected });
|
||||
if (styleRequiresFeature(type)) {
|
||||
return getStyle(type, isSelected, feature);
|
||||
if (styleRequiresFeatureAndZoom(type)) {
|
||||
const zoom = Math.floor(getState().zoom);
|
||||
return getStyle(type, isSelected, feature, zoom);
|
||||
}
|
||||
return getStyle(type, isSelected, null);
|
||||
if (styleRequiresFeature(type)) {
|
||||
return getStyle(type, isSelected, feature, null);
|
||||
}
|
||||
return getStyle(type, isSelected, null, null);
|
||||
};
|
||||
|
||||
export default style;
|
||||
|
|
|
@ -160,6 +160,17 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
|
|||
setEditedWpt({ ...editedWpt(), sym: value });
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
label={t('minZoom')}
|
||||
defaultValue={wpt()?.extensions?.['dyo:minZoom']?.toString()}
|
||||
onChange={(event: any, value: string) => {
|
||||
const extensions = {
|
||||
...editedWpt()?.extensions,
|
||||
'dyo:minZoom': parseFloat(value),
|
||||
};
|
||||
setEditedWpt({ ...editedWpt(), extensions });
|
||||
}}
|
||||
/>
|
||||
<Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
|
||||
<Button variant='outlined' color='secondary' onClick={closeHandler}>
|
||||
{t('cancel')}
|
||||
|
|
|
@ -48,6 +48,7 @@ interface Extensions {
|
|||
'dyo:accuracy'?: number;
|
||||
'dyo:batterylevel'?: number;
|
||||
'dyo:useragent'?: string;
|
||||
'dyo:minZoom'?: number;
|
||||
}
|
||||
|
||||
interface Trk {
|
||||
|
@ -116,4 +117,3 @@ interface Rte {
|
|||
extensions?: Extensions;
|
||||
rtept?: Wpt[];
|
||||
}
|
||||
|
||||
|
|
|
@ -14,6 +14,8 @@ const dict = {
|
|||
|
||||
name: 'Name',
|
||||
sym: 'Symbol',
|
||||
minZoom: 'Minimum zoom level',
|
||||
|
||||
save: 'SAVE',
|
||||
cancel: 'CANCEL',
|
||||
};
|
||||
|
|
|
@ -15,6 +15,7 @@ const dict = {
|
|||
|
||||
name: 'Nom',
|
||||
sym: 'Symbole',
|
||||
minZoom: 'Niveau de zoom minimum',
|
||||
|
||||
save: 'SAUVEGARDER',
|
||||
cancel: 'ANNULER',
|
||||
|
|
Loading…
Reference in New Issue