FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit a77940a0e4df24949acbc9367378018a6d2dad71

Authored by lsagona
1 parent 99a1117739
Exists in master

fix a bug when you select a boat it's now correctly displayed

Showing 2 changed files with 25 additions and 6 deletions Inline Diff

src/app/component/map/map.component.ts View file @ a77940a
import {Component, OnInit} from '@angular/core'; 1 1 import {Component, OnInit} from '@angular/core';
import * as L from 'leaflet'; 2 2 import * as L from 'leaflet';
import {CircleMarker} from 'leaflet'; 3 3 import {CircleMarker} from 'leaflet';
import {Vessels} from '../../model/vessels'; 4 4 import {Vessels} from '../../model/vessels';
import {VesselsService} from '../../service/vessels.service'; 5 5 import {VesselsService} from '../../service/vessels.service';
import {Message} from '../../model/message'; 6 6 import {Message} from '../../model/message';
import {SelectedVesselService} from '../../service/selected-vessel.service'; 7 7 import {SelectedVesselService} from '../../service/selected-vessel.service';
import {Vessel} from '../../model/vessel'; 8 8 import {Vessel} from '../../model/vessel';
9 9
@Component({ 10 10 @Component({
selector: 'app-map', 11 11 selector: 'app-map',
templateUrl: './map.component.html', 12 12 templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'] 13 13 styleUrls: ['./map.component.scss']
}) 14 14 })
export class MapComponent implements OnInit { 15 15 export class MapComponent implements OnInit {
vessels: Vessels; 16 16 vessels: Vessels;
selectedVessel: Vessel; 17 17 selectedVessel: Vessel;
public map: L.Map; 18 18 public map: L.Map;
renderer = L.canvas({padding: 0.5}); 19 19 renderer = L.canvas({padding: 0.5});
circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>(); 20 20 circleMarkers: Map<number, Array<CircleMarker>> = new Map<number, Array<CircleMarker>>();
21 highlightedMarkerId: number;
21 22
constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) { 22 23 constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) {
} 23 24 }
24 25
ngOnInit(): void { 25 26 ngOnInit(): void {
this.initMap(); 26 27 this.initMap();
this.connectVesselObservable(); 27 28 this.connectVesselObservable();
this.connectSelectVesselObservable(); 28 29 this.connectSelectVesselObservable();
} 29 30 }
30 31
connectVesselObservable(): void { 31 32 connectVesselObservable(): void {
this.vesselsService.currentVessels.subscribe(vessels => { 32 33 this.vesselsService.currentVessels.subscribe(vessels => {
this.vessels = vessels; 33 34 this.vessels = vessels;
this.updateMap(); 34 35 this.updateMap();
}); 35 36 });
} 36 37 }
37 38
connectSelectVesselObservable(): void { 38 39 connectSelectVesselObservable(): void {
this.selectedVesselService.currentVessel.subscribe(vessels => { 39 40 this.selectedVesselService.currentVessel.subscribe(vessels => {
this.selectedVessel = vessels; 40 41 this.selectedVessel = vessels;
this.updateMap(); 41 42 const mmsi = this.selectedVessel.getMMSI();
43 if (mmsi !== undefined) {
44 this.highlightMarker(Number(this.selectedVessel.getMMSI()));
45 }
}); 42 46 });
} 43 47 }
44 48
initMap(): void { 45 49 initMap(): void {
this.map = L.map('map').setView([0, 0], 1); 46 50 this.map = L.map('map').setView([0, 0], 1);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 47 51 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'map', 48 52 attribution: 'map',
}).addTo(this.map); 49 53 }).addTo(this.map);
} 50 54 }
51 55
addCircleMarker(message: Message, color: string): void { 52 56 addCircleMarker(message: Message, color: string): void {
let circleMarker; 53 57 let circleMarker;
if (message.mmsi === this.selectedVessel.getMMSI()) { 54 58 if (message.mmsi === this.selectedVessel.getMMSI()) {
circleMarker = L.circleMarker([+message.latitude, +message.longitude], 55 59 circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{ 56 60 {
renderer: this.renderer, 57 61 renderer: this.renderer,
radius: 4, 58 62 radius: 4,
color: '#ff0000', 59 63 color: '#ff0000',
}).addTo(this.map).bringToFront(); 60 64 }).addTo(this.map).bringToFront();
}else { 61 65 } else {
circleMarker = L.circleMarker([+message.latitude, +message.longitude], 62 66 circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{ 63 67 {
renderer: this.renderer, 64 68 renderer: this.renderer,
radius: 0.01, 65 69 radius: 1,
color 66 70 color
}).addTo(this.map); 67 71 }).addTo(this.map);
} 68 72 }
this.circleMarkers.set(Number(message.mmsi), circleMarker); 69 73 if (!this.circleMarkers.has(Number(message.mmsi))){
74 this.circleMarkers.set(Number(message.mmsi), new Array<CircleMarker>());
75 }
76 this.circleMarkers.get(Number(message.mmsi)).push(circleMarker);
77 }
78
79 highlightMarker(mmsi: number): void {
80 if (this.highlightedMarkerId !== undefined) {
81 const color = this.vessels.vessels.get(this.highlightedMarkerId).getColor();
82 this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setStyle({color, fillColor: color}));
83 this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setRadius(1));
84
85 }
86 this.highlightedMarkerId = mmsi;
87 this.circleMarkers.get(mmsi).forEach(value => value.setStyle({fillColor: '#ff0000', color: '#ff0000', fillOpacity: 1}));
88 this.circleMarkers.get(mmsi).forEach(value => value.setRadius(4));
} 70 89 }
71 90
updateMap(): void { 72 91 updateMap(): void {
this.circleMarkers.clear(); 73 92 this.circleMarkers.clear();
this.vessels.vessels.forEach(((vessel, key) => { 74 93 this.vessels.vessels.forEach(((vessel, key) => {
const color = vessel.getColor(); 75 94 const color = vessel.getColor();
vessel.messages.forEach((message) => { 76 95 vessel.messages.forEach((message) => {
this.addCircleMarker(message, color); 77 96 this.addCircleMarker(message, color);
}); 78 97 });
src/app/model/vessel.ts View file @ a77940a
import {Message} from './message'; 1 1 import {Message} from './message';
2 2
export class Vessel { 3 3 export class Vessel {
messages: Array<Message>; 4 4 messages: Array<Message>;
firstAppearance: number; 5 5 firstAppearance: number;
6 6
constructor(messages: Array<Message>) { 7 7 constructor(messages: Array<Message>) {
this.messages = messages; 8 8 this.messages = messages;
} 9 9 }
10 10
addMessage(message: Message): void { 11 11 addMessage(message: Message): void {
this.messages.push(message); 12 12 this.messages.push(message);
this.determineFirstAppearance(message); 13 13 this.determineFirstAppearance(message);
} 14 14 }
15 15
getMMSI(): string { 16 16 getMMSI(): string {
if (this.messages.length === 0) { 17 17 if (this.messages.length === 0) {
return ''; 18 18 return undefined;
} 19 19 }
return this.messages[0].mmsi; 20 20 return this.messages[0].mmsi;
} 21 21 }
22 22
getName(): string { 23 23 getName(): string {
return this.messages[0].vesselName; 24 24 return this.messages[0].vesselName;
} 25 25 }
26 26
public getColor(): string { 27 27 public getColor(): string {
return '#' + (+this.getMMSI()).toString(16).substr(0, 6); 28 28 return '#' + (+this.getMMSI()).toString(16).substr(0, 6);
} 29 29 }
30 30
determineFirstAppearance(message: Message): void { 31 31 determineFirstAppearance(message: Message): void {