forecast

Wettervorhersage Applikation (Teil 1) - ECMWF Windvorhersage mit Leaflet velocity

1. Repo vorbereiten

Repo forecast erstellen, lokal clonen, Template auspacken, add und push wie beim Wienbeispiel

🔗 COMMIT

2. ECMWF Windvorhersage implementieren

Die vom Leaflet velocity Plugin benötigten Daten liegen auf dem Server der Geographie unter wind-10u-10v-europe.json und sind das Endprodukt einer Reihe von Schritten, die aus den Originaldaten beim ECMWF im Format GRIB2 die passende JSON-Datei erzeugt. Das HOWTO ECMWF Windvorhersagedaten für Leaflet velocity aufbereiten zeigt den verwendeten Workflow.

a) Die Daten asynchron in der Funktion loadWind laden

const response = await fetch(url);
const jsondata = await response.json();
console.log(jsondata);

Wir sehen einen Array bestehend aus zwei Objekten - ein Objekt für die U-component_of_wind und ein Objekt für die V-component_of_wind, jeweils in 10m Höhe. Aus diesen beiden Attributen kann später die Windrichtung und Windgeschwindigkeit berechnet werden. Jedes dieser Objekte besitzt ein header- und data-Attribut. Im header stehen die Metadaten zur Erstellung der Vorhersage, die geographische Region für die die Daten gelten soll und die Art der Wind-Komponente. Im data-Attribut stehen die Werte von West nach Ost und Nord nach Süd.

🔗 COMMIT

b) Den Zeitpunkt der Vorhersage ermitteln

Rechnen mit Datumsangaben ist immer kompliziert :(

Wir haben die Zeit der Berechnung der Vorhersage (refTime) und den Zeitpunkt der Gültigkeit in Stunden (forecastTime) ab der Berechnung.

console.log("Zeitpunkt Erstellung", jsondata[0].header.refTime);
console.log("Zeitpunkt Vorhersage (+Stunden)", jsondata[0].header.forecastTime);

Zur Berechnung des Vorhersagezeitpunkts müssen wir die Stunden zum Datum hinzufügen indem wir:

  1. mit new Date() ein echtes Datum aus dem Attribut refTime erstellen

     let forecastDate = new Date(jsondata[0].header.refTime);

    Hinweis: wir haben Glück, denn new Date() erkennt unseren String in refTime als gültiges Datum und erzeugt daraus ein echtes Datumsobjekt

  2. die Zahl der Stunden in forecastTime dazu zählen. Dazu kommen die Methoden Date.setHours() und Date.getHours() zum Einsatz. Sollte die aus der Addition resultierende Stundenkomponente größer als 23 sein, wird das Datum entsprechend auf den nächsten Tag erweitert.

     let forecastDate = new Date(jsondata[0].header.refTime);
 console.log("Echtes Datum Erstellung", forecastDate);
 forecastDate.setHours(forecastDate.getHours() + jsondata[0].header.forecastTime);
 console.log("Echtes Datum Vorhersage", forecastDate);

    🔗 COMMIT

  3. das Datum des Vorhersagezeitpunkts mit Date.toLocaleDateString() formatieren

    Nachdem wir später im Skript noch andere Datumsangaben ähnlich formatieren werden, schreiben wir (gleich nach dem Maßstabszeichnen) eine Funktion formatDate, die das für uns erledigt. Sie erwartet ein echtes Datum und gibt einen lesbaren Datumsstring (in Deutsch) zurück.

     let formatDate = function(date) {
     return date.toLocaleDateString("de-AT", {
         month: "long",
         day: "numeric",
         hour: "2-digit",
         minute: "2-digit"
     }) + " Uhr";
 }

    Das formatierte Datum für den Vorhersagezeitpunkt speichern wir in der Variablen forecastLabel

     let forecastLabel = formatDate(forecastDate);
 console.log("Vorhersagezeitpunkt", forecastLabel);

    🔗 COMMIT

    Bevor wir weiter machen, kommentieren wir die console.log Nachrichten aus - wir brauchen sie nicht mehr

    🔗 COMMIT

  4. Den Vorhersagezeitpunkt können wir jetzt im neuen Overlay für die Windvorhersage verwenden

     layerControl.addOverlay(overlays.wind, `ECMWF Windvorhersage für ${forecastLabel}`);

    🔗 COMMIT

c) Leaflet.velocity Plugin downloaden und einbinden

<!-- Leaflet velocity -->
<link rel="stylesheet" href="lib/leaflet-velocity.css">
<script src="lib/leaflet-velocity.js"></script>

🔗 COMMIT

d) Das Plugin konfigurieren