Aktionen
Feature #51
geschlossen
JH
3D-Geländeansicht mit MapLibre GL JS und OpenStreetMap
Feature #51:
3D-Geländeansicht mit MapLibre GL JS und OpenStreetMap
Beginn:
Abgabedatum:
% erledigt:
100%
Geschätzter Aufwand:
Gefunden in Version:
Beschreibung
Überblick¶
Strava-artige 3D-Kartenansicht für topographische Trainings: Schwenken, Kippen und Höhenrelief direkt im Trainingsfenster und in der Profilansicht. Ersetzt die reine 2D-Karte (GMap.NET, TopographicMapControl) in diesen Ansichten.
Stack¶
| Baustein | Lösung | Lizenz |
|---|---|---|
| Renderer | MapLibre GL JS 5.24.0 (lokal gebündelt) | BSD-3 |
| Einbettung | WebView2 (TrackMapControl, Maps/map.html) |
- |
| Standardkarte | OpenStreetMap | ODbL |
| Topografiekarte | OpenTopoMap | CC-BY-SA |
| Satellitenkarte | Esri World Imagery (0,3-1 m, Zoom bis ~19) | Attribution nötig, für kommerzielle Nutzung Esri-Bedingungen prüfen |
| Höhentopographie | AWS Terrain-Tiles (Terrarium, DEM) | Public Domain |
Kein API-Key, keine Nutzungsgebühren. Die Kacheln werden online geladen; ein lokaler Cache bzw. Self-Hosting der DEM-Kacheln ist nicht umgesetzt.
Umsetzung¶
Karte in der Profilansicht
- 3D-Geländeansicht oberhalb des Profils (nur bei topographischen Profilen): OSM-Raster, Terrain aus den AWS-Kacheln, Track als Linie mit Start-/Zielpunkt, Attribution hinter einem eingeklappten (i).
- Umschalter für die Basiskarte (Standard / Satellit / Topografie) und Neigung (2D / 45° / 60°); die Wahl wird im WebView2-localStorage gemerkt.
- Anvisieren: Mausbewegung über dem Höhenprofil zeigt eine Hilfslinie und einen Tooltip (km, Höhe, geglättete Steigung); der zugehörige Punkt erscheint als Marker auf der Karte (linear zwischen den GPS-Punkten interpoliert), Klick pinnt ihn.
- Play-Button fährt das Profil automatisch in 2 Minuten ab (längere Profile schneller), Marker folgt auch in der Fahrersicht.
Fahrersicht
- Kamera kippt (Pitch 55°) auf die Strecke und folgt der Position in Fahrtrichtung. Der Fahrer steht fest bei ca. 78 % der Bildhöhe (wie bei Google-Maps-Navigation, umgesetzt über MapLibre-Padding, bei Fenstergrößenänderung neu berechnet). Gelände in der Fahrersicht auf 0,8 abgeflacht, damit Bergkämme die Strecke nicht verdecken.
- Eigener Kamera-Loop statt MapLibre-Animationen: gleichmäßig und ruckelfrei (auch bei langsamem 1-Hz-Positionsstrom), Start deterministisch und identisch in Profilübersicht und Trainingsfenster, Höhen-Anker der Kamera wird pro Bild aktualisiert.
- Fahrersicht ist nicht verschiebbar, Kompass-Schaltfläche ausgeblendet, der Kurs kommt ausschließlich aus der Strecke. Profilwechsel und Profile ohne GPS werden sauber zurückgesetzt; beim Verlassen kehrt die Übersicht zur Vogelperspektive zurück.
- Fahrer-Abstand (Zoom 12-16 in 0,5-Schritten) liegt als Einstellung in der Registry (
MapDriverZoom), im Trainingsfenster per Regler oder NumPad 1/2/3 (näher / Standard 14 / weiter) steuerbar.
3D-Trainingsfenster
- Paralleles 3D-Trainingsfenster mit großer Fahrersicht und Vogelperspektive der ganzen Strecke rechts (dieselbe 3D-Karte im Übersichtsmodus); Wahl des Fensters beim Start bzw. Fortsetzen eines Trainings.
- Position der GridSplitter und Zoomstufe der linken Profilansicht (NumPad 4/6) werden in der Registry gemerkt.
Robustheit
- Kachel-Ladefehler ("Failed to fetch", Serverlimits) werden nur mit Quelle, Kachelkoordinaten und HTTP-Status ins Log geschrieben (max. einmal je Quelle und 5 s) statt als dauerhaftes rotes Banner; echte Init- und Style-Fehler zeigen weiterhin das Banner.
- MapLibre 4.7.1 warf bei schnellen Kamerawechseln mit Terrain
Cannot read properties of undefined (reading 'clearFadeHold')(Upstream-Bug, in 5.x behoben). Deshalb Update auf 5.24.0 samt Anpassung des Höhen-Ankers an die v5-API.
Akzeptanzkriterien¶
- Karte zeigt 3D-Geländerelief (Berge, Täler) anstatt flacher 2D-Kacheln
- Karte ist schwenkbar (Pan), rotierbar (Rotate) und kippbar (Pitch)
- Bestehender Track wird korrekt angezeigt und Position läuft live entlang
- Kein API-Key nötig; kein ToS-Risiko (kein Bing/unofficial Tile-Endpoint). Beim Satelliten gelten die Esri-Bedingungen (Attribution, bei kommerzieller Nutzung prüfen).
Quellen¶
Aktionen