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

cleaned up

Browse Source
This commit is contained in:
Janis Meister
2022-03-09 12:28:59 +01:00
parent 03f904b632
commit 27c01c9ca6
9 changed files with 99 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/interfaces/openLayersGeoJSON.ts
View File

@@ -1,29 +1,29 @@
interface OpenLayersGeometry { interface OpenLayersGeometry {
coordinates: Array<Array<number>>; coordinates: Array<Array<number>>;
type?: string; type?: string;
} }
interface OpenLayersProperties { interface OpenLayersProperties {
ECO_NAME?: string; ECO_NAME?: string;
BIOME_NAME?: string; BIOME_NAME?: string;
REALM?: string; REALM?: string;
NNH?: string; NNH?: string;
NNH_NAME?: string; NNH_NAME?: string;
COLOR?: string; COLOR?: string;
COLOR_BIO?: string; COLOR_BIO?: string;
COLOR_NNH?: string; COLOR_NNH?: string;
} }
interface OpenLayersFeature { interface OpenLayersFeature {
type: string; type: string;
geometry: OpenLayersGeometry; geometry: OpenLayersGeometry;
id: number; id: number;
properties: OpenLayersProperties; properties: OpenLayersProperties;
} }
export interface OpenLayersGeoJSON { export interface OpenLayersGeoJSON {
type: string; type: string;
features: Array<OpenLayersFeature>; features: Array<OpenLayersFeature>;
geometry: OpenLayersGeometry; geometry: OpenLayersGeometry;
properties: OpenLayersProperties; properties: OpenLayersProperties;
} }

5
src/app/interfaces/routeResponse.ts
View File

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

4
src/app/interfaces/searchResponse.ts
View File

@@ -1,8 +1,8 @@
export interface SearchWay{ export interface SearchWay {
id: number; id: number;
name: string; name: string;
} }
export interface SearchResponse{ export interface SearchResponse {
ways: Array<SearchWay>; ways: Array<SearchWay>;
} }

6
src/app/map/map.component.css
View File

@@ -1,6 +1,4 @@
#map { #map {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

4
src/app/map/map.component.spec.ts
View File

@@ -8,9 +8,9 @@ describe('MapComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ MapComponent ] declarations: [MapComponent]
}) })
.compileComponents(); .compileComponents();
}); });
beforeEach(() => { beforeEach(() => {

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

@@ -12,7 +12,7 @@ import LineString from 'ol/geom/LineString';
import { Feature } from 'ol'; import { Feature } from 'ol';
import Geometry from 'ol/geom/Geometry'; import Geometry from 'ol/geom/Geometry';
import { RouteResponse } from '../interfaces/routeResponse'; import { RouteResponse } from '../interfaces/routeResponse';
import {Stroke, Style} from 'ol/style'; import { Stroke, Style } from 'ol/style';
@Component({ @Component({
selector: 'app-map', selector: 'app-map',
@@ -58,7 +58,7 @@ export class MapComponent implements AfterViewInit {
setTimeout(() => this.map.updateSize(), 200); setTimeout(() => this.map.updateSize(), 200);
} }
drawPath(routeResponse: RouteResponse): 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 // 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(routeResponse); console.log(routeResponse);
@@ -67,25 +67,25 @@ export class MapComponent implements AfterViewInit {
const lineString: LineString = new LineString(fCoordinates); const lineString: LineString = new LineString(fCoordinates);
const feature: Feature<Geometry> = new Feature({ geometry: lineString }); const feature: Feature<Geometry> = new Feature({ geometry: lineString });
feature.setStyle(this.lineStyle); feature.setStyle(this.lineStyle);
const vectorSource = new VectorSource({ features: [ feature ]}); const vectorSource = new VectorSource({ features: [feature] });
const vectorLayer = new VectorLayer({ source: vectorSource }); const vectorLayer = new VectorLayer({ source: vectorSource });
this.map.removeLayer(this.map.getLayers().item(1)) this.map.removeLayer(this.map.getLayers().item(1))
this.map.addLayer(vectorLayer); this.map.addLayer(vectorLayer);
this.map.getView().setCenter(fCoordinates[0]) this.map.getView().setCenter(fCoordinates[0])
this.map.getView().setZoom(13); this.map.getView().setZoom(13);
// this.features = new GeoJSON().readFeatures(new openLayersGeoJSON()) // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON())
/* /*
this.vectorLayer = new VectorLayer({ this.vectorLayer = new VectorLayer({
background: '#1a2b39', background: '#1a2b39',
source: new VectorSource({ 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', 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" }), format: new GeoJSON({dataProjection: 'EPSG:4326', featureProjection: "EPSG:3857" }),
}) })
}); });
this.map.addLayer(this.vectorLayer);*/ this.map.addLayer(this.vectorLayer);*/
} }
} }

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

@@ -1,25 +1,44 @@
<div class="searchField"> <div class="searchField">
<div class="autocomplete">
<div class="autocomplete"> <input
<input #inputFrom (click)="getValue(inputFrom.value, true)" (input)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}"> #inputFrom
<div class="autocomplete-items autocomplete-items-from"> (click)="getValue(inputFrom.value, true)"
(input)="getValue(inputFrom.value, true)"
type="text"
name="inputFrom"
id="inputFrom"
placeholder="From"
value="{{ inputFromValue }}"
/>
<div class="autocomplete-items autocomplete-items-from">
<div *ngFor="let item of searchItemsFrom" (click)="select(true, item)"> <div *ngFor="let item of searchItemsFrom" (click)="select(true, item)">
<label>{{ item.name }}</label> <label>{{ item.name }}</label>
</div> </div>
</div> </div>
</div> </div>
<div class="autocomplete" id="autocompleteTo">
<div class="autocomplete" id="autocompleteTo"> <input
<input #inputTo (click)="getValue(inputTo.value, false)" (input)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}"> #inputTo
<div #inputautocompleteList class="autocomplete-items autocomplete-items-to"> (click)="getValue(inputTo.value, false)"
(input)="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 searchItemsTo" (click)="select(false, item)"> <div *ngFor="let item of searchItemsTo" (click)="select(false, item)">
<label>{{ item.name }}</label> <label>{{ item.name }}</label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<button *ngIf="!isSearching" class="routeBtn" (click)="getRoute()">Route</button> <ng-container *ngIfElse="isSearching" else routeBtn>
<img *ngIf="isSearching"src="/assets/images/loading.gif" style="margin-top:15px; margin-left:10px;width:25px;height: 25px;" /> <img src="/assets/images/loading.gif" style="margin-top: 15px; margin-left: 10px; width: 25px; height: 25px" />
</ng-container>
<ng-template #routeBtn>
<button class="routeBtn" (click)="getRoute()">Route</button>
</ng-template>

4
src/app/search/search.component.spec.ts
View File

@@ -8,9 +8,9 @@ describe('SearchComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ SearchComponent ] declarations: [SearchComponent]
}) })
.compileComponents(); .compileComponents();
}); });
beforeEach(() => { beforeEach(() => {

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

@@ -29,12 +29,12 @@ export class SearchComponent {
private pythonBackendService: PythonBackendService, private pythonBackendService: PythonBackendService,
) { } ) { }
select(isFrom: boolean, item: SearchWay): void{ select(isFrom: boolean, item: SearchWay): void {
if(isFrom){ if (isFrom) {
this.selectedSearchWayFrom = item; this.selectedSearchWayFrom = item;
this.inputFromValue = item.name; this.inputFromValue = item.name;
this.searchItemsFrom = []; this.searchItemsFrom = [];
}else{ } else {
this.selectedSearchWayTo = item; this.selectedSearchWayTo = item;
this.inputToValue = item.name; this.inputToValue = item.name;
this.searchItemsTo = []; this.searchItemsTo = [];
@@ -50,31 +50,31 @@ export class SearchComponent {
value = value.trim(); value = value.trim();
this.pythonBackendService.sendSearchQueryRequest(value, "10") this.pythonBackendService.sendSearchQueryRequest(value, "10") // "10" -> limit of search results
.subscribe((response: SearchResponse) => response.ways?.forEach(way =>{ .subscribe((response: SearchResponse) => response.ways?.forEach(way => {
if(isFrom){ if (isFrom) {
this.searchItemsFrom.push(way); this.searchItemsFrom.push(way);
this.selectedSearchWayFrom = way; this.selectedSearchWayFrom = way;
}else{ } else {
this.searchItemsTo.push(way); this.searchItemsTo.push(way);
this.selectedSearchWayTo = way; this.selectedSearchWayTo = way;
} }
})); }));
} }
getRoute(): void{ getRoute(): void {
if(this.selectedSearchWayFrom && this.selectedSearchWayTo) if (this.selectedSearchWayFrom && this.selectedSearchWayTo)
this.isSearching = true; this.isSearching = true;
this.pythonBackendService.sendRouteQueryRequest(this.selectedSearchWayFrom.id.toString(), this.selectedSearchWayTo.id.toString()) this.pythonBackendService.sendRouteQueryRequest(this.selectedSearchWayFrom.id.toString(), this.selectedSearchWayTo.id.toString())
.pipe(catchError(err =>{ .pipe(catchError(err => {
console.error(err); console.error(err);
return of({nodes:[]}); return of({ nodes: [] });
})) }))
.subscribe( .subscribe(
(response: RouteResponse) => { (response: RouteResponse) => {
this.emitter.emit(response); this.emitter.emit(response);
this.isSearching = false; this.isSearching = false;
}); });
} }
} }