leaflet openweathermap
1.0.0
このプロジェクトはもう保守されていません。このプロジェクトを継続したい場合は、フォークして続行してください。メモを送っていただければ、この Readme のここにあなたのフォークへの目立つリンクを追加するかもしれません。
OpenWeatherMap (OWM) は、OpenLayers ベースの地図を使用して視覚化した気象関連データを提供するサービスです。これは、リーフレット ベースのマップの OWM 機能への簡単なアクセスを提供する、独立したリーフレット ベースのスクリプトです。
簡単に言うと、OWM のレイヤーと OWM の現在の都市データをリーフレット ベースのマップに簡単に組み込むための独立した JavaScript ライブラリです。
このライブラリの多くの機能を使用したマップの例は、ahorn.lima-city.de/owm で参照できます。その「Wind Rose」オーバーレイは、ユーザー定義マーカーの例であり、マーカーのユーザー定義関数によって何が実現できるかを示しています。このマップはサンプル ディレクトリからも入手できます。
このコードは CC0 に基づいてライセンスされています。サンプル ディレクトリ内の一部のファイルには他のライセンスが設定されている場合があります (例:リーフレット.js - リーフレット.ライセンスを参照)。必要に応じてファイルを参照してください。
OWMは、雲、雲クラシック、降水量、クラシック降水量、雨、雨クラシック、雪、温度、風速、気圧、等高線のタイルレイヤーを提供します。
これらの TileLayers を初期化する方法は次のとおりです (AppId は必須です。ここで独自の ID を取得します)。
Leaflet TileLayers の標準オプション以外にも、追加オプションがあります。
すぐに使用できる凡例画像は、気圧、降水量、クラシック雲、雨、雪、気温、風速についてのみ使用できます。さらに必要な場合は、独自の画像を追加してください。
都市の気象データは、OpenWeatherMap API を使用して取得されます。これらはマーカーの LayerGroup として追加されます。このレイヤーはn分ごとに更新できます ( n はオプションのintervallで設定しますが、10 分未満は使用しないでください)。
これらの動的に作成されたレイヤーを初期化する方法は次のとおりです。
都市データの動作を設定するために多くのオプションが利用可能です (デフォルト値は太字です)。ただし、オプションが多数あることを心配する必要はありません。デフォルトで満足する場合は、何も設定する必要はありません。
最も重要な行は次のとおりです。
< 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 ) ; マーカーを作成するための関数とポップアップを作成するための関数を 1 つ提供します。 L.OWM.currentへの呼び出しに、オプションmarkFunctionおよびPopupFunctionを追加します。パラメーターとして取得するデータ構造は、現時点では十分に文書化されていません。 OWM が送信したものを取得します。データを見てください。ほとんどのエントリはオプションであることに注意してください。関数のコンテキスト (this) は、作成した L.OWM.Current インスタンスです。したがって、オプション (例: this.options.temporalUnit) およびその他の属性にアクセスできます。
< 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 ) ; L.OWM.Utils.i18n[lang]を見てください。
