Update Vorgehensweise
parent
d808b5595a
commit
28d5bb00dd
@ -401,11 +401,45 @@ private fetchBikePointGeoData(): Promise<any> {
|
||||
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
|
||||
<div align="center">
|
||||
<img src="uploads/ba24436b46fbe8e67d6adddf64f12bf6/LeafletMapArchitektur.png"/>
|
||||
</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.
|
||||
|
Loading…
Reference in New Issue
Block a user