From 9f69b555db97e0ead77162a1bd05369ca29f6851 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Wed, 19 Jan 2022 13:38:49 +0100 Subject: [PATCH] osrm service, ol geojson interface, ol service --- src/app/app.component.ts | 52 +++++++++++++------------ src/app/app.module.ts | 2 + src/app/interfaces/openLayersGeoJSON.ts | 29 ++++++++++++++ src/app/interfaces/osrm.ts | 20 ++++++++++ src/app/open-layers.service.spec.ts | 16 ++++++++ src/app/open-layers.service.ts | 11 ++++++ src/app/osrm.service.ts | 14 +++++-- src/app/osrm/osrm.component.css | 0 src/app/osrm/osrm.component.html | 1 + src/app/osrm/osrm.component.spec.ts | 25 ++++++++++++ src/app/osrm/osrm.component.ts | 16 ++++++++ src/app/photon.service.ts | 2 +- src/app/search/search.component.css | 27 +++++++++++++ src/app/search/search.component.html | 3 +- src/app/search/search.component.ts | 21 +++++++--- src/styles.css | 4 ++ 16 files changed, 208 insertions(+), 35 deletions(-) create mode 100644 src/app/interfaces/openLayersGeoJSON.ts create mode 100644 src/app/interfaces/osrm.ts create mode 100644 src/app/open-layers.service.spec.ts create mode 100644 src/app/open-layers.service.ts create mode 100644 src/app/osrm/osrm.component.css create mode 100644 src/app/osrm/osrm.component.html create mode 100644 src/app/osrm/osrm.component.spec.ts create mode 100644 src/app/osrm/osrm.component.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index dc78066..7874672 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,22 @@ -import { Component, AfterViewInit, ElementRef, ViewChild} from '@angular/core'; +import { Component, AfterViewInit} from '@angular/core'; import { defaults as defaultControls } from 'ol/control'; +import GeoJSON from 'ol/format/GeoJSON'; +import { OpenLayersGeoJSON } from './interfaces/openlayersGeojson'; import { fromLonLat } from 'ol/proj'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import XYZ from 'ol/source/XYZ'; import ZoomToExtent from 'ol/control/ZoomToExtent'; +import Layer from 'ol/layer/Layer'; +import VectorLayer from 'ol/layer/Vector'; +import Draw from 'ol/interaction/Draw'; +import VectorSource from 'ol/source/Vector'; +import { wrapX } from 'ol/extent'; +import LineString from 'ol/geom/LineString'; +import { Osrm } from './interfaces/osrm'; @Component({ selector: 'app-root', @@ -18,33 +27,11 @@ import ZoomToExtent from 'ol/control/ZoomToExtent'; export class AppComponent implements AfterViewInit { title = "Street Map"; map: Map; - - @ViewChild("inputautocompleteList") autocompleteList: ElementRef; - + vectorLayer = new VectorLayer; + features: GeoJSON; constructor() { } - updateAutoCompleteList(): void{ - this.autocompleteList.nativeElement.innerHTML = "Fsd"; - } - - // Gets called in "app.component.html" when an input changes its value - getValue(valueFrom:string, valueTo:string): void{ - console.log("From " + valueFrom + " to " + valueTo); - - /* - this.nominatimService.sendQueryRequest(valueFrom) - .subscribe((response: Nominatim[]) => console.log(response));*/ - - - - - } - - ngOnInit() { - - } - ngAfterViewInit() { this.map = new Map({ target: 'map', @@ -71,5 +58,20 @@ export class AppComponent implements AfterViewInit { }); setTimeout(() => this.map.updateSize(), 200); } + + drawPath(): void{ + + // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON()) + + this.vectorLayer = new VectorLayer({ + background: '#1a2b39', + source: new VectorSource({ + url: 'http://router.project-osrm.org/route/v1/driving/-1.8744130630953275,52.45318441573963;-1.879401971863028,52.451059431849615;-1.8783612747652496,52.44962092302177;-1.882395317123648,52.44969938835112;-1.8824275036318268,52.452046744809195;-1.8794663448793851,52.45332825709778;-1.8898840446932288,52.454230523991356?overview=full&steps=true&geometries=geojson', + format: new GeoJSON({dataProjection: 'EPSG:4326', featureProjection: "EPSG:3857" }), + }) + }); + + this.map.addLayer(this.vectorLayer); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6ce9c83..50a8305 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,13 @@ import { BrowserModule } from '@angular/platform-browser'; import {HttpClientModule} from '@angular/common/http'; import { AppComponent } from './app.component'; import { SearchComponent } from './search/search.component'; +import { OsrmComponent } from './osrm/osrm.component'; @NgModule({ declarations: [ AppComponent, SearchComponent, + OsrmComponent, ], imports: [ BrowserModule, diff --git a/src/app/interfaces/openLayersGeoJSON.ts b/src/app/interfaces/openLayersGeoJSON.ts new file mode 100644 index 0000000..b3d1dbf --- /dev/null +++ b/src/app/interfaces/openLayersGeoJSON.ts @@ -0,0 +1,29 @@ +interface OpenLayersGeometry{ + coordinates: Array>; + type?: string; +} + +interface OpenLayersProperties{ + ECO_NAME?: string; + BIOME_NAME?: string; + REALM?: string; + NNH?: string; + NNH_NAME?: string; + COLOR?: string; + COLOR_BIO?: string; + COLOR_NNH?: string; +} + +interface OpenLayersFeature{ + type: string; + geometry: OpenLayersGeometry; + id: number; + properties: OpenLayersProperties; +} + +export interface OpenLayersGeoJSON{ + type: string; + features: Array; + geometry: OpenLayersGeometry; + properties: OpenLayersProperties; +} \ No newline at end of file diff --git a/src/app/interfaces/osrm.ts b/src/app/interfaces/osrm.ts new file mode 100644 index 0000000..4aa9ac9 --- /dev/null +++ b/src/app/interfaces/osrm.ts @@ -0,0 +1,20 @@ +interface OsrmWaypoint{ + hint?: string; + distance?: number; + location?: Array; + name?: string; +} + +interface OsrmGeometry{ + coordinates?: Array>; +} + +interface OsrmRoute{ + geometry?: OsrmGeometry; +} + +export interface Osrm{ + code?: string; + waypoints?: Array; + routes?: Array; +} \ No newline at end of file diff --git a/src/app/open-layers.service.spec.ts b/src/app/open-layers.service.spec.ts new file mode 100644 index 0000000..4639485 --- /dev/null +++ b/src/app/open-layers.service.spec.ts @@ -0,0 +1,16 @@ +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/open-layers.service.ts b/src/app/open-layers.service.ts new file mode 100644 index 0000000..d2f5bc7 --- /dev/null +++ b/src/app/open-layers.service.ts @@ -0,0 +1,11 @@ +import { Injectable } from '@angular/core'; +import { OpenLayersGeoJSON } from './interfaces/openlayersGeojson'; + +@Injectable({ + providedIn: 'root' +}) +export class OpenLayersService { + + constructor() { } + +} diff --git a/src/app/osrm.service.ts b/src/app/osrm.service.ts index ab5e0ec..e6507a2 100644 --- a/src/app/osrm.service.ts +++ b/src/app/osrm.service.ts @@ -1,11 +1,19 @@ import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { Osrm } from './interfaces/osrm'; @Injectable({ providedIn: 'root' }) // http://router.project-osrm.org/route/v1/driving/13.388860,52.517037;13.397634,52.529407;13.428555,52.523219?overview=full&steps=true&geometries=geojson -export class OsrmService { +export class OsrmService{ + constructor(private http: HttpClient) { } - constructor() { } -} + // sends a query request to Osrm and gets response (http://project-osrm.org/docs/v5.24.0/api/?language=cURL#table-service) + sendQueryRequest(longFrom: number, latFrom: number, longTo: number, latTo: number): Observable { + console.log("http://router.project-osrm.org/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&geometries=geojson") + return this.http.get("http://router.project-osrm.org/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&steps=true&geometries=geojson"); + } +} \ No newline at end of file diff --git a/src/app/osrm/osrm.component.css b/src/app/osrm/osrm.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/osrm/osrm.component.html b/src/app/osrm/osrm.component.html new file mode 100644 index 0000000..0978384 --- /dev/null +++ b/src/app/osrm/osrm.component.html @@ -0,0 +1 @@ +

osrm works!

diff --git a/src/app/osrm/osrm.component.spec.ts b/src/app/osrm/osrm.component.spec.ts new file mode 100644 index 0000000..b4a0751 --- /dev/null +++ b/src/app/osrm/osrm.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OsrmComponent } from './osrm.component'; + +describe('OsrmComponent', () => { + let component: OsrmComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ OsrmComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(OsrmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/osrm/osrm.component.ts b/src/app/osrm/osrm.component.ts new file mode 100644 index 0000000..030faeb --- /dev/null +++ b/src/app/osrm/osrm.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-osrm', + templateUrl: './osrm.component.html', + styleUrls: ['./osrm.component.css'] +}) + +export class OsrmComponent implements OnInit { + + constructor() { } + + + ngOnInit(): void { + } +} diff --git a/src/app/photon.service.ts b/src/app/photon.service.ts index 42aa3b1..705fadc 100644 --- a/src/app/photon.service.ts +++ b/src/app/photon.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { Photon, PhotonFeatureCollection } from './interfaces/photon'; +import { PhotonFeatureCollection } from './interfaces/photon'; import { Observable } from 'rxjs'; @Injectable({ diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css index f39611f..5efcbad 100644 --- a/src/app/search/search.component.css +++ b/src/app/search/search.component.css @@ -64,4 +64,31 @@ .autocomplete-active { background-color: DodgerBlue !important; color: #ffffff; +} + +button{ + padding-left: 10px; + padding-right: 10px; + padding-top: 5px; + padding-bottom: 5px; + border-radius: 0; + border: 0; + background-color: transparent; + color: white; + font-size: 13pt; + font-weight: bold; +} + +.routeBtn{ + background-color: #28a745; + margin-top: 9px; + margin-left: 10px; + border-radius: 3px; + transition: 0.1s; + transition-timing-function: linear; + cursor:pointer; +} + +.routeBtn:hover{ + background-color: #55c56f; } \ No newline at end of file diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index d512acb..9318092 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -39,4 +39,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 2310d5f..6aa580a 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -3,14 +3,16 @@ import { Nominatim } from '../interfaces/nominatim'; import { NominatimService } from '../nominatim.service'; import { Photon, PhotonFeatureCollection } from '../interfaces/photon'; import { PhotonService } from '../photon.service'; - +import { OsrmService } from '../osrm.service'; +import { Osrm } from '../interfaces/osrm'; +import { AppComponent } from '../app.component'; @Component({ selector: 'app-search', templateUrl: './search.component.html', styleUrls: ['./search.component.css'] }) -export class SearchComponent implements OnInit { +export class SearchComponent{ @ViewChild("inputautocompleteList") autocompleteList: ElementRef; nominatimItemsFrom: Nominatim[] = []; @@ -30,7 +32,12 @@ export class SearchComponent implements OnInit { selectedPhotonFrom: Photon; selectedPhotonTo: Photon; - constructor(private nominatimService: NominatimService, private photonService: PhotonService) { } + constructor( + private nominatimService: NominatimService, + private photonService: PhotonService, + private osrmService: OsrmService, + private appComponent: AppComponent + ) { } selectPhoton(isFrom: boolean, p: Photon): void{ if(isFrom){ @@ -88,7 +95,11 @@ export class SearchComponent implements OnInit { this.latTo = this.photonItemsTo[0].geometry?.coordinates![1]; })); } - ngOnInit(): void { - } + getRoute(): void{ + console.log("getroute"); + this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latFrom) + .subscribe((response: Osrm) => console.log(response) ); + this.appComponent.drawPath(); + } } diff --git a/src/styles.css b/src/styles.css index a7dd6ba..c5a586b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -16,3 +16,7 @@ body { right:0; left:0; } + +button{ + outline: 0; +} \ No newline at end of file