road-map.component.ts
2.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { Component, Input, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
import { Way } from '../models/way';
@Component({
// tslint:disable-next-line:component-selector
selector: 'road-map',
template: '<div id="{{identificator}}" [style.height]="getHeight()" ></div>',
})
export class RoadMapComponent implements AfterViewInit {
protected isVisible: boolean = false;
protected map: L.Map;
protected ways: Way[];
@Input() identificator: string = 'mapID';
public ngAfterViewInit(): void {
this.map = L.map(this.identificator).setView([51.505, -0.09], 13);
L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(this.map);
}
public showMap(): void {
this.isVisible = true;
}
public getHeight(): string {
return this.isVisible ? '100%' : '100%';
}
public setWays(ways: Way[]): void {
this.ways = ways;
this.showWays();
}
protected showWays(): void {
let minLat: number = 0;
let maxLat: number = 0;
let minLon: number = 0;
let maxLon: number = 0;
console.log(this.ways);
this.ways.forEach((way) => {
let nodes: L.LatLng[] = [];
way.nodes.forEach((node) => {
if (minLat == 0) {
minLat = node.lat;
maxLat = node.lat;
} else {
minLat = (minLat > node.lat)?node.lat:minLat;
maxLat = (maxLat < node.lat)?node.lat:maxLat;
}
if (minLon == 0) {
minLon = node.lon;
maxLon = node.lon;
} else {
minLon = (minLon > node.lon)?node.lon:minLon;
maxLon = (maxLon < node.lon)?node.lon:maxLon;
}
let latLng = node.getLatLng();
nodes.push(latLng);
});
way.polyline = L.polyline(nodes, {color: 'red'}).addTo(this.map);
console.log(way.polyline);
});
this.map.fitBounds([
[minLat, minLon],
[maxLat, maxLon]
]);
console.log(minLat, maxLat, minLon, maxLon);
this.showMap();
}
}