dyomedea/src/components/trkseg/Trkseg.tsx

77 lines
1.9 KiB
TypeScript
Raw Normal View History

2022-11-27 15:18:50 +00:00
import { Component, createEffect, createResource } from 'solid-js';
import OlMap from 'ol/Map';
import dispatch from '../../workers/dispatcher-main';
import getUri from '../../lib/ids';
2022-11-27 16:12:25 +00:00
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
2022-11-27 15:18:50 +00:00
interface Props {
trksegId: string;
2022-11-27 16:12:25 +00:00
vectorSource: VectorSource;
2022-11-27 15:18:50 +00:00
}
2022-11-27 16:12:25 +00:00
export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
2022-11-27 15:18:50 +00:00
const [trkseg] = createResource(
trksegId,
async () =>
await dispatch({
action: 'getTrkseg',
params: {
id: trksegId,
},
})
);
createEffect(() => {
2022-11-27 16:12:25 +00:00
console.log({ caller: 'Trkseg', vectorSource, trksegId, trkseg: trkseg() });
if (trkseg()) {
let geo: any = {
type: 'FeatureCollection',
features: [
2022-11-27 18:17:33 +00:00
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat],
},
properties: { type: 'trkseg-start' },
},
2022-11-27 16:12:25 +00:00
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: trkseg().trkpt.map((trkpt: any) => [
trkpt.$.lon,
trkpt.$.lat,
]),
},
2022-11-27 18:17:33 +00:00
properties: { type: 'trkseg' },
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [
trkseg().trkpt.at(-1).$.lon,
trkseg().trkpt.at(-1).$.lat,
],
},
properties: { type: 'trkseg-finish' },
2022-11-27 16:12:25 +00:00
},
],
};
const features = new GeoJSON().readFeatures(geo);
console.log({ caller: 'Trkseg', features });
vectorSource.addFeatures(features);
}
2022-11-27 15:18:50 +00:00
});
return <></>;
};
export default Trkseg;