FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit 287033a627a21c20487d99d4637dcbde8517f044

Authored by lsagona
1 parent c4e00deb95
Exists in master

add vessel position to map

Showing 5 changed files with 54 additions and 21 deletions Side-by-side Diff

src/app/component/import-vessels/import-vessels.component.ts View file @ 287033a
... ... @@ -21,24 +21,14 @@
21 21 this.vesselsService.currentVessels.subscribe(vessels => this.vessels = vessels);
22 22 }
23 23  
24   - /**
25   - * on file drop handler
26   - */
27 24 onFileDropped($event): void {
28 25 this.prepareFilesList($event);
29 26 }
30 27  
31   - /**
32   - * handle file from browsing
33   - */
34 28 fileBrowseHandler(files): void {
35 29 this.prepareFilesList(files);
36 30 }
37 31  
38   - /**
39   - * Delete file from files list
40   - * @param index (File index)
41   - */
42 32 deleteFile(index: number): void {
43 33 if (this.files[index].progress < 100) {
44 34 return;
45 35  
... ... @@ -48,11 +38,10 @@
48 38 this.files.splice(index, 1);
49 39 }
50 40  
51   -
52 41 uploadFiles(index: number): void {
53 42 const fileReader = new FileReader();
54 43 let nbLine: number;
55   - fileReader.onload = (e) => {
  44 + fileReader.onload = () => {
56 45 this.vessels = new Vessels();
57 46 const lines: string[] = (fileReader.result as string).split('\n');
58 47 nbLine = lines.length;
src/app/component/list-vessel/list-vessel.component.ts View file @ 287033a
1   -import {Component, OnInit} from '@angular/core';
  1 +import {AfterViewInit, Component, OnInit} from '@angular/core';
2 2 import {VesselsService} from '../../service/vessels.service';
3 3 import {Vessels} from '../../model/vessels';
  4 +
4 5 declare var $: any;
5 6  
6 7 @Component({
7 8  
... ... @@ -11,13 +12,14 @@
11 12 export class ListVesselComponent implements OnInit {
12 13 vessels: Vessels;
13 14  
14   -
15 15 constructor(private vesselsService: VesselsService) {
16 16 }
17 17  
18 18 ngOnInit(): void {
19 19 this.vesselsService.currentVessels.subscribe(vessels => {
20   - this.vessels = vessels;
  20 + setTimeout(() =>
  21 + this.vessels = vessels
  22 + );
21 23 });
22 24  
23 25 $(document).ready(() => {
... ... @@ -29,5 +31,14 @@
29 31 });
30 32 });
31 33 }
  34 +
  35 + // ngAfterViewInit(): void {
  36 + // this.vesselsService.currentVessels.subscribe(vessels => {
  37 + // setTimeout(() =>
  38 + // this.vessels = vessels
  39 + // );
  40 + // });
  41 + // }
  42 +
32 43 }
src/app/component/map/map.component.ts View file @ 287033a
1   -import { Component, OnInit } from '@angular/core';
  1 +import {Component, OnInit} from '@angular/core';
2 2 import * as L from 'leaflet';
  3 +import {CircleMarker} from 'leaflet';
3 4 import {Vessels} from '../../model/vessels';
4 5 import {VesselsService} from '../../service/vessels.service';
  6 +import {Message} from '../../model/message';
5 7  
6 8 @Component({
7 9 selector: 'app-map',
8 10  
9 11  
10 12  
11 13  
12 14  
13 15  
... ... @@ -10,25 +12,51 @@
10 12 })
11 13 export class MapComponent implements OnInit {
12 14 vessels: Vessels;
  15 + public map: L.Map;
  16 + circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>();
13 17  
14   - constructor(private vesselsService: VesselsService) { }
  18 + constructor(private vesselsService: VesselsService) {
  19 + }
15 20  
16 21 ngOnInit(): void {
17   - this.connectVesselObservable();
18 22 this.initMap();
  23 + this.connectVesselObservable();
19 24 }
20 25  
21 26 connectVesselObservable(): void {
22 27 this.vesselsService.currentVessels.subscribe(vessels => {
23 28 this.vessels = vessels;
  29 + this.updateMap();
24 30 });
25 31 }
26 32  
27 33 initMap(): void {
28   - const myMap = L.map('map').setView([0, 0], 1);
  34 + this.map = L.map('map', {
  35 + preferCanvas: true
  36 + }).setView([0, 0], 1);
29 37 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
30   - attribution: 'map'
31   - }).addTo(myMap);
  38 + attribution: 'map',
  39 + }).addTo(this.map);
  40 + }
  41 +
  42 + addCircleMarker(message: Message, color: string): void {
  43 + const circleMarker = L.circleMarker([+message.latitude, +message.longitude],
  44 + {
  45 + radius: 0.1,
  46 + color
  47 + }).addTo(this.map);
  48 + this.circleMarkers.set(Number(message.mmsi), circleMarker);
  49 + }
  50 +
  51 + updateMap(): void {
  52 + let nbMessage = 0;
  53 + this.vessels.vessels.forEach(((vessel, key) => {
  54 + const color = vessel.getColor();
  55 + vessel.messages.forEach((message) => {
  56 + nbMessage++;
  57 + this.addCircleMarker(message, color);
  58 + });
  59 + }));
32 60 }
33 61  
34 62 }
src/app/model/vessel.ts View file @ 287033a
... ... @@ -19,5 +19,9 @@
19 19 return this.messages[0].vesselName;
20 20 }
21 21  
  22 + public getColor(): string {
  23 + return (+this.getMMSI()).toString(16);
  24 + }
  25 +
22 26 }
src/app/model/vessels.ts View file @ 287033a
1 1 import {Vessel} from './vessel';
2 2 import {Message} from './message';
  3 +import { delay } from 'rxjs/operators';
3 4  
4 5 export class Vessels {
5 6 vessels: Map<number, Vessel>;