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
|
# Frontend
|
||||||
## Leaflet im Detail
|
## 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
|
* Leaflet-Heatmap
|
||||||
* Markerclustering
|
|
||||||
* ngx-leaflet vs plain
|
* ngx-leaflet vs plain
|
||||||
|
|
||||||
## Erläuterung "the Angular way"
|
## Erläuterung "the Angular way"
|
||||||
@ -227,9 +265,6 @@ Einführung in das Dashboard sowie auf die Map
|
|||||||
### Charts
|
### Charts
|
||||||
* Erklärung der ChartOptions, sowie genaue Erläuterung bei Aktualisierung
|
* Erklärung der ChartOptions, sowie genaue Erläuterung bei Aktualisierung
|
||||||
|
|
||||||
## Service ???
|
|
||||||
noch nicht sicher, ob in die jeweilige Komponente
|
|
||||||
|
|
||||||
## Layout
|
## Layout
|
||||||
* Überblick über Angular Material
|
* Überblick über Angular Material
|
||||||
* Bootstrap Layout
|
* Bootstrap Layout
|
||||||
|
Loading…
Reference in New Issue
Block a user