hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Vorgehensweise

Tim Herbst 2021-01-18 19:40:17 +00:00
parent d808b5595a
commit 28d5bb00dd
1 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
Projektarbeit-3/Vorgehensweise.md

@ -401,11 +401,45 @@ private fetchBikePointGeoData(): Promise<any> {
return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise(); return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
} }
``` ```
Weitere Beispiele sind aus dem Sourcecode zu entnehmen. Weitere Beispiele sind dem Sourcecode zu entnehmen.
## Einbinden von Leaflet ## Einbinden von Leaflet
<div align="center"> <div align="center">
<img src="uploads/ba24436b46fbe8e67d6adddf64f12bf6/LeafletMapArchitektur.png"/> <img src="uploads/ba24436b46fbe8e67d6adddf64f12bf6/LeafletMapArchitektur.png"/>
</div> </div>
* Grober Ablauf der Map-Generierung (Layer-Aufbau grafisch darstellen) Wie die Grafik zeigt, ist die Map-Komponente allein für die Darstellung der Map verantwortlich. Alle Logik, um die verschiedenen Layer zu generieren, wurde in den Service ausgelagert.
<table>
<tr>
<th style="text-align: center">MapComponent.html</th>
<th style="text-align: center">MapComponent.ts</th>
</tr>
<tr>
<td>
```
<div class="map-container" fxLayout="row">
<div class="map-frame" fxFill>
<div id="map"></div>
</div>
</div>
```
</td>
<td>
```
async initMapView(): Promise<any> {
this.service.initMap(51.509865, -0.118092, 14);
await this.service.drawStationMarkers();
this.service.drawHeatmap();
this.service.drawAccidents();
}
```
</td>
</tr>
</table>
In der `MapComponent.html` ist das div-Element mit der DOM-ID "map" ausschlaggebend. Über diese ID wird im Service ein Map-Objekt initialisiert und alle weiteren Layer darauffolgend geladen.