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],
|
|
|
|
},
|
2022-11-28 20:36:12 +00:00
|
|
|
properties: { type: 'trkseg-start', id: trksegId },
|
2022-11-27 18:17:33 +00:00
|
|
|
},
|
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-28 20:36:12 +00:00
|
|
|
properties: { type: 'trkseg', id: trksegId },
|
2022-11-27 18:17:33 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'Feature',
|
|
|
|
geometry: {
|
|
|
|
type: 'Point',
|
|
|
|
coordinates: [
|
|
|
|
trkseg().trkpt.at(-1).$.lon,
|
|
|
|
trkseg().trkpt.at(-1).$.lat,
|
|
|
|
],
|
|
|
|
},
|
2022-11-28 20:36:12 +00:00
|
|
|
properties: { type: 'trkseg-finish', id: trksegId },
|
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;
|