map.component.ts
2.35 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import {Component, OnInit} from '@angular/core';
import * as L from 'leaflet';
import {CircleMarker} from 'leaflet';
import {Vessels} from '../../model/vessels';
import {VesselsService} from '../../service/vessels.service';
import {Message} from '../../model/message';
import {SelectedVesselService} from '../../service/selected-vessel.service';
import {Vessel} from '../../model/vessel';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
vessels: Vessels;
selectedVessel: Vessel;
public map: L.Map;
renderer = L.canvas({padding: 0.5});
circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>();
constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) {
}
ngOnInit(): void {
this.initMap();
this.connectVesselObservable();
this.connectSelectVesselObservable();
}
connectVesselObservable(): void {
this.vesselsService.currentVessels.subscribe(vessels => {
this.vessels = vessels;
this.updateMap();
});
}
connectSelectVesselObservable(): void {
this.selectedVesselService.currentVessel.subscribe(vessels => {
this.selectedVessel = vessels;
this.updateMap();
});
}
initMap(): void {
this.map = L.map('map').setView([0, 0], 1);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'map',
}).addTo(this.map);
}
addCircleMarker(message: Message, color: string): void {
let circleMarker;
if (message.mmsi === this.selectedVessel.getMMSI()) {
circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{
renderer: this.renderer,
radius: 4,
color: '#ff0000',
}).addTo(this.map).bringToFront();
}else {
circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{
renderer: this.renderer,
radius: 0.01,
color
}).addTo(this.map);
}
this.circleMarkers.set(Number(message.mmsi), circleMarker);
}
updateMap(): void {
this.circleMarkers.clear();
this.vessels.vessels.forEach(((vessel, key) => {
const color = vessel.getColor();
vessel.messages.forEach((message) => {
this.addCircleMarker(message, color);
});
}));
}
}