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

View File

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

View File

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

View File

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

View File

@ -11,6 +11,7 @@ import { Box, Button, Stack, TextField } from '@suid/material';
interface Props {
wptId: string;
vectorSource: VectorSource;
context: any;
}
enum Mode {
@ -18,7 +19,11 @@ enum Mode {
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 [wpt, setWpt] = createSignal<Wpt>();
@ -91,7 +96,14 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
type: 'Point',
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,
},
],