leaflet openweathermap herunterladen - leaflet openweathermap Quellcode herunterladen

leaflet openweathermap

Anderer Quellcode

1.0.0

Herunterladen

OpenWeatherMap für Leaflet-basierte Karten

ENDE DES LEBENS

Dieses Projekt wird nicht mehr gepflegt. Wenn Sie dieses Projekt fortsetzen möchten, teilen Sie es einfach auf und machen Sie weiter. Wenn Sie mir eine Nachricht schicken, füge ich vielleicht hier in dieser Readme-Datei einen prominenten Link zu Ihrem Fork hinzu.

Beschreibung

OpenWeatherMap (OWM) ist ein Dienst, der wetterbezogene Daten bereitstellt und diese mithilfe einer OpenLayers-basierten Karte visualisiert. Dies ist ein unabhängiges Leaflet-basiertes Skript, das einfachen Zugriff auf die OWM-Funktionen für Leaflet-basierte Karten bietet.

Kurz gesagt: Eine unabhängige JavaScript-Bibliothek zum problemlosen Einbinden der OWM-Layer und der aktuellen Stadtdaten von OWM in Leaflet-basierte Karten.

Demo

Eine Beispielkarte mit vielen Funktionen dieser Bibliothek finden Sie unter ahorn.lima-city.de/owm. Das Overlay „Windrose“ ist ein Beispiel für einen benutzerdefinierten Marker, um Ihnen eine Vorstellung davon zu geben, was mit benutzerdefinierten Funktionen für Marker erreicht werden kann. Diese Karte ist auch im Beispielverzeichnis verfügbar.

Lizenz

Dieser Code ist unter CC0 lizenziert. Einige Dateien im Beispielverzeichnis verfügen möglicherweise über andere Lizenzen (z. B. leaflet.js – siehe leaflet.license) – bitte schauen Sie sich die Dateien bei Bedarf an.

Verwenden von TileLayers

OWM bietet einige TileLayer: Wolken, Wolken klassisch, Niederschlag, Niederschlag klassisch, Regen, Regen klassisch, Schnee, Temperatur, Windgeschwindigkeit, Druck und Druckkonturen.

TileLayers initialisieren

So initialisieren Sie diese TileLayers (eine AppId ist jetzt obligatorisch, holen Sie sich hier Ihre eigene):

var cloud = L.OWM.clouds({appId: 'YOUR_OWN_APPID'});
var cloudcls = L.OWM.cloudsClassic({appId: 'YOUR_OWN_APPID'});
var precision = L.OWM.precipitation({appId: 'YOUR_OWN_APPID'});
varprecipitationcls = L.OWM.precipitationClassic({appId: 'YOUR_OWN_APPID'});
var rain = L.OWM.rain({appId: 'YOUR_OWN_APPID'});
var raincls = L.OWM.rainClassic({appId: 'YOUR_OWN_APPID'});
var snow = L.OWM.snow({appId: 'YOUR_OWN_APPID'});
var Druck = L.OWM.Druck({appId: 'YOUR_OWN_APPID'});
var Pressurecntr = L.OWM.PressureContour({appId: 'YOUR_OWN_APPID'});
var temp = L.OWM.temperature({appId: 'YOUR_OWN_APPID'});
var wind = L.OWM.wind({appId: 'YOUR_OWN_APPID'});

Optionen für TileLayers

Neben den Standardoptionen für Leaflet TileLayers gibt es noch weitere:

appId : Eine AppId ist obligatorisch. Holen Sie es sich unter https://www.openweathermap.org/appid
showLegend : wahr oder falsch. Wenn „true“ und die Option „legendImagePath“ gesetzt ist, wird auf der Karte ein Legendenbild angezeigt.
legendImagePath : URL (wird für einige Ebenen auf ein Standardbild gesetzt, für andere auf Null , siehe unten). URL oder relativer Pfad zu einem Bild, das eine Legende für diese Ebene darstellt.
legendPosition : 'bottomleft' . Position der Legendenbilder auf der Karte. Verfügbar sind Standardpositionen für Leaflet-Steuerelemente („oben rechts“, „oben links“, „unten rechts“, „unten links“).

Standardmäßig ist ein Legendenbild nur für Druck, Niederschlag (klassisch), Wolken (klassisch), Regen (klassisch), Schnee, Temperatur und Windgeschwindigkeit verfügbar. Bitte fügen Sie Ihre eigenen Bilder hinzu, wenn Sie weitere benötigen.

Nutzung aktueller Daten für Städte

Wetterdaten für Städte werden mithilfe der OpenWeatherMap-API abgerufen. Sie werden als LayerGroup von Markierungen hinzugefügt. Diese Ebene kann alle n Minuten aktualisiert werden (stellen Sie n mit der Option intervall ein, verwenden Sie jedoch bitte nicht weniger als 10 Minuten).

Initialisierung

So initialisieren Sie diese dynamisch erstellten Ebenen:

var city = L.OWM.current( /* Optionen */ );

Optionen

Es stehen viele Optionen zur Verfügung, um das Verhalten der Stadtdaten zu konfigurieren ( Standardwert ist fett). Aber haben Sie keine Angst vor der Vielzahl an Optionen, Sie müssen keine festlegen, wenn Sie mit den Standardeinstellungen zufrieden sind:

appId : String ( null ). Bitte besorgen Sie sich einen kostenlosen API-Schlüssel (APPID genannt), wenn Sie regelmäßig die aktuellen Wetterdaten von OWM nutzen.
lang : 'en' , 'de', 'ru', 'fr', 'es', 'ca'. Sprache der Popup-Texte. Hinweis: Noch ist nicht jede Übersetzung fertig.
minZoom : Zahl ( 7 ). Minimale Zoomstufe zum Abrufen von Stadtdaten. Verwenden Sie kleinere Werte nur auf eigenes Risiko.
Intervall : Zahl ( 0 ). Zeit in Minuten zum Neuladen der Stadtdaten. Bitte nicht weniger als 10 Minuten verwenden. 0 kein Neuladen (Standard)
progressControl : wahr oder falsch. Ob eine Fortschrittskontrolle verwendet werden soll, um dem Benutzer mitzuteilen, dass gerade Daten geladen werden.
imageLoadingUrl : URL ( 'owmloading.gif' ). URL des ladenden Bildes oder ein Pfad relativ zum HTML-Dokument. Dies ist wichtig, wenn sich das Bild nicht im selben Verzeichnis wie das HTML-Dokument befindet!
imageLoadingBgUrl : URL ( null ). URL des Hintergrundbilds zur Fortschrittskontrolle, falls Ihnen das Standardbild nicht gefällt.
Temperatureinheit : 'C' , 'F', 'K'. Temperaturanzeige in Celsius, Fahrenheit oder Kelvin.
TemperatureDigits : Zahl ( 1 ). Anzahl der Dezimalstellen für die Temperatur.
speedUnit : 'ms' , 'kmh' oder 'mph'. Einheit der Windgeschwindigkeit (m/s, km/h oder mph).
speedDigits : Zahl ( 0 ). Anzahl der Dezimalstellen für die Windgeschwindigkeit.
Popup : wahr oder falsch. Ob ein Popup an die Stadtmarkierung gebunden werden soll.
keepPopup : wahr oder falsch. Bei „true“ wird versucht, ein bereits geöffnetes Popup beim Verschieben oder Neuladen erneut zu öffnen. Kann zu einer zusätzlichen Kartenverschiebung (nach dem erneuten Öffnen des Popups) mit Schließen und erneutem Öffnen des Popups führen.
showOwmStationLink : wahr oder falsch. Ob der Städtename mit OWM verknüpft werden soll.
showWindSpeed : 'speed', 'beaufort' oder 'both' . Zeigt die Windgeschwindigkeit als Geschwindigkeit in SpeedUnit oder in Beaufort Scala oder beiden an.
showWindDirection : 'deg', 'desc' oder 'both' . Zeigt die Windrichtung als Grad, als Beschreibung (z. B. NNO) oder beides an.
showTimestamp : wahr oder falsch. Ob der Zeitstempel der Daten angezeigt werden soll.
showTempMinMax : wahr oder falsch. Ob die Temperatur Min./Max. angezeigt werden soll.
useLocalTime : wahr oder falsch. Ob Ortszeit oder UTC für den Zeitstempel verwendet werden soll.
ClusterSize : Zahl ( 150 ). Wenn einige Städte zu nahe beieinander liegen, werden sie ausgeblendet. In einem Bereich der Größe ClusterSize Pixel * ClusterSize Pixel wird nur eine Stadt angezeigt. Wenn Sie hineinzoomen, werden die versteckten Städte angezeigt.
imageUrlCity : URL ( 'https://openweathermap.org/img/w/{icon}.png' ). URL-Vorlage für Wetterzustandsbilder von Städten. {icon} wird durch die Icon-Eigenschaft der Stadtdaten ersetzt. Einige Standardbilder finden Sie unter http://openweathermap.org/img/w/.
imageWidth : Zahl ( 50 ). Breite des Wetterzustandsbilds der Stadt.
imageHeight : Zahl ( 50 ). Höhe des Wetterzustandsbildes der Stadt.
markerFunction : Funktion ( null ). Benutzerdefinierte Funktion zur Markererstellung. Benötigt einen Parameter für Stadtdaten.
popupFunction : Funktion ( null ). Benutzerdefinierte Funktion zur Popup-Erstellung. Benötigt einen Parameter für Stadtdaten.
Caching : wahr oder falsch. Nutzen Sie das Caching aktueller Wetterdaten. Zwischengespeicherte Daten werden neu geladen, wenn sie zu alt sind oder der neue Begrenzungsrahmen nicht in den zwischengespeicherten Begrenzungsrahmen passt.
CacheMaxAge : Zahl ( 15 ). Maximales Alter in Minuten für zwischengespeicherte Daten, bevor sie als zu alt gelten.
keepOnMinZoom : falsch oder wahr. Markierungen beibehalten oder entfernen, wenn Zoom < minZoom.
baseUrl : Standardmäßig ist „https://{s}.tile.openweathermap.org/map/{layername}/{z}/{x}/{y}.png“ – ändern Sie es nur, wenn Sie wissen, was Sie sind tun.

Einfaches Beispiel

Hier die wichtigsten Zeilen:

 < head >
	< script type =" text/javascript " src =" leaflet.js " > </ script >
	< link rel =" stylesheet " type =" text/css " href =" leaflet-openweathermap.css " />
	< script type =" text/javascript " src =" leaflet-openweathermap.js " > </ script >
</ head >

 var osm = L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
	maxZoom : 18 , attribution : '[insert correct attribution here!]' } ) ;

var clouds = L . OWM . clouds ( { showLegend : false , opacity : 0.5 , appId : 'YOUR_OWN_APPID' } ) ;
var city = L . OWM . current ( { intervall : 15 , lang : 'de' } ) ;

var map = L . map ( 'map' , { center : new L . LatLng ( 51.5 , 10 ) , zoom : 10 , layers : [ osm ] } ) ;
var baseMaps = { "OSM Standard" : osm } ;
var overlayMaps = { "Clouds" : clouds , "Cities" : city } ;
var layerControl = L . control . layers ( baseMaps , overlayMaps ) . addTo ( map ) ;

Beispiel mit vom Benutzer bereitgestellten Markierungs-/Popup-Funktionen für das aktuelle Wetter

Stellen Sie eine Funktion zum Erstellen von Markierungen und eine weitere zum Erstellen von Popups bereit. Fügen Sie Ihrem Aufruf von L.OWM.current die Optionen markerFunction und popupFunction hinzu. Die Datenstruktur, die Sie als Parameter erhalten, ist derzeit nicht gut dokumentiert. Sie bekommen, was OWM sendet. Schauen Sie sich einfach die Daten an und bedenken Sie, dass die meisten Eingaben optional sind. Der Kontext (dies) der Funktionen ist die von Ihnen erstellte L.OWM.Current-Instanz. Daher haben Sie Zugriff auf Optionen (z. B. this.options.temperatureUnit) und andere Attribute.

 < head >
	< script type =" text/javascript " src =" leaflet.js " > </ script >
	< link rel =" stylesheet " type =" text/css " href =" leaflet-openweathermap.css " />
	< script type =" text/javascript " src =" leaflet-openweathermap.js " > </ script >
</ head >

 function myOwmMarker ( data ) {
	// just a Leaflet default marker
	return L . marker ( [ data . coord . lat , data . coord . lon ] ) ;
}

function myOwmPopup ( data ) {
	// just a Leaflet default popup with name as content
	return L . popup ( ) . setContent ( data . name ) ;
}

var osm = L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
	maxZoom : 18 , attribution : '[insert correct attribution here!]' } ) ;

var clouds = L . OWM . clouds ( { showLegend : false , opacity : 0.5 , appId : 'YOUR_OWN_APPID' } ) ;
var city = L . OWM . current ( { intervall : 15 , lang : 'de' ,
			markerFunction : myOwmMarker , popupFunction : myOwmPopup } ) ;

var map = L . map ( 'map' , { center : new L . LatLng ( 51.5 , 10 ) , zoom : 10 , layers : [ osm ] } ) ;
var baseMaps = { "OSM Standard" : osm } ;
var overlayMaps = { "Clouds" : clouds , "Cities" : city } ;
var layerControl = L . control . layers ( baseMaps , overlayMaps ) . addTo ( map ) ;

Bitte hilf mir

Für einige Sprachen sind die Übersetzungen unvollständig. Kennt da draußen jemand die richtigen Begriffe? Bitte schauen Sie sich L.OWM.Utils.i18n[lang] an.

Expandieren

Zusätzliche Informationen