Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Adding a second vector source (and layer) per GPX to display uncluttered features.

This commit is contained in:
Eric van der Vlist 2023-02-23 11:59:51 +01:00
parent 99374520a5
commit 909949657e
5 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/gpx/Gpx.tsx
View File

@ -37,16 +37,26 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
destroyCachedSignal(params);
});
const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({
source: vectorSource,
const vectorSources = [new VectorSource(), new VectorSource()];
const vectorLayers = [
new VectorLayer({
source: vectorSources[0],
style,
declutter: true,
}),
new VectorLayer({
source: vectorSources[1],
style,
declutter: false,
}),
];
createEffect(() => {
map()?.addLayer(vectorLayers[0]);
map()?.addLayer(vectorLayers[1]);
});
createEffect(() => map()?.addLayer(vectorLayer));
createEffect(() => {
console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayer });
console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayers });
});
return (
@ -57,7 +67,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
return (
<Suspense>
<Trk
vectorSource={vectorSource}
vectorSources={vectorSources}
trkId={trkId}
context={{ gpx, gpxId }}
/>
@ -71,7 +81,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
return (
<Suspense>
<Rte
vectorSource={vectorSource}
vectorSources={vectorSources}
rteId={rteId}
context={{ gpx, gpxId }}
/>
@ -85,7 +95,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
return (
<Suspense>
<Wpt
vectorSource={vectorSource}
vectorSources={vectorSources}
wptId={wptId}
context={{ gpx, gpxId }}
/>

12
src/components/rte/Rte.tsx
View File

@ -10,11 +10,11 @@ import { fromLonLat } from 'ol/proj';
interface Props {
rteId: string;
vectorSource: VectorSource;
vectorSources: VectorSource[];
context: any;
}
export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
export const Rte: Component<Props> = ({ vectorSources, rteId, context }) => {
const params = {
id: rteId,
method: 'getRte',
@ -33,7 +33,7 @@ export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
});
createEffect(() => {
console.log({ caller: 'Rte', vectorSource, rteId, rte: rte() });
console.log({ caller: 'Rte', vectorSources, rteId, rte: rte() });
if (rte() && rte().rtept && rte().rtept.length > 0) {
let geo: any = {
@ -92,12 +92,12 @@ export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
const features = new GeoJSON().readFeatures(geo);
console.log({ caller: 'Rte', features });
[`${rteId}/start`, rteId, `${rteId}/end`].forEach((id) => {
const feature = vectorSource.getFeatureById(id);
const feature = vectorSources[0].getFeatureById(id);
if (feature) {
vectorSource.removeFeature(feature);
vectorSources[0].removeFeature(feature);
}
});
vectorSource.addFeatures(features);
vectorSources[0].addFeatures(features);
}
});

8
src/components/trk/Trk.tsx
View File

@ -17,10 +17,10 @@ import {
interface Props {
trkId: string;
vectorSource: VectorSource;
vectorSources: VectorSource[];
context: any;
}
export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
export const Trk: Component<Props> = ({ vectorSources, trkId, context }) => {
const params = {
id: trkId,
method: 'getTrk',
@ -33,7 +33,7 @@ export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
});
createEffect(() => {
console.log({ caller: 'Trk', vectorSource, trkId, trk: trk() });
console.log({ caller: 'Trk', vectorSources, trkId, trk: trk() });
});
return (
@ -44,7 +44,7 @@ export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
return (
<Suspense>
<Trkseg
vectorSource={vectorSource}
vectorSources={vectorSources}
trksegId={trksegId}
context={{ ...context, trk, trkId }}
/>

24
src/components/trkseg/Trkseg.tsx
View File

@ -11,12 +11,12 @@ import { fromLonLat } from 'ol/proj';
interface Props {
trksegId: string;
vectorSource: VectorSource;
vectorSources: VectorSource[];
context: any;
}
export const Trkseg: Component<Props> = ({
vectorSource,
vectorSources,
trksegId,
context,
}) => {
@ -28,11 +28,13 @@ export const Trkseg: Component<Props> = ({
const clearFeatures = () => {
[`${trksegId}/start`, trksegId, `${trksegId}/end`].forEach((id) => {
vectorSources.forEach((vectorSource) => {
const feature = vectorSource.getFeatureById(id);
if (feature) {
vectorSource.removeFeature(feature);
}
});
});
};
const positions = () => {
@ -70,15 +72,17 @@ export const Trkseg: Component<Props> = ({
createEffect(() => {
console.log({
caller: 'Trkseg',
vectorSource,
vectorSources,
trksegId,
trkseg: trkseg(),
context,
trk: context.trk(),
});
clearFeatures();
if (trkseg() && trkseg().trkpt && trkseg().trkpt.length > 0) {
let geo: any = {
let geoCluttered: any = {
type: 'FeatureCollection',
features: [
{
@ -114,6 +118,12 @@ export const Trkseg: Component<Props> = ({
},
id: trksegId,
},
],
};
let geoUnCluttered: any = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
@ -134,10 +144,8 @@ export const Trkseg: Component<Props> = ({
],
};
const features = new GeoJSON().readFeatures(geo);
console.log({ caller: 'Trkseg', features });
clearFeatures();
vectorSource.addFeatures(features);
vectorSources[0].addFeatures(new GeoJSON().readFeatures(geoCluttered));
vectorSources[1].addFeatures(new GeoJSON().readFeatures(geoUnCluttered));
}
});

16
src/components/wpt/Wpt.tsx
View File

@ -12,12 +12,12 @@ import { fromLonLat } from 'ol/proj';
interface Props {
wptId: string;
vectorSource: VectorSource;
vectorSources: VectorSource[];
context: any;
}
export const Wpt: Component<Props> = ({
vectorSource,
vectorSources,
wptId: wptId,
context,
}) => {
@ -48,12 +48,12 @@ export const Wpt: Component<Props> = ({
};
createEffect(() => {
console.log({ caller: 'Wpt', vectorSource, wptId, wpt: cloneDeep(wpt()) });
console.log({ caller: 'Wpt', vectorSources, wptId, wpt: cloneDeep(wpt()) });
if (wpt()) {
const existingFeature = vectorSource.getFeatureById(wptId);
const existingFeature = vectorSources[0].getFeatureById(wptId);
if (existingFeature) {
vectorSource.removeFeature(existingFeature);
vectorSources[0].removeFeature(existingFeature);
}
let geo: any = {
type: 'FeatureCollection',
@ -78,11 +78,11 @@ export const Wpt: Component<Props> = ({
const features = new GeoJSON().readFeatures(geo);
console.log({ caller: 'Wpt', features });
const feature = vectorSource.getFeatureById(wptId);
const feature = vectorSources[0].getFeatureById(wptId);
if (feature) {
vectorSource.removeFeature(feature);
vectorSources[0].removeFeature(feature);
}
vectorSource.addFeatures(features);
vectorSources[0].addFeatures(features);
}
});