Update Umsetzung
parent
d3c8732358
commit
19b523c5c1
@ -372,14 +372,47 @@ for (const accident of data) {
|
|||||||
}
|
}
|
||||||
const accidentLayer = L.layerGroup(accidents);
|
const accidentLayer = L.layerGroup(accidents);
|
||||||
```
|
```
|
||||||
Wir iterieren durch das API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Grün und Rot.
|
Wir iterieren durch das API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Orange und Rot.
|
||||||
|
|
||||||
Anschließend erstellen wir für jeden Unfall ein Objekt vom Typ Circle. Auch die Unfälle fügen wir der Map nicht direkt hinzu, sondern gehen über die `L.layerGroup`. So können wir auch die Unfälle in unserem Menü nach Belieben auf und abschalten.
|
Anschließend erstellen wir für jeden Unfall ein Objekt vom Typ Circle. Auch die Unfälle fügen wir der Map nicht direkt hinzu, sondern gehen über die `L.layerGroup`. So können wir auch die Unfälle in unserem Menü nach Belieben auf und abschalten.
|
||||||
|
|
||||||
## Erläuterung "the Angular way"
|
## Erläuterung "the Angular way"
|
||||||
* Pop-Up Komponentengenerierung auf Button-click
|
|
||||||
* Abhängigkeiten der Services zu den jeweiligen Komponenten
|
### Pop-up Generierung bei Marker-"click"
|
||||||
* auto-refresh
|
Eine besondere Komplexität und Schwierigkeit betraf die Generierung der Pop-up Komponente bei Klick auf einen Marker. Schnell hat sich herausgestellt, dass nicht ohne Weiteres die Methode `marker.bindPopup()` genutzt werden konnte. Da wir den Inhalt des Pop-up in eine eigene Komponente ausgelagert haben wird, sobald das Marker-Objekt initialisiert ist die OnInit-Methode der Komponente ausgeführt. Da dies aber erst geschehen darf, wenn der Benutzer auf einen Marker klickt, mussten wir hier einen anderen Weg finden.
|
||||||
|
|
||||||
|
Nach ausführlicher Analyse der Leaflet-Dokumentation in Bezug auf Event-handling, haben wir uns für folgende Listener-Methode entschieden:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
object.on('event', methodToExecute);
|
||||||
|
```
|
||||||
|
Jedes Leaflet-Objekt hat sein eigenes Set an Events. Das erste Argument der Methode ist das Event-Objekt. Das zweite Argument ist die Methode, die bei Auftreten des Events ausgeführt werden soll.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
marker.on('click', e => {
|
||||||
|
e.target.bindPopup(this.popUpService.makeAvailabilityPopUp(station), {maxWidth: 'auto'})
|
||||||
|
.openPopup();
|
||||||
|
this.map.panTo(e.target.getLatLng());
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
In dem Fall übergeben wir mittels einer Pfeilfunktion das Event `e` an den Body der Funktion und können den Marker mittels `e.target` direkt ansprechen. Anschließend machen wir uns noch dem PopupService zu eigen und setzen bestimmte Parameter, um das Chart der Station zu generieren. Mit `this.map.panTo(e.target.getLatLng());` lassen wir die Map auf den geklickten Marker zentrieren.
|
||||||
|
|
||||||
|
Schauen wir uns nun `this.popUpService.makeAvailabilityPopUp(station)` genauer an:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
makeAvailabilityPopUp(station: IMapBikePoint): any {
|
||||||
|
const factory = this.componentFactoryResolver.resolveComponentFactory(PopUpComponent);
|
||||||
|
const component = factory.create(this.injector);
|
||||||
|
|
||||||
|
component.instance.station = station
|
||||||
|
component.changeDetectorRef.detectChanges();
|
||||||
|
|
||||||
|
return component.location.nativeElement;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Im PopupService muss sichergestellt werden, dass eine Komponente programmatisch erstellt wird. Dies ist in Angular nur mittels des `ComponentFactoryResolver` möglich. Weiterhin bezieht das Availability-Chart seine Daten aus dem MapBikePoint. Diese wird auch über den ComponentFactoryResolver direkt gesetzt. Zum Schluss geben wir die Position des Pop-ups zurück.
|
||||||
|
|
||||||
## Komponenten
|
## Komponenten
|
||||||
Einführung in das Dashboard sowie auf die Map
|
Einführung in das Dashboard sowie auf die Map
|
||||||
|
Loading…
Reference in New Issue
Block a user