Update Vorgehensweise
parent
d808b5595a
commit
28d5bb00dd
@ -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.
|
||||||
|
Loading…
Reference in New Issue
Block a user