From 464da40205828b3a13c99b0235db6eb97175cf9c Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 23 Feb 2022 13:48:34 +0100 Subject: [PATCH] Basic Visualization --- src/app/app.component.ts | 6 +-- src/app/interfaces/nominatim.ts | 18 ------- src/app/interfaces/osrm.ts | 47 ------------------- src/app/interfaces/osrmRequest.ts | 6 --- src/app/interfaces/routeResponse.ts | 9 ++++ src/app/map/map.component.ts | 11 +++-- src/app/route-list/route-list.component.html | 7 +-- src/app/route-list/route-list.component.ts | 6 +-- src/app/search/search.component.html | 10 ---- src/app/search/search.component.ts | 18 +++---- src/app/services/nominatim.service.spec.ts | 16 ------- src/app/services/nominatim.service.ts | 23 --------- src/app/services/open-layers.service.spec.ts | 16 ------- src/app/services/open-layers.service.ts | 11 ----- src/app/services/osrm.service.ts | 25 ---------- ...spec.ts => python-backend.service.spec.ts} | 8 ++-- src/app/services/python-backend.service.ts | 21 +++++++++ 17 files changed, 57 insertions(+), 201 deletions(-) delete mode 100644 src/app/interfaces/nominatim.ts delete mode 100644 src/app/interfaces/osrm.ts delete mode 100644 src/app/interfaces/osrmRequest.ts create mode 100644 src/app/interfaces/routeResponse.ts delete mode 100644 src/app/services/nominatim.service.spec.ts delete mode 100644 src/app/services/nominatim.service.ts delete mode 100644 src/app/services/open-layers.service.spec.ts delete mode 100644 src/app/services/open-layers.service.ts delete mode 100644 src/app/services/osrm.service.ts rename src/app/services/{osrm.service.spec.ts => python-backend.service.spec.ts} (50%) create mode 100644 src/app/services/python-backend.service.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6209614..578affa 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, } from '@angular/core'; -import { Osrm } from './interfaces/osrm'; import { MapComponent } from './map/map.component'; import { RouteListComponent } from './route-list/route-list.component'; +import { RouteResponse } from './interfaces/routeResponse'; @Component({ @@ -16,9 +16,9 @@ export class AppComponent { @ViewChild('mapRef') mapCompopnent!: MapComponent; @ViewChild('routeListRef') routeListCompopnent!: RouteListComponent; - onSearchResponse($event: Osrm): void { + onSearchResponse($event: RouteResponse): void { this.mapCompopnent.drawPath($event); - this.routeListCompopnent.updateSidebar($event); + //this.routeListCompopnent.updateSidebar($event); } } diff --git a/src/app/interfaces/nominatim.ts b/src/app/interfaces/nominatim.ts deleted file mode 100644 index 57c2dc3..0000000 --- a/src/app/interfaces/nominatim.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Nominatim JSON object to TypeScript interface - */ -export interface Nominatim { - boundingbox?: Array; - category?: string; - display_name?: string; - icon?: string; - importance?: number; - lat?: string; - licence?: string; - lon?: string; - osm_id?: number; - osm_type?: string; - place_id?: number; - place_rank?: number; - type?: string; -} diff --git a/src/app/interfaces/osrm.ts b/src/app/interfaces/osrm.ts deleted file mode 100644 index a684089..0000000 --- a/src/app/interfaces/osrm.ts +++ /dev/null @@ -1,47 +0,0 @@ -interface OsrmWaypoint { - hint?: string; - distance?: number; - location?: Array; - name?: string; -} - -interface OsrmManeuver { - type?: string; - modifier?: string; -} - -export interface OsrmStep { - driving_side?: string; - duration?: number; - distance?: number; - name?: string; - maneuver?: OsrmManeuver; -} - -interface OsrmLeg { -steps?: Array; -weight?: number; -distance?: number; -summary?: string; -duration?: number; -} - -interface OsrmGeometry { - type: GeometryType; - coordinates?: Array>; -} - -enum GeometryType { - LINE_STRING = "LineString" -} - -interface OsrmRoute { - legs: Array; - geometry: OsrmGeometry; -} - -export interface Osrm { - code?: string; - waypoints?: Array; - routes: Array; -} diff --git a/src/app/interfaces/osrmRequest.ts b/src/app/interfaces/osrmRequest.ts deleted file mode 100644 index 3995bcd..0000000 --- a/src/app/interfaces/osrmRequest.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface osrmRequest{ - longFrom: number; - latFrom: number; - longTo: number; - latTo: number; -} diff --git a/src/app/interfaces/routeResponse.ts b/src/app/interfaces/routeResponse.ts new file mode 100644 index 0000000..44b275b --- /dev/null +++ b/src/app/interfaces/routeResponse.ts @@ -0,0 +1,9 @@ + +interface ResponseNode{ + lat: number; + lon: number; +} + +export interface RouteResponse{ + nodes: Array; +} diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index e4eb45c..0e1c3a3 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -9,9 +9,9 @@ import ZoomToExtent from 'ol/control/ZoomToExtent'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import LineString from 'ol/geom/LineString'; -import { Osrm, OsrmStep } from '../interfaces/osrm'; import { Feature } from 'ol'; import Geometry from 'ol/geom/Geometry'; +import { RouteResponse } from '../interfaces/routeResponse'; @Component({ selector: 'app-map', @@ -49,12 +49,13 @@ export class MapComponent implements AfterViewInit { setTimeout(() => this.map.updateSize(), 200); } - drawPath(osrm: Osrm): void{ + drawPath(routeResponse: RouteResponse): void{ // https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true - console.log(osrm); + console.log(routeResponse); - const coordinates = osrm.routes[0].geometry.coordinates || []; - const fCoordinates: number[][] = coordinates.map(coordinate => (transform(coordinate, 'EPSG:4326', 'EPSG:3857'))); + const nodes = routeResponse.nodes || []; + + const fCoordinates: number[][] = nodes.map(node => (transform([node.lon, node.lat], 'EPSG:4326', 'EPSG:3857'))); const lineString: LineString = new LineString(fCoordinates); const feature: Feature = new Feature({ geometry: lineString }); const vectorSource = new VectorSource({ features: [ feature ]}); diff --git a/src/app/route-list/route-list.component.html b/src/app/route-list/route-list.component.html index bcb94a7..c2e29d3 100644 --- a/src/app/route-list/route-list.component.html +++ b/src/app/route-list/route-list.component.html @@ -2,17 +2,18 @@

Your Route Steps

+ + Fork

{{step.maneuver?.type}} {{step.maneuver?.modifier}}
{{step.name}}

- + Not Fork

{{step.maneuver?.type}} {{step.maneuver?.modifier}}
{{step.name}}

-
+ --> diff --git a/src/app/route-list/route-list.component.ts b/src/app/route-list/route-list.component.ts index 952eb7e..8141aba 100644 --- a/src/app/route-list/route-list.component.ts +++ b/src/app/route-list/route-list.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { Osrm, OsrmStep } from '../interfaces/osrm'; @Component({ selector: 'app-route-list', @@ -7,7 +6,8 @@ import { Osrm, OsrmStep } from '../interfaces/osrm'; styleUrls: ['./route-list.component.css'] }) export class RouteListComponent { - + routeSteps = [] + /* routeSteps: Array = []; updateSidebar(osrm: Osrm): void{ @@ -15,6 +15,6 @@ export class RouteListComponent { if (osrm.routes[0].legs[0].steps) { this.routeSteps = osrm.routes[0].legs[0].steps; } - } + }*/ } diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index f80e3b3..eb619dd 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -4,11 +4,6 @@
-
- {{ item.display_name }} - -
-
@@ -30,11 +25,6 @@
-
- {{ item.display_name }} - -
-
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 42e6878..902d32e 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -1,11 +1,9 @@ import { Component, ElementRef, Output, ViewChild } from '@angular/core'; -import { Nominatim } from '../interfaces/nominatim'; -import { NominatimService } from '../services/nominatim.service'; import { Photon, PhotonFeatureCollection } from '../interfaces/photon'; import { PhotonService } from '../services/photon.service'; -import { OsrmService } from '../services/osrm.service'; -import { Osrm } from '../interfaces/osrm'; import { EventEmitter } from '@angular/core'; +import { PythonBackendService } from '../services/python-backend.service'; +import { RouteResponse } from '../interfaces/routeResponse'; @Component({ selector: 'app-search', @@ -14,11 +12,10 @@ import { EventEmitter } from '@angular/core'; }) export class SearchComponent { - @Output() emitter = new EventEmitter(); + @Output() emitter = new EventEmitter(); @ViewChild("inputautocompleteList") autocompleteList: ElementRef; - nominatimItemsFrom: Nominatim[] = []; - nominatimItemsTo: Nominatim[] = []; + photonItemsFrom: Photon[] = []; photonItemsTo: Photon[] = []; @@ -35,9 +32,8 @@ export class SearchComponent { selectedPhotonTo: Photon; constructor( - private nominatimService: NominatimService, private photonService: PhotonService, - private osrmService: OsrmService, + private pythonBackendService: PythonBackendService, ) { } getFormattedPhotonValue(p: Photon): string{ @@ -115,8 +111,8 @@ export class SearchComponent { } getRoute(): void{ - this.osrmService.sendQueryRequest("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + this.longFrom + "," + this.latFrom + ";" + this.longTo + "," + this.latTo) - .subscribe((response: Osrm) => { + this.pythonBackendService.sendQueryRequest(this.latFrom.toString(), this.longFrom.toString(), this.latTo.toString(), this.longTo.toString()) + .subscribe((response: RouteResponse) => { this.emitter.emit(response); /* this.mapComponent.updateSidebar(response); diff --git a/src/app/services/nominatim.service.spec.ts b/src/app/services/nominatim.service.spec.ts deleted file mode 100644 index ccd4b26..0000000 --- a/src/app/services/nominatim.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { NominatimService } from './nominatim.service'; - -describe('NominatimService', () => { - let service: NominatimService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(NominatimService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/nominatim.service.ts b/src/app/services/nominatim.service.ts deleted file mode 100644 index 3626aa5..0000000 --- a/src/app/services/nominatim.service.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Nominatim } from '../interfaces/nominatim'; -import { Observable } from 'rxjs'; - -/** - * communicates with Nominatim (https://nominatim.org/) - */ -@Injectable({ - providedIn: 'root' -}) -export class NominatimService{ - - constructor(private http: HttpClient) { } - - /** - * sends a query request to Nominatim and gets response (https://nominatim.org/release-docs/develop/api/Search/) - */ - sendQueryRequest(queryString: string): Observable { - return this.http.get("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + queryString); - } - -} diff --git a/src/app/services/open-layers.service.spec.ts b/src/app/services/open-layers.service.spec.ts deleted file mode 100644 index 4639485..0000000 --- a/src/app/services/open-layers.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { OpenLayersService } from './open-layers.service'; - -describe('OpenLayersService', () => { - let service: OpenLayersService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(OpenLayersService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/open-layers.service.ts b/src/app/services/open-layers.service.ts deleted file mode 100644 index d2f5bc7..0000000 --- a/src/app/services/open-layers.service.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Injectable } from '@angular/core'; -import { OpenLayersGeoJSON } from './interfaces/openlayersGeojson'; - -@Injectable({ - providedIn: 'root' -}) -export class OpenLayersService { - - constructor() { } - -} diff --git a/src/app/services/osrm.service.ts b/src/app/services/osrm.service.ts deleted file mode 100644 index 7d5acac..0000000 --- a/src/app/services/osrm.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; -import { Osrm } from '../interfaces/osrm'; - -/** - * http://router.project-osrm.org/route/v1/driving/13.388860,52.517037;13.397634,52.529407;13.428555,52.523219?overview=false&steps=true&geometries=geojson - */ -@Injectable({ - providedIn: 'root' -}) -export class OsrmService{ - - reqParam: string = "?overview=full&alternatives=false&steps=true&geometries=geojson"; - constructor(private http: HttpClient) { } - - /** - * sends a query request to Osrm and gets response (http://project-osrm.org/docs/v5.24.0/api/?language=cURL#table-service) - */ - sendQueryRequest(url: string): Observable { - console.log(url + this.reqParam); - return this.http.get(url + this.reqParam); - } - -} diff --git a/src/app/services/osrm.service.spec.ts b/src/app/services/python-backend.service.spec.ts similarity index 50% rename from src/app/services/osrm.service.spec.ts rename to src/app/services/python-backend.service.spec.ts index 833485d..b13e48f 100644 --- a/src/app/services/osrm.service.spec.ts +++ b/src/app/services/python-backend.service.spec.ts @@ -1,13 +1,13 @@ import { TestBed } from '@angular/core/testing'; -import { OsrmService } from './osrm.service'; +import { PythonBackendService } from './python-backend.service'; -describe('OsrmService', () => { - let service: OsrmService; +describe('PythonBackendService', () => { + let service: PythonBackendService; beforeEach(() => { TestBed.configureTestingModule({}); - service = TestBed.inject(OsrmService); + service = TestBed.inject(PythonBackendService); }); it('should be created', () => { diff --git a/src/app/services/python-backend.service.ts b/src/app/services/python-backend.service.ts new file mode 100644 index 0000000..e279d66 --- /dev/null +++ b/src/app/services/python-backend.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { RouteResponse } from '../interfaces/routeResponse'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class PythonBackendService { + url: string = "http://127.0.0.1:5555/getRouteByCoordinates/" + + constructor(private http: HttpClient) { } + + /** + * sends a query request to Osrm and gets response (http://project-osrm.org/docs/v5.24.0/api/?language=cURL#table-service) + */ + sendQueryRequest(fromWayLat: string, fromWayLon: string, toWayLat: string, toWayLon: string): Observable { + console.log(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon); + return this.http.get(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon); + } +}