xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

Making multi layer gpx path render properly. Fixes #703

Browse Source
This commit is contained in:
Patrik J. Braun 2023-09-01 23:54:36 +02:00
parent 70f4b02659
commit d32e14894b
3 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/frontend/app/ui/gallery/blog/blog.gallery.component.ts
View File

@ -15,14 +15,6 @@ export class GalleryBlogComponent implements OnChanges {
constructor(public blogService: BlogService) {}
get SampleText(): string {
if (!this.markdowns || this.markdowns.length < 1) {
return '';
}
return this.markdowns[0].length < 203
? this.markdowns[0]
: this.markdowns[0].substring(0, 200) + '...';
}
ngOnChanges(): void {
this.loadMarkdown().catch(console.error);

37
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -521,9 +521,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
);
}
private addArchForLongDistancePaths(parsedGPX: { name: string, path: LatLngLiteral[]; markers: LatLngLiteral[] }) {
private addArchForLongDistancePaths(path: LatLngLiteral[]) {
for (let i = 0; i < parsedGPX.path.length - 1; ++i) {
for (let i = 0; i < path.length - 1; ++i) {
const dst = (a: LatLngLiteral, b: LatLngLiteral) => {
return Math.sqrt(Math.pow(a.lat - b.lat, 2) +
Math.pow(a.lng - b.lng, 2));
@ -550,9 +550,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
return `${a.lat.toFixed(KEY_PRECISION)},${a.lng.toFixed(KEY_PRECISION)},${b.lat.toFixed(KEY_PRECISION)},${b.lng.toFixed(KEY_PRECISION)}`;
};
if (Math.abs(parsedGPX.path[i].lng - parsedGPX.path[i + 1].lng) > Config.Map.bendLongPathsTrigger) {
const s = parsedGPX.path[i];
const e = parsedGPX.path[i + 1];
if (Math.abs(path[i].lng - path[i + 1].lng) > Config.Map.bendLongPathsTrigger) {
const s = path[i];
const e = path[i + 1];
const k = getKey(s, e);
this.longPathSEPairs[k] = (this.longPathSEPairs[k] || 0) + 1;
const occurrence = this.longPathSEPairs[k] - 1;
@ -590,7 +590,7 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
// pathLayer.layer.addLayer(mkr);
});
parsedGPX.path.splice(i + 1, 0, ...newPoints);
path.splice(i + 1, 0, ...newPoints);
i += newPoints.length;
}
}
@ -644,9 +644,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
pathLayer = {layer: this.pathLayersConfigOrdered[0].layer, icon: MarkerFactory.defIcon};
}
if (parsedGPX.path.length !== 0) {
if (parsedGPX.path.length !== 0 && parsedGPX.path[0].length !== 0) {
// render the beginning of the path with a marker
const mkr = marker(parsedGPX.path[0]);
const mkr = marker(parsedGPX.path[0][0]);
pathLayer.layer.addLayer(mkr);
mkr.setIcon(pathLayer.icon);
@ -655,16 +655,19 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
mkr.bindPopup(file.name + ': ' + parsedGPX.name);
//add arch for long paths
this.addArchForLongDistancePaths(parsedGPX);
parsedGPX.path.forEach(p => {
this.addArchForLongDistancePaths(p);
pathLayer.layer.addLayer(
polyline(p, {
smoothFactor: 3,
interactive: false,
color: pathLayer?.theme?.color,
dashArray: pathLayer?.theme?.dashArray
})
);
});
pathLayer.layer.addLayer(
polyline(parsedGPX.path, {
smoothFactor: 3,
interactive: false,
color: pathLayer?.theme?.color,
dashArray: pathLayer?.theme?.dashArray
})
);
}
parsedGPX.markers.forEach((mc) => {
const mkr = marker(mc);

21
src/frontend/app/ui/gallery/map/map.service.ts
View File

@ -100,7 +100,7 @@ export class MapService {
public async getMapCoordinates(
file: FileDTO
): Promise<{ name: string, path: LatLngLiteral[]; markers: LatLngLiteral[] }> {
): Promise<{ name: string, path: LatLngLiteral[][]; markers: LatLngLiteral[] }> {
const filePath = Utils.concatUrls(
file.directory.path,
file.directory.name,
@ -109,8 +109,8 @@ export class MapService {
const gpx = await this.networkService.getXML(
'/gallery/content/' + filePath + '/bestFit'
);
const getCoordinates = (tagName: string): LatLngLiteral[] => {
const elements = gpx.getElementsByTagName(tagName);
const getCoordinates = (inputElement: Document, tagName: string): LatLngLiteral[] => {
const elements = inputElement.getElementsByTagName(tagName);
const ret: LatLngLiteral[] = [];
// eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let i = 0; i < elements.length; i++) {
@ -121,10 +121,21 @@ export class MapService {
}
return ret;
};
const trksegs = gpx.getElementsByTagName('trkseg');
if (!trksegs) {
return {
name: gpx.getElementsByTagName('name')?.[0]?.textContent || '',
path: [getCoordinates(gpx, 'trkpt')],
markers: getCoordinates(gpx, 'wpt'),
};
}
const trksegArr = [].slice.call(trksegs);
return {
name: gpx.getElementsByTagName('name')?.[0]?.textContent || '',
path: getCoordinates('trkpt'),
markers: getCoordinates('wpt'),
path: [...trksegArr].map(t => getCoordinates(t,'trkpt')),
markers: getCoordinates(gpx, 'wpt'),
};
}
}