Adding context properties to OL features.

This commit is contained in:
Eric van der Vlist 2022-12-29 08:14:43 +01:00
parent 91916fca88
commit b14db11938
5 changed files with 76 additions and 20 deletions

View File

@ -83,7 +83,11 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
console.log({ caller: 'Gpx / loop', trkId }); console.log({ caller: 'Gpx / loop', trkId });
return ( return (
<Suspense> <Suspense>
<Trk vectorSource={vectorSource} trkId={trkId} /> <Trk
vectorSource={vectorSource}
trkId={trkId}
context={{ gpx, gpxId }}
/>
</Suspense> </Suspense>
); );
}} }}
@ -93,7 +97,11 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
console.log({ caller: 'Gpx / loop', rteId }); console.log({ caller: 'Gpx / loop', rteId });
return ( return (
<Suspense> <Suspense>
<Rte vectorSource={vectorSource} rteId={rteId} /> <Rte
vectorSource={vectorSource}
rteId={rteId}
context={{ gpx, gpxId }}
/>
</Suspense> </Suspense>
); );
}} }}
@ -103,7 +111,11 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
console.log({ caller: 'Gpx / loop', wptId }); console.log({ caller: 'Gpx / loop', wptId });
return ( return (
<Suspense> <Suspense>
<Wpt vectorSource={vectorSource} wptId={wptId} /> <Wpt
vectorSource={vectorSource}
wptId={wptId}
context={{ gpx, gpxId }}
/>
</Suspense> </Suspense>
); );
}} }}

View File

@ -7,9 +7,10 @@ import GeoJSON from 'ol/format/GeoJSON';
interface Props { interface Props {
rteId: string; rteId: string;
vectorSource: VectorSource; vectorSource: VectorSource;
context: any;
} }
export const Rte: Component<Props> = ({ vectorSource, rteId }) => { export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
const [rte, setRte] = createSignal<Rte>(); const [rte, setRte] = createSignal<Rte>();
const [dispatchId, setDispatchId] = createSignal<number>(-1); const [dispatchId, setDispatchId] = createSignal<number>(-1);
@ -61,7 +62,11 @@ export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
type: 'Point', type: 'Point',
coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat], coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat],
}, },
properties: { type: 'rte-start', id: rteId }, properties: {
type: 'rte-start',
id: rteId,
context: { ...context, rte, rteId },
},
id: `${rteId}/start`, id: `${rteId}/start`,
}, },
{ {
@ -73,19 +78,24 @@ export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
rtept.$.lat, rtept.$.lat,
]), ]),
}, },
properties: { type: 'rte', id: rteId }, properties: {
id:rteId type: 'rte',
id: rteId,
context: { ...context, rte, rteId },
},
id: rteId,
}, },
{ {
type: 'Feature', type: 'Feature',
geometry: { geometry: {
type: 'Point', type: 'Point',
coordinates: [ coordinates: [rte().rtept.at(-1).$.lon, rte().rtept.at(-1).$.lat],
rte().rtept.at(-1).$.lon, },
rte().rtept.at(-1).$.lat, properties: {
], type: 'rte-finish',
id: rteId,
context: { ...context, rte, rteId },
}, },
properties: { type: 'rte-finish', id: rteId },
id: `${rteId}/end`, id: `${rteId}/end`,
}, },
], ],

View File

@ -19,8 +19,9 @@ import VectorSource from 'ol/source/Vector';
interface Props { interface Props {
trkId: string; trkId: string;
vectorSource: VectorSource; vectorSource: VectorSource;
context: any;
} }
export const Trk: Component<Props> = ({ vectorSource, trkId }) => { export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
const [trk, setTrk] = createSignal<Trk>(); const [trk, setTrk] = createSignal<Trk>();
const [dispatchId, setDispatchId] = createSignal<number>(-1); const [dispatchId, setDispatchId] = createSignal<number>(-1);
@ -70,7 +71,11 @@ export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
console.log({ caller: 'Trk / loop', trksegId }); console.log({ caller: 'Trk / loop', trksegId });
return ( return (
<Suspense> <Suspense>
<Trkseg vectorSource={vectorSource} trksegId={trksegId} /> <Trkseg
vectorSource={vectorSource}
trksegId={trksegId}
context={{ ...context, trk, trkId }}
/>
</Suspense> </Suspense>
); );
}} }}

View File

@ -7,9 +7,14 @@ import GeoJSON from 'ol/format/GeoJSON';
interface Props { interface Props {
trksegId: string; trksegId: string;
vectorSource: VectorSource; vectorSource: VectorSource;
context: any;
} }
export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => { export const Trkseg: Component<Props> = ({
vectorSource,
trksegId,
context,
}) => {
const [trkseg, setTrkseg] = createSignal<Trkseg>(); const [trkseg, setTrkseg] = createSignal<Trkseg>();
const [dispatchId, setDispatchId] = createSignal<number>(-1); const [dispatchId, setDispatchId] = createSignal<number>(-1);
@ -61,7 +66,11 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
type: 'Point', type: 'Point',
coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat], coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat],
}, },
properties: { type: 'trkseg-start', id: trksegId }, properties: {
type: 'trkseg-start',
id: trksegId,
context: { ...context, trkseg, trksegId },
},
id: `${trksegId}/start`, id: `${trksegId}/start`,
}, },
{ {
@ -73,7 +82,11 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
trkpt.$.lat, trkpt.$.lat,
]), ]),
}, },
properties: { type: 'trkseg', id: trksegId }, properties: {
type: 'trkseg',
id: trksegId,
context: { ...context, trkseg, trksegId },
},
id: trksegId, id: trksegId,
}, },
{ {
@ -85,7 +98,11 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
trkseg().trkpt.at(-1).$.lat, trkseg().trkpt.at(-1).$.lat,
], ],
}, },
properties: { type: 'trkseg-finish', id: trksegId }, properties: {
type: 'trkseg-finish',
id: trksegId,
context: { ...context, trkseg, trksegId },
},
id: `${trksegId}/end`, id: `${trksegId}/end`,
}, },
], ],

View File

@ -11,6 +11,7 @@ import { Box, Button, Stack, TextField } from '@suid/material';
interface Props { interface Props {
wptId: string; wptId: string;
vectorSource: VectorSource; vectorSource: VectorSource;
context: any;
} }
enum Mode { enum Mode {
@ -18,7 +19,11 @@ enum Mode {
EDIT, EDIT,
} }
export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => { export const Wpt: Component<Props> = ({
vectorSource,
wptId: wptId,
context,
}) => {
const [t, { add, locale, dict }] = useI18n(); const [t, { add, locale, dict }] = useI18n();
const [wpt, setWpt] = createSignal<Wpt>(); const [wpt, setWpt] = createSignal<Wpt>();
@ -91,7 +96,14 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
type: 'Point', type: 'Point',
coordinates: [wpt()?.$.lon, wpt()?.$.lat], coordinates: [wpt()?.$.lon, wpt()?.$.lat],
}, },
properties: { type: 'wpt', ...wpt(), id: wptId, getTitle, edit }, properties: {
type: 'wpt',
...wpt(),
id: wptId,
getTitle,
edit,
context: { ...context, wpt, wptId },
},
id: wptId, id: wptId,
}, },
], ],