Update Umsetzung
parent
34080a4378
commit
74bab52b47
@ -206,8 +206,46 @@ Aktuell wird nur der Source Code in das Image kopiert und die vorher generierte
|
||||
|
||||
# Frontend
|
||||
## Leaflet im Detail
|
||||
### Marker Generierung
|
||||
Auch die Marker werden in unserer Applikation über den Map Service geladen. Wie bereits im [Kapitel 2 Vorgehensweise](Projektarbeit-3/Vorgehensweise) angedeutet wird die Map mit mehreren Methoden gefüllt. Jedes Layer oder Overlay besitzt eine eigene Methode.
|
||||
Hier noch einmal die Methoden im Überblick:
|
||||
|
||||
```typscript
|
||||
this.service.initMap(51.509865, -0.118092, 14);
|
||||
await this.service.drawStationMarkers();
|
||||
this.service.drawHeatmap();
|
||||
this.service.drawAccidents();
|
||||
```
|
||||
Schauen wir uns im Weiteren die Methoden genauer an:
|
||||
|
||||
#### initMap
|
||||
```typscript
|
||||
this.map = L.map('map').setView([lat, lon], zoom);
|
||||
```
|
||||
Wie bereits in der Vorgehensweise erläutert wird zuerst das Map-Objekt mit `L.map('map)` initialisiert.
|
||||
|
||||
```typescript
|
||||
this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
...
|
||||
...
|
||||
```
|
||||
Anschließend werden die Daten von OpenStreetMap als Base Layer gesetzt. So haben wir sichergestellt, dass die Map immer einen legitimen Hintergrund besitzt.
|
||||
|
||||
```typescript
|
||||
this.accidentLegend.onAdd = () => {
|
||||
...
|
||||
...
|
||||
}
|
||||
this.map.on('overlayadd', e => e.name === 'Accidents' ? this.accidentLegend.addTo(this.map) : null);
|
||||
this.map.on('overlayremove', e => e.name === 'Accidents' ? this.accidentLegend.remove() : null);
|
||||
```
|
||||
In dieser Methode wird unter anderem vorbereitend auf die Accidents die zugehörige Legende definiert. Innerhalb des `this.accidentLegend.onAdd {}` Blockes wird das DOM-Element erstellt, dass wenn die Accidents der Map aufgeschaltet werden, automatisch angezeigt wird.
|
||||
|
||||
#### drawStationMarkers
|
||||
Diese Methode macht einen Aufruf an unser Backend und bezieht für alle 840 Stationen die nötigen Informationen, um die Anforderungen an das Pop-up als auch an die Routing Parameter zu erfüllen.
|
||||
|
||||
|
||||
* Leaflet-Heatmap
|
||||
* Markerclustering
|
||||
* ngx-leaflet vs plain
|
||||
|
||||
## Erläuterung "the Angular way"
|
||||
@ -227,9 +265,6 @@ Einführung in das Dashboard sowie auf die Map
|
||||
### Charts
|
||||
* Erklärung der ChartOptions, sowie genaue Erläuterung bei Aktualisierung
|
||||
|
||||
## Service ???
|
||||
noch nicht sicher, ob in die jeweilige Komponente
|
||||
|
||||
## Layout
|
||||
* Überblick über Angular Material
|
||||
* Bootstrap Layout
|
||||
|
Loading…
Reference in New Issue
Block a user