OpenWeatherMap untuk peta berbasis Leaflet
AKHIR HIDUP
Proyek ini tidak lagi dipertahankan. Jika Anda ingin melanjutkan proyek ini, lakukan saja dan lanjutkan. Jika Anda memberi saya catatan, mungkin saya akan menambahkan tautan yang menonjol ke garpu Anda di sini, di readme ini.
Keterangan
OpenWeatherMap (OWM) adalah layanan yang menyediakan data terkait cuaca, memvisualisasikannya menggunakan peta berbasis OpenLayers. Ini adalah skrip independen berbasis Leaflet yang menyediakan akses mudah ke fitur OWM untuk peta berbasis Leaflet.
Singkatnya: Pustaka JavaScript independen untuk menyertakan lapisan OWM dan data kota terkini OWM dalam peta berbasis Leaflet tanpa kerumitan.
Demo
Contoh peta yang menggunakan banyak fitur perpustakaan ini dapat dilihat di ahorn.lima-city.de/owm. Hamparan "Wind Rose"-nya adalah contoh penanda yang ditentukan pengguna untuk memberi Anda gambaran tentang apa yang dapat dicapai dengan fungsi penanda yang ditentukan pengguna. Peta ini juga tersedia di direktori contoh.
Lisensi
Kode ini dilisensikan di bawah CC0. Beberapa file dalam direktori contoh mungkin memiliki lisensi lain (misalnya leaflet.js - lihat leaflet.license) - silakan lihat file tersebut jika diperlukan.
Menggunakan TileLayers
OWM menawarkan beberapa Lapisan Ubin: Awan, Awan Klasik, Curah Hujan, Curah Hujan Klasik, Hujan, Hujan Klasik, Salju, Suhu, Kecepatan Angin, Tekanan, dan Kontur Tekanan.
Menginisialisasi TileLayers
Berikut cara menginisialisasi TileLayers ini (AppId wajib sekarang, dapatkan milik Anda sendiri di sini):
- var cloud = L.OWM.clouds({appId: 'YOUR_OWN_APPID'});
- var cloudcls = L.OWM.cloudsClassic({appId: 'YOUR_OWN_APPID'});
- var curah hujan = L.OWM.presipitasi({appId: 'YOUR_OWN_APPID'});
- var presipitasicls = L.OWM.precipitationClassic({appId: 'YOUR_OWN_APPID'});
- var hujan = RENDAH.hujan({appId: 'YOUR_OWN_APPID'});
- var raincls = L.OWM.rainClassic({appId: 'YOUR_OWN_APPID'});
- var snow = L.OWM.snow({appId: 'YOUR_OWN_APPID'});
- var pressure = L.OWM.pressure({appId: 'YOUR_OWN_APPID'});
- var pressurecntr = L.OWM.pressureContour({appId: 'YOUR_OWN_APPID'});
- var temp = L.OWM.temperature({appId: 'YOUR_OWN_APPID'});
- var angin = L.OWM.wind({appId: 'YOUR_OWN_APPID'});
Opsi untuk TileLayers
Di luar opsi standar untuk Leaflet TileLayers, ada opsi tambahan:
- appId : AppId bersifat wajib. Dapatkan di https://www.openweathermap.org/appid
- showLegend : benar atau salah. Jika benar dan opsi 'legendImagePath' disetel, maka akan ada gambar legenda di peta.
- legendaImagePath : URL (disetel ke gambar default untuk beberapa lapisan, null untuk yang lain, lihat di bawah). URL atau jalur relatif ke gambar yang merupakan legenda lapisan ini.
- legendaPosisi : 'kiri bawah' . Posisi gambar legenda pada peta. Tersedia posisi standar untuk kontrol Leaflet ('kanan atas', 'kiri atas', 'kanan bawah', 'kiri bawah').
Gambar legenda hanya tersedia untuk Tekanan, Curah Hujan Klasik, Awan Klasik, Hujan Klasik, Salju, Suhu, dan Kecepatan Angin. Silakan tambahkan gambar Anda sendiri jika Anda memerlukannya lagi.
Menggunakan data terkini untuk kota
Data cuaca untuk kota diambil menggunakan OpenWeatherMap API. Mereka ditambahkan sebagai LayerGroup penanda. Lapisan ini dapat disegarkan setiap n menit (atur n dengan opsi interval tetapi jangan gunakan kurang dari 10 menit).
Inisialisasi
Berikut cara menginisialisasi lapisan yang dibuat secara dinamis ini:
- var city = L.OWM.saat ini( /* pilihan */ );
Pilihan
Banyak opsi yang tersedia untuk mengonfigurasi perilaku data kota ( nilai defaultnya dicetak tebal). Namun jangan takut dengan banyaknya opsi, Anda tidak perlu menyetelnya jika Anda puas dengan defaultnya:
- appId : String ( nol ). Silakan dapatkan kunci API gratis (disebut APPID) jika Anda menggunakan data cuaca terkini OWM secara rutin.
- lang : 'en' , 'de', 'ru', 'fr', 'es', 'ca'. Bahasa teks popup. Catatan: belum semua terjemahan selesai.
- minZoom : Angka ( 7 ). Tingkat zoom minimal untuk mengambil data kota. Gunakan nilai yang lebih kecil hanya dengan risiko Anda sendiri.
- interval : Angka ( 0 ). Waktu dalam hitungan menit untuk memuat ulang data kota. Tolong jangan gunakan kurang dari 10 menit. 0 tidak ada isi ulang (default)
- progresControl : benar atau salah. Apakah kontrol kemajuan harus digunakan untuk memberi tahu pengguna bahwa data sedang dimuat saat ini.
- imageLoadingUrl : URL ( 'owmloading.gif' ). URL gambar yang dimuat, atau jalur yang berhubungan dengan dokumen HTML. Ini penting bila gambar tidak berada di direktori yang sama dengan dokumen HTML!
- imageLoadingBgUrl : URL ( nol ). URL gambar latar belakang untuk kontrol kemajuan jika Anda tidak menyukai yang default.
- suhuSatuan : 'C' , 'F', 'K'. Menampilkan suhu dalam Celsius, Fahrenheit atau Kelvin.
- suhuDigit : Angka ( 1 ). Jumlah tempat desimal untuk suhu.
- speedUnit : 'ms' , 'kmh' atau 'mph'. Satuan kecepatan angin (m/s, km/jam atau mph).
- speedDigits : Angka ( 0 ). Jumlah tempat desimal untuk kecepatan angin.
- popup : benar atau salah. Apakah akan mengikat popup ke penanda kota.
- keepPopup : benar atau salah. Jika benar, ia mencoba membuka kembali popup yang sudah terbuka saat dipindahkan atau dimuat ulang. Dapat mengakibatkan perpindahan peta tambahan (setelah membuka kembali popup) dengan menutup dan membuka kembali popup sekali lagi.
- showOwmStationLink : benar atau salah. Apakah akan menghubungkan nama kota ke OWM.
- showWindSpeed : 'kecepatan', 'keindahan' atau 'keduanya' . Tampilkan kecepatan angin sebagai kecepatan dalam speedUnit atau dalam skala beaufort atau keduanya.
- showWindDirection : 'deg', 'desc' atau 'keduanya' . Tunjukkan arah angin sebagai derajat, sebagai deskripsi (misalnya NNE) atau keduanya.
- showTimestamp : benar atau salah. Apakah akan menampilkan stempel waktu data.
- showTempMinMax : benar atau salah. Apakah akan menampilkan suhu min/maks.
- useLocalTime : benar atau salah. Apakah akan menggunakan waktu lokal atau UTC untuk stempel waktunya.
- clusterSize : Nomor ( 150 ). Jika beberapa kota terlalu dekat satu sama lain, kota tersebut tersembunyi. Di area berukuran clusterSize piksel * clusterSize piksel hanya satu kota yang ditampilkan. Jika Anda memperbesar kota-kota yang tersembunyi akan muncul.
- imageUrlCity : URL ( 'https://openweathermap.org/img/w/{icon}.png' ). Templat URL untuk gambar kondisi cuaca kota. {icon} akan digantikan oleh properti icon data kota. Lihat http://openweathermap.org/img/w/ untuk beberapa gambar standar.
- lebar gambar : Angka ( 50 ). Lebar gambar kondisi cuaca kota.
- imageHeight : Angka ( 50 ). Gambar kondisi cuaca ketinggian kota.
- markerFunction : Fungsi ( null ). Fungsi yang ditentukan pengguna untuk pembuatan penanda. Membutuhkan satu parameter untuk data kota.
- popupFunction : Fungsi ( null ). Fungsi yang ditentukan pengguna untuk pembuatan popup. Membutuhkan satu parameter untuk data kota.
- cache : benar atau salah. Gunakan cache data cuaca saat ini. Data yang di-cache dimuat ulang ketika terlalu lama atau kotak pembatas yang baru tidak muat di dalam kotak pembatas yang di-cache.
- cacheMaxAge : Angka ( 15 ). Usia maksimum dalam hitungan menit untuk data yang di-cache sebelum dianggap terlalu tua.
- keepOnMinZoom : salah atau benar. Simpan atau hapus penanda saat zoom < minZoom.
- baseUrl : Defaultnya adalah "https://{s}.tile.openweathermap.org/map/{layername}/{z}/{x}/{y}.png" - hanya ubah jika Anda tahu siapa Anda sedang mengerjakan.
Contoh Sederhana
Berikut adalah baris yang paling penting:
< 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 ) ; Contoh dengan fungsi penanda/popup yang disediakan pengguna untuk cuaca saat ini
Menyediakan satu fungsi untuk membuat penanda dan satu lagi untuk membuat popup. Tambahkan opsi markerFunction dan popupFunction ke panggilan Anda ke L.OWM.current . Struktur data yang Anda dapatkan sebagai parameter saat ini tidak terdokumentasi dengan baik. Anda mendapatkan apa yang dikirimkan OWM. Lihat saja datanya dan ingatlah bahwa sebagian besar entri bersifat opsional. Konteks (ini) dari fungsinya adalah instance L.OWM.Current yang Anda buat. Oleh karena itu, Anda memiliki akses ke opsi (misalnya this.options.temperatureUnit) dan atribut lainnya.
< 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 ) ; Tolong bantu saya
- Terjemahan untuk beberapa bahasa tidak lengkap. Seseorang di luar sana mengetahui istilah yang benar? Silakan lihat
L.OWM.Utils.i18n[lang] .
