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

updating gpx rendering design

Browse Source
This commit is contained in:
Patrik J. Braun 2018-11-26 17:14:58 +01:00
parent 1a37b832be
commit ceb6cc4a15
2 changed files with 60 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
View File

@ -7,22 +7,37 @@
[style.left.px]="lightboxDimension.left"
[style.opacity]="opacity">
<agm-map
#map
[style.width.px]="mapDimension.width"
[style.height.px]="mapDimension.height"
[fitBounds]="true">
<agm-polyline *ngFor="let path of paths"
strokeColor="#007bff"
strokeOpacity="0.8"
strokeWeight="6">
<agm-polyline-point
*ngFor="let point of path"
[latitude]="point.latitude" [longitude]="point.longitude">
</agm-polyline-point>
</agm-polyline>
<ng-container *ngIf="map.zoom > 11">
<agm-polyline *ngFor="let path of paths"
strokeColor="#007bff"
strokeOpacity="0.8"
strokeWeight="6">
<agm-polyline-point
*ngFor="let point of path"
[latitude]="point.latitude" [longitude]="point.longitude">
</agm-polyline-point>
</agm-polyline>
</ng-container>
<ng-container *ngIf="map.zoom <= 11">
<agm-polyline *ngFor="let path of pathOutlines"
strokeColor="#007bff"
strokeOpacity="0.8"
strokeWeight="6">
<agm-polyline-point
*ngFor="let point of path"
[latitude]="point.latitude" [longitude]="point.longitude">
</agm-polyline-point>
</agm-polyline>
</ng-container>
<agm-marker
*ngFor="let path of paths"
[latitude]="path[0].latitude"
[longitude]="path[0].longitude"
iconUrl="https://cdn.mapmarker.io/api/v1/fa?size=32&icon=fa-map-marker-alt&color=%23006fe6"
[agmFitBounds]="true">
</agm-marker>
<agm-marker

36
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -33,6 +33,7 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
public opacity = 1.0;
mapPhotos: MapPhoto[] = [];
paths: MapPath[][] = [];
pathOutlines: MapPath[][] = [];
mapCenter = {latitude: 0, longitude: 0};
@ViewChild('root') elementRef: ElementRef;
@ -153,6 +154,37 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
}
private calcDistance(loc: MapPath, loc2: MapPath): number {
const radlat1 = Math.PI * loc.latitude / 180;
const radlat2 = Math.PI * loc2.latitude / 180;
const theta = loc.longitude - loc2.longitude;
const radtheta = Math.PI * theta / 180;
let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
if (dist > 1) {
dist = 1;
}
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
return dist * 1.609344;
}
private gpxFilter(list: MapPath[]) {
let last = list[0];
const out = [];
for (let i = 1; i < list.length; i++) {
if (this.calcDistance(list[i], last) > 0.5) {
out.push(list[i]);
last = list[i];
}
}
if (out.length < 2) {
out.push(list[list.length - 1]);
}
return out;
}
private async loadGPXFiles(): Promise<void> {
this.paths = [];
for (let i = 0; i < this.gpxFiles.length; i++) {
@ -161,7 +193,11 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
if (file !== this.gpxFiles[i]) { // check race condition
return;
}
if (path.length === 0) {
continue;
}
this.paths.push(path);
this.pathOutlines.push(this.gpxFilter(path));
}
}