janis/osm-routing-angular
1
0
Fork 0
mirror of https://github.com/DerTyp7/osm-routing-angular.git synced 2025-10-29 12:32:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Basic Visualization

Browse Source
This commit is contained in:
Janis Meister
2022-02-23 13:48:34 +01:00
parent a71db2fa0e
commit 464da40205
17 changed files with 57 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.component.ts
View File

@@ -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);
}
}

18
src/app/interfaces/nominatim.ts
View File

@@ -1,18 +0,0 @@
/**
* Nominatim JSON object to TypeScript interface
*/
export interface Nominatim {
boundingbox?: Array<string>;
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;
}

47
src/app/interfaces/osrm.ts
View File

@@ -1,47 +0,0 @@
interface OsrmWaypoint {
hint?: string;
distance?: number;
location?: Array<number>;
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<OsrmStep>;
weight?: number;
distance?: number;
summary?: string;
duration?: number;
}
interface OsrmGeometry {
type: GeometryType;
coordinates?: Array<Array<number>>;
}
enum GeometryType {
LINE_STRING = "LineString"
}
interface OsrmRoute {
legs: Array<OsrmLeg>;
geometry: OsrmGeometry;
}
export interface Osrm {
code?: string;
waypoints?: Array<OsrmWaypoint>;
routes: Array<OsrmRoute>;
}

6
src/app/interfaces/osrmRequest.ts
View File

@@ -1,6 +0,0 @@
export interface osrmRequest{
longFrom: number;
latFrom: number;
longTo: number;
latTo: number;
}

9
src/app/interfaces/routeResponse.ts Normal file
View File

@@ -0,0 +1,9 @@
interface ResponseNode{
lat: number;
lon: number;
}
export interface RouteResponse{
nodes: Array<ResponseNode>;
}

11
src/app/map/map.component.ts
View File

@@ -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<Geometry> = new Feature({ geometry: lineString });
const vectorSource = new VectorSource({ features: [ feature ]});

7
src/app/route-list/route-list.component.html
View File

@@ -2,17 +2,18 @@
<h4>Your Route Steps</h4>
<div class="route-list">
<!--
<div *ngFor="let step of this.routeSteps" class="route-list-item" >
<!--Fork-->
Fork
<div *ngIf="step.maneuver?.type != 'fork'" style="background-image: url('/assets/images/{{step.maneuver?.modifier }}.svg');">
<p>{{step.maneuver?.type}} {{step.maneuver?.modifier}} <br> {{step.name}}</p>
</div>
<!--Not Fork-->
Not Fork
<div *ngIf="step.maneuver?.type == 'fork'" style="background-image: url('/assets/images/{{step.maneuver?.type }}-{{step.maneuver?.modifier }}.svg');">
<p>{{step.maneuver?.type}} {{step.maneuver?.modifier}} <br> {{step.name}}</p>
</div>
</div>
</div>-->
</div>
</div>

6
src/app/route-list/route-list.component.ts
View File

@@ -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<OsrmStep> = [];
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;
}
}
}*/
}

10
src/app/search/search.component.html
View File

@@ -4,11 +4,6 @@
<input #inputFrom (click)="getValue(inputFrom.value, true)" (change)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
<div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
<div *ngFor="let item of nominatimItemsFrom" >
{{ item.display_name }}
<input type="hidden" value="{{ item.display_name }}">
</div>
<!-- PHOTON -->
<div *ngFor="let item of photonItemsFrom"
(click)="selectPhoton(true, item);" >
@@ -30,11 +25,6 @@
<input #inputTo (click)="getValue(inputTo.value, false)" (change)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
<div *ngFor="let item of nominatimItemsTo" >
{{ item.display_name }}
<input type="hidden" value="{{ item.display_name }}">
</div>
<div *ngFor="let item of photonItemsTo"
(click)="selectPhoton(false, item)">
<!--IF TYPE == STREET-->

18
src/app/search/search.component.ts
View File

@@ -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<Osrm>();
@Output() emitter = new EventEmitter<RouteResponse>();
@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);

16
src/app/services/nominatim.service.spec.ts
View File

@@ -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();
});
});

23
src/app/services/nominatim.service.ts
View File

@@ -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<Nominatim[]> {
return this.http.get<Nominatim[]>("https://nominatim.openstreetmap.org/search.php?format=jsonv2&q=" + queryString);
}
}

16
src/app/services/open-layers.service.spec.ts
View File

@@ -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();
});
});

11
src/app/services/open-layers.service.ts
View File

@@ -1,11 +0,0 @@
import { Injectable } from '@angular/core';
import { OpenLayersGeoJSON } from './interfaces/openlayersGeojson';
@Injectable({
providedIn: 'root'
})
export class OpenLayersService {
constructor() { }
}

25
src/app/services/osrm.service.ts
View File

@@ -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<Osrm> {
console.log(url + this.reqParam);
return this.http.get<Osrm>(url + this.reqParam);
}
}

8
src/app/services/osrm.service.spec.ts → src/app/services/python-backend.service.spec.ts
View File

@@ -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', () => {

21
src/app/services/python-backend.service.ts Normal file
View File

@@ -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<RouteResponse> {
console.log(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon);
return this.http.get<RouteResponse>(this.url + fromWayLat + "/" + fromWayLon + "/" + toWayLat + "/" + toWayLon);
}
}