FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit 72dfa80e2b0cb05b753554f82af013dd99eef3fe

Authored by lsagona
1 parent 287033a627
Exists in master

eache vessel have different color on map

Showing 4 changed files with 4 additions and 13 deletions Inline Diff

src/app/component/list-vessel/list-vessel.component.ts View file @ 72dfa80
import {AfterViewInit, Component, OnInit} from '@angular/core'; 1 1 import {AfterViewInit, Component, OnInit} from '@angular/core';
import {VesselsService} from '../../service/vessels.service'; 2 2 import {VesselsService} from '../../service/vessels.service';
import {Vessels} from '../../model/vessels'; 3 3 import {Vessels} from '../../model/vessels';
4 4
declare var $: any; 5 5 declare var $: any;
6 6
@Component({ 7 7 @Component({
selector: 'app-list-vessel', 8 8 selector: 'app-list-vessel',
templateUrl: './list-vessel.component.html', 9 9 templateUrl: './list-vessel.component.html',
styleUrls: ['./list-vessel.component.scss'] 10 10 styleUrls: ['./list-vessel.component.scss']
}) 11 11 })
export class ListVesselComponent implements OnInit { 12 12 export class ListVesselComponent implements OnInit {
vessels: Vessels; 13 13 vessels: Vessels;
14 14
constructor(private vesselsService: VesselsService) { 15 15 constructor(private vesselsService: VesselsService) {
} 16 16 }
17 17
ngOnInit(): void { 18 18 ngOnInit(): void {
this.vesselsService.currentVessels.subscribe(vessels => { 19 19 this.vesselsService.currentVessels.subscribe(vessels => {
setTimeout(() => 20 20 setTimeout(() =>
this.vessels = vessels 21 21 this.vessels = vessels
); 22 22 );
}); 23 23 });
24 24
$(document).ready(() => { 25 25 $(document).ready(() => {
$('#myInput').on('keyup', function(): void { 26 26 $('#myInput').on('keyup', function(): void {
const value = $(this).val().toLowerCase(); 27 27 const value = $(this).val().toLowerCase();
$('#list-tab a').filter(function(): void { 28 28 $('#list-tab a').filter(function(): void {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); 29 29 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
}); 30 30 });
}); 31 31 });
}); 32 32 });
} 33 33 }
34 34
// ngAfterViewInit(): void { 35
// this.vesselsService.currentVessels.subscribe(vessels => { 36
src/app/component/map/map.component.ts View file @ 72dfa80
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';
7 7
@Component({ 8 8 @Component({
selector: 'app-map', 9 9 selector: 'app-map',
templateUrl: './map.component.html', 10 10 templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'] 11 11 styleUrls: ['./map.component.scss']
}) 12 12 })
export class MapComponent implements OnInit { 13 13 export class MapComponent implements OnInit {
vessels: Vessels; 14 14 vessels: Vessels;
public map: L.Map; 15 15 public map: L.Map;
16 renderer = L.canvas({ padding: 0.5 });
circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>(); 16 17 circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>();
17 18
constructor(private vesselsService: VesselsService) { 18 19 constructor(private vesselsService: VesselsService) {
} 19 20 }
20 21
ngOnInit(): void { 21 22 ngOnInit(): void {
this.initMap(); 22 23 this.initMap();
this.connectVesselObservable(); 23 24 this.connectVesselObservable();
} 24 25 }
25 26
connectVesselObservable(): void { 26 27 connectVesselObservable(): void {
this.vesselsService.currentVessels.subscribe(vessels => { 27 28 this.vesselsService.currentVessels.subscribe(vessels => {
this.vessels = vessels; 28 29 this.vessels = vessels;
this.updateMap(); 29 30 this.updateMap();
}); 30 31 });
} 31 32 }
32 33
initMap(): void { 33 34 initMap(): void {
this.map = L.map('map', { 34 35 this.map = L.map('map').setView([0, 0], 1);
preferCanvas: true 35
}).setView([0, 0], 1); 36
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 37 36 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'map', 38 37 attribution: 'map',
}).addTo(this.map); 39 38 }).addTo(this.map);
} 40 39 }
41 40
addCircleMarker(message: Message, color: string): void { 42 41 addCircleMarker(message: Message, color: string): void {
const circleMarker = L.circleMarker([+message.latitude, +message.longitude], 43 42 const circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{ 44 43 {
44 renderer: this.renderer,
radius: 0.1, 45 45 radius: 0.1,
color 46 46 color
}).addTo(this.map); 47 47 }).addTo(this.map);
this.circleMarkers.set(Number(message.mmsi), circleMarker); 48 48 this.circleMarkers.set(Number(message.mmsi), circleMarker);
} 49 49 }
50 50
updateMap(): void { 51 51 updateMap(): void {
let nbMessage = 0; 52 52 let nbMessage = 0;
this.vessels.vessels.forEach(((vessel, key) => { 53 53 this.vessels.vessels.forEach(((vessel, key) => {
const color = vessel.getColor(); 54 54 const color = vessel.getColor();
vessel.messages.forEach((message) => { 55 55 vessel.messages.forEach((message) => {
src/app/model/vessel.ts View file @ 72dfa80
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>;
5 5
constructor(messages: Array<Message>) { 6 6 constructor(messages: Array<Message>) {
this.messages = messages; 7 7 this.messages = messages;
} 8 8 }
9 9
addMessage(message: Message): void { 10 10 addMessage(message: Message): void {
this.messages.push(message); 11 11 this.messages.push(message);
} 12 12 }
13 13
getMMSI(): string { 14 14 getMMSI(): string {
return this.messages[0].mmsi; 15 15 return this.messages[0].mmsi;
} 16 16 }
17 17
getName(): string { 18 18 getName(): string {
return this.messages[0].vesselName; 19 19 return this.messages[0].vesselName;
} 20 20 }
src/app/model/vessels.ts View file @ 72dfa80
import {Vessel} from './vessel'; 1 1 import {Vessel} from './vessel';
import {Message} from './message'; 2 2 import {Message} from './message';
import { delay } from 'rxjs/operators'; 3
4 3
export class Vessels { 5 4 export class Vessels {
vessels: Map<number, Vessel>; 6 5 vessels: Map<number, Vessel>;
7 6
constructor() { 8 7 constructor() {
this.vessels = new Map<number, Vessel>(); 9 8 this.vessels = new Map<number, Vessel>();
} 10 9 }
11 10
addMessage(message: Message): void { 12 11 addMessage(message: Message): void {
if (!this.vessels.get(Number(message.mmsi))) { 13 12 if (!this.vessels.get(Number(message.mmsi))) {
this.vessels.set(Number(message.mmsi), new Vessel(new Array<Message>())); 14 13 this.vessels.set(Number(message.mmsi), new Vessel(new Array<Message>()));
} 15 14 }