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

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

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

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

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

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

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