Adding context properties to OL features.
This commit is contained in:
parent
91916fca88
commit
b14db11938
|
@ -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>
|
||||
);
|
||||
}}
|
||||
|
|
|
@ -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`,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}}
|
||||
|
|
|
@ -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`,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
|
|
Loading…
Reference in New Issue