Displaying routes.

This commit is contained in:
Eric van der Vlist 2022-12-09 17:31:56 +01:00
parent f84c82bc32
commit da053dcb50
8 changed files with 173 additions and 3 deletions

View File

@ -18,6 +18,7 @@ import VectorLayer from 'ol/layer/Vector';
import style from './styles'; import style from './styles';
import Wpt from '../wpt'; import Wpt from '../wpt';
import Rte from '../rte';
interface Props { interface Props {
gpxId: string; gpxId: string;
@ -83,6 +84,16 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
); );
}} }}
</For> </For>
<For each={gpx() ? gpx().rte || [] : []}>
{(rteId: string) => {
console.log({ caller: 'Gpx / loop', rteId });
return (
<Suspense>
<Rte vectorSource={vectorSource} rteId={rteId} />
</Suspense>
);
}}
</For>
<For each={gpx() ? gpx().wpt || [] : []}> <For each={gpx() ? gpx().wpt || [] : []}>
{(wptId: string) => { {(wptId: string) => {
console.log({ caller: 'Gpx / loop', wptId }); console.log({ caller: 'Gpx / loop', wptId });

View File

@ -113,6 +113,28 @@ const styles = {
anchor: [0.5, 1], anchor: [0.5, 1],
}), }),
}, },
rte: {
stroke: new Stroke({
color: 'green',
width: 5,
}),
},
'rte-start': {
image: new Icon({
src: startIcon,
scale: 0.3,
opacity: 0.6,
anchor: [0.5, 1],
}),
},
'rte-finish': {
image: new Icon({
src: finishIcon,
scale: 0.3,
opacity: 0.6,
anchor: [0.5, 1],
}),
},
wpt: { wpt: {
image: (feature: Feature, zoom: number) => { image: (feature: Feature, zoom: number) => {
const minZoom = feature.get('extensions')?.['dyo:minZoom']; const minZoom = feature.get('extensions')?.['dyo:minZoom'];
@ -145,6 +167,12 @@ const styles = {
width: 3, width: 3,
}), }),
}, },
rte: {
stroke: new Stroke({
color: 'red',
width: 5,
}),
},
wpt: { wpt: {
image: new Icon({ image: new Icon({
src: wptIconSel, src: wptIconSel,

100
src/components/rte/Rte.tsx Normal file
View File

@ -0,0 +1,100 @@
import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
interface Props {
rteId: string;
vectorSource: VectorSource;
}
export const Rte: Component<Props> = ({ vectorSource, rteId }) => {
const [rte, setRte] = createSignal<Rte>();
const [dispatchId, setDispatchId] = createSignal<number>(-1);
const rteCallBack = (error: any, result: any, id?: number) => {
if (error) {
console.error({ caller: 'rteCallBack', error });
} else {
console.log({ caller: 'rteCallBack', result });
setRte(result);
}
if (id) {
setDispatchId(id);
}
};
dispatch(
{
action: 'getAndWatch',
params: {
id: rteId,
method: 'getRte',
},
},
rteCallBack,
true
);
onCleanup(() => {
dispatch({
action: 'cancelWatch',
params: {
id: rteId,
method: 'getRte',
},
});
cancelDispatch(dispatchId());
});
createEffect(() => {
console.log({ caller: 'Rte', vectorSource, rteId, rte: rte() });
if (rte()) {
let geo: any = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat],
},
properties: { type: 'rte-start', id: rteId },
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: rte().rtept.map((rtept: any) => [
rtept.$.lon,
rtept.$.lat,
]),
},
properties: { type: 'rte', id: rteId },
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [
rte().rtept.at(-1).$.lon,
rte().rtept.at(-1).$.lat,
],
},
properties: { type: 'rte-finish', id: rteId },
},
],
};
const features = new GeoJSON().readFeatures(geo);
console.log({ caller: 'Rte', features });
vectorSource.addFeatures(features);
}
});
return <></>;
};
export default Rte;

View File

@ -0,0 +1 @@
export { default } from './Rte';

View File

@ -1,6 +1,7 @@
import { getWpt } from '../db/wpt'; import { getWpt } from '../db/wpt';
import { returnAgain } from '../workers/dispatcher-worker'; import { returnAgain } from '../workers/dispatcher-worker';
import { getAllGpxes, getGpx } from './gpx'; import { getAllGpxes, getGpx } from './gpx';
import { getRte } from './rte';
import { getTrk } from './trk'; import { getTrk } from './trk';
import { getTrkseg } from './trkseg'; import { getTrkseg } from './trkseg';
@ -14,6 +15,7 @@ const methods = {
getTrk, getTrk,
getTrkseg, getTrkseg,
getWpt, getWpt,
getRte,
}; };
const sendUpdate = async (params: any) => { const sendUpdate = async (params: any) => {

View File

@ -1,6 +1,6 @@
import getUri from '../lib/ids'; import getUri from '../lib/ids';
import { putNewGpx } from './gpx'; import { appendToArray, putNewGpx } from './gpx';
import { put } from './lib'; import { getFamily, put } from './lib';
export const emptyRte: Rte = { export const emptyRte: Rte = {
name: undefined, name: undefined,
@ -31,3 +31,24 @@ export const putNewRte = async (id?: IdRte | IdGpx) => {
); );
return finalId as IdRte; return finalId as IdRte;
}; };
export const getRte = async (params: any) => {
const { id } = params;
const docs = await getFamily(id, { include_docs: true });
let target: any[];
let rte: Rte | undefined = undefined;
docs.rows.forEach((row: any) => {
// level 0
if (row.doc.type === 'rte') {
target = [row.doc.doc];
rte = row.doc.doc;
}
//level 1
if (row.doc.type === 'rtept') {
target.splice(1);
appendToArray(target.at(-1), row.doc.type, row.doc.doc);
target.push(row.doc.doc);
}
});
return rte;
};

View File

@ -10,7 +10,9 @@ const dict = {
trkseg: 'track segment', trkseg: 'track segment',
'trkseg-start': 'start of track segment', 'trkseg-start': 'start of track segment',
'trkseg-finish': 'end of track segment', 'trkseg-finish': 'end of track segment',
rte: 'route',
'rte-start': 'start of route',
'rte-finish': 'end of route',
name: 'Name', name: 'Name',
sym: 'Symbol', sym: 'Symbol',

View File

@ -12,6 +12,11 @@ const dict = {
trkseg: 'segment de trace', trkseg: 'segment de trace',
'trkseg-start': 'début de segment de trace', 'trkseg-start': 'début de segment de trace',
'trkseg-finish': 'fin de segment de trace', 'trkseg-finish': 'fin de segment de trace',
rte: 'route',
'rte-start': 'début de route',
'rte-finish': 'fin de route',
name: 'Nom', name: 'Nom',
sym: 'Symbole', sym: 'Symbole',