ดาวน์โหลด leaflet openweathermap - leaflet openweathermap ดาวน์โหลดซอร์สโค้ด

leaflet openweathermap

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

OpenWeatherMap สำหรับแผนที่ที่ใช้แผ่นพับ

จุดจบของชีวิต

โปรเจ็กต์นี้ไม่ได้รับการดูแลอีกต่อไป หากคุณต้องการดำเนินโครงการนี้ต่อไป เพียงแค่แยกมันและดำเนินต่อไป หากคุณส่งข้อความถึงฉันบางทีฉันจะเพิ่มลิงก์ที่โดดเด่นไปยังทางแยกของคุณที่นี่ใน readme นี้

คำอธิบาย

OpenWeatherMap (OWM) เป็นบริการที่ให้ข้อมูลที่เกี่ยวข้องกับสภาพอากาศ โดยแสดงเป็นภาพโดยใช้แผนที่แบบ OpenLayers นี่คือสคริปต์ที่ใช้ Leaflet อิสระซึ่งให้การเข้าถึงคุณลักษณะของ OWM สำหรับแผนที่ที่ใช้ Leaflet ได้อย่างง่ายดาย

กล่าวโดยย่อ: ไลบรารี JavaScript อิสระสำหรับการรวมเลเยอร์ของ OWM และข้อมูลเมืองปัจจุบันของ OWM ในแผนที่ที่ใช้ Leaflet โดยไม่ต้องยุ่งยาก

สาธิต

สามารถดูแผนที่ตัวอย่างที่ใช้คุณสมบัติมากมายของห้องสมุดนี้ได้ที่ ahorn.lima-city.de/owm การซ้อนทับ "Wind Rose" เป็นตัวอย่างของมาร์กเกอร์ที่ผู้ใช้กำหนด เพื่อให้คุณเห็นภาพว่าฟังก์ชันมาร์กเกอร์ที่ผู้ใช้กำหนดสามารถทำได้อย่างไร แผนที่นี้มีอยู่ในไดเรกทอรีตัวอย่างด้วย

ใบอนุญาต

รหัสนี้ได้รับอนุญาตภายใต้ CC0 ไฟล์บางไฟล์ในไดเรกทอรีตัวอย่างอาจมีใบอนุญาตอื่นๆ (เช่น leaflet.js - ดู leaflet.license) - โปรดดูไฟล์หากจำเป็น

การใช้ TileLayers

OWM นำเสนอ TileLayers บางส่วน: เมฆ, Clouds Classic, หยาดน้ำฟ้า, หยาดน้ำฟ้า, คลาสสิก, ฝน, คลาสสิกฝน, หิมะ, อุณหภูมิ, ความเร็วลม, ความดัน และรูปทรงความดัน

กำลังเริ่มต้น TileLayers

ต่อไปนี้เป็นวิธีเริ่มต้น TileLayers เหล่านี้ (จำเป็นต้องมี AppId ตอนนี้ รับของคุณเองที่นี่):

var cloud = L.OWM.clouds ({appId: 'YOUR_OWN_APPID'});
var cloudcls = L.OWM.cloudsClassic({appId: 'YOUR_OWN_APPID'});
การตกตะกอน var = L.OWM.precipitation({appId: 'YOUR_OWN_APPID'});
var precipitationcls = L.OWM.precipitationClassic({appId: 'YOUR_OWN_APPID'});
ฝน var = L.OWM.rain({appId: 'YOUR_OWN_APPID'});
var raincls = L.OWM.rainClassic({appId: 'YOUR_OWN_APPID'});
var หิมะ = L.OWM.snow ({appId: 'YOUR_OWN_APPID'});
ความดัน var = 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 wind = L.OWM.wind ({appId: 'YOUR_OWN_APPID'});

ตัวเลือกสำหรับ TileLayers

นอกเหนือจากตัวเลือกมาตรฐานสำหรับ Leaflet TileLayers แล้ว ยังมีตัวเลือกเพิ่มเติมอีกด้วย:

appId : จำเป็นต้องมี AppId ดาวน์โหลดได้ที่ https://www.openweathermap.org/appid
showLegend : จริง หรือเท็จ หากตั้งค่าเป็นจริงและตั้งค่าตัวเลือก 'legendImagePath' จะมีรูปภาพคำอธิบายแผนภูมิบนแผนที่
legendImagePath : URL (ถูกตั้งค่าเป็นรูปภาพเริ่มต้นสำหรับบางเลเยอร์ null สำหรับเลเยอร์อื่น ดูด้านล่าง) URL หรือเส้นทางสัมพัทธ์ไปยังรูปภาพซึ่งเป็นคำอธิบายของเลเยอร์นี้
ตำแหน่งตำนาน : 'bottomleft' ตำแหน่งของภาพตำนานบนแผนที่ ที่มีอยู่เป็นตำแหน่งมาตรฐานสำหรับการควบคุมแผ่นพับ ('บนขวา', 'บนซ้าย', 'ล่างขวา', 'ล่างซ้าย')

เมื่อแกะกล่อง ภาพคำอธิบายจะมีให้ใช้งานเฉพาะความกดอากาศ, การตกตะกอนแบบคลาสสิก, แบบเมฆ, แบบฝน, หิมะ, อุณหภูมิ และความเร็วลม โปรดเพิ่มรูปภาพของคุณเองหากต้องการเพิ่มเติม

การใช้ข้อมูลปัจจุบันสำหรับเมืองต่างๆ

ข้อมูลสภาพอากาศสำหรับเมืองต่างๆ ได้รับการดึงข้อมูลโดยใช้ OpenWeatherMap API พวกมันจะถูกเพิ่มเป็นกลุ่มเลเยอร์ของมาร์กเกอร์ เลเยอร์นี้สามารถรีเฟรชได้ทุก ๆ n นาที (ตั้งค่า n ด้วยตัวเลือก ช่วง แต่โปรดอย่าใช้เวลาน้อยกว่า 10 นาที)

การเริ่มต้น

ต่อไปนี้เป็นวิธีเริ่มต้นเลเยอร์ที่สร้างขึ้นแบบไดนามิกเหล่านี้:

เมือง var = L.OWM.current( /* ตัวเลือก */ );

ตัวเลือก

มี ตัวเลือก มากมายในการกำหนดค่าลักษณะการทำงานของข้อมูลเมือง ( ค่าเริ่มต้น คือตัวหนา) แต่อย่ากลัวกับตัวเลือกจำนวนมาก คุณไม่จำเป็นต้องตั้งค่าใดๆ หากคุณพอใจกับค่าเริ่มต้น:

appId : สตริง ( null ) โปรดรับคีย์ API ฟรี (เรียกว่า APPID) หากคุณใช้ข้อมูลสภาพอากาศปัจจุบันของ OWM เป็นประจำ
lang : 'en' , 'de', 'ru', 'fr', 'es', 'ca' ภาษาของข้อความป๊อปอัป หมายเหตุ: การแปลยังไม่เสร็จสิ้นทั้งหมด
minZoom : ตัวเลข ( 7 ) ระดับการซูมขั้นต่ำสำหรับการดึงข้อมูลเมือง ใช้ค่าที่น้อยกว่าด้วยความเสี่ยงของคุณเองเท่านั้น
ช่วงเวลา : ตัวเลข ( 0 ) เวลาเป็นนาทีในการโหลดข้อมูลเมืองใหม่ กรุณาอย่าใช้เวลาน้อยกว่า 10 นาที 0 ไม่มีการโหลดซ้ำ (ค่าเริ่มต้น)
ความคืบหน้าการควบคุม : จริง หรือเท็จ ควรใช้การควบคุมความคืบหน้าเพื่อบอกผู้ใช้ว่าข้อมูลกำลังโหลดอยู่ในขณะนี้หรือไม่
imageLoadingUrl : URL ( 'owmloading.gif' ) URL ของรูปภาพที่กำลังโหลด หรือเส้นทางที่เกี่ยวข้องกับเอกสาร HTML นี่เป็นสิ่งสำคัญเมื่อรูปภาพไม่อยู่ในไดเร็กทอรีเดียวกันกับเอกสาร HTML!
imageLoadingBgUrl : URL ( null ) URL ของภาพพื้นหลังสำหรับการควบคุมความคืบหน้า หากคุณไม่ชอบค่าเริ่มต้น
อุณหภูมิหน่วย : 'C' , 'F', 'K'. แสดงอุณหภูมิเป็นเซลเซียส ฟาเรนไฮต์ หรือเคลวิน
อุณหภูมิหลัก : ตัวเลข ( 1 ) จำนวนตำแหน่งทศนิยมสำหรับอุณหภูมิ
speedUnit : 'ms' , 'kmh' หรือ 'mph' หน่วยความเร็วลม (m/s, km/h หรือ mph)
speedDigits : ตัวเลข ( 0 ) จำนวนตำแหน่งทศนิยมของความเร็วลม
ป๊อปอัป : จริง หรือเท็จ ไม่ว่าจะผูกป๊อปอัปกับเครื่องหมายเมืองหรือไม่
KeepPopup : จริง หรือเท็จ เมื่อเป็นจริง ระบบจะพยายามเปิดป๊อปอัปที่เปิดอยู่แล้วอีกครั้งขณะย้ายหรือโหลดซ้ำ อาจส่งผลให้มีการย้ายแผนที่เพิ่มเติม (หลังจากเปิดป๊อปอัปอีกครั้ง) โดยปิดและเปิดป๊อปอัปอีกครั้ง
showOwmStationLink : จริง หรือเท็จ ไม่ว่าจะเชื่อมโยงชื่อเมืองกับ OWM
showWindSpeed : 'speed', 'beaufort' หรือ 'both' แสดงความเร็วลมเป็นความเร็วในหน่วยความเร็วหรือในโบฟอร์ตสกาล่าหรือทั้งสองอย่าง
showWindDirection : 'deg', 'desc' หรือ 'both' แสดงทิศทางลมเป็นองศา เป็นคำอธิบาย (เช่น NNE) หรือทั้งสองอย่าง
showTimestamp : จริง หรือเท็จ ไม่ว่าจะแสดงการประทับเวลาของข้อมูลหรือไม่
showTempMinMax : จริง หรือเท็จ จะแสดงอุณหภูมิต่ำสุด/สูงสุดหรือไม่
useLocalTime : จริง หรือเท็จ ไม่ว่าจะใช้เวลาท้องถิ่นหรือ UTC สำหรับการประทับเวลา
ขนาดคลัสเตอร์ : หมายเลข ( 150 ) ถ้าบางเมืองอยู่ใกล้กันเกินไปก็จะถูกซ่อนไว้ ในพื้นที่ของคลัสเตอร์ขนาดพิกเซลขนาด * พิกเซลขนาดคลัสเตอร์จะแสดงเพียงเมืองเดียวเท่านั้น หากซูมเข้าเมืองที่ซ่อนอยู่ก็จะปรากฏขึ้น
imageUrlCity : URL ( 'https://openweathermap.org/img/w/{icon}.png' ) เทมเพลต URL สำหรับภาพสภาพอากาศของเมือง {icon} จะถูกแทนที่ด้วยคุณสมบัติไอคอนของข้อมูลของเมือง ดู http://openweathermap.org/img/w/ สำหรับภาพมาตรฐานบางภาพ
ความกว้างของภาพ : ตัวเลข ( 50 ) ความกว้างของภาพสภาพอากาศของเมือง
imageHeight : ตัวเลข ( 50 ) ความสูงของภาพสภาพอากาศของเมือง
markerFunction : ฟังก์ชั่น ( null ) ฟังก์ชั่นที่ผู้ใช้กำหนดสำหรับการสร้างมาร์กเกอร์ ต้องการหนึ่งพารามิเตอร์สำหรับข้อมูลเมือง
popupFunction : ฟังก์ชั่น ( null ) ฟังก์ชั่นที่ผู้ใช้กำหนดสำหรับการสร้างป๊อปอัป ต้องการหนึ่งพารามิเตอร์สำหรับข้อมูลเมือง
แคช : จริง หรือเท็จ ใช้แคชข้อมูลสภาพอากาศปัจจุบัน ข้อมูลแคชจะถูกโหลดซ้ำเมื่อข้อมูลเก่าเกินไปหรือกล่องขอบเขตใหม่ไม่พอดีกับกล่องขอบเขตที่แคชไว้
cacheMaxAge : หมายเลข ( 15 ) อายุสูงสุดเป็นนาทีสำหรับข้อมูลที่แคชก่อนที่จะถือว่าเก่าเกินไป
keepOnMinZoom : เท็จ หรือจริง เก็บหรือลบเครื่องหมายเมื่อซูม < minZoom
baseUrl : ค่าเริ่มต้นเป็น "https://{s}.tile.openweathermap.org/map/{layername}/{z}/{x}/{y}.png" - เปลี่ยนเมื่อคุณรู้ว่าคุณเป็นอะไรเท่านั้น ทำ.

ตัวอย่างง่ายๆ

นี่คือบรรทัดที่สำคัญที่สุด:

 < 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 ) ;

ตัวอย่างฟังก์ชันมาร์กเกอร์/ป๊อปอัปที่ผู้ใช้ระบุสำหรับสภาพอากาศปัจจุบัน

จัดเตรียมฟังก์ชันหนึ่งสำหรับการสร้างมาร์กเกอร์และอีกฟังก์ชันหนึ่งสำหรับสร้างป๊อปอัป เพิ่มตัวเลือก markerFunction และ popupFunction ให้กับการโทรของคุณไปที่ L.OWM.current โครงสร้างข้อมูลที่คุณได้รับเป็นพารามิเตอร์ไม่ได้รับการบันทึกไว้อย่างดีในขณะนี้ คุณได้รับสิ่งที่ OWM ส่ง เพียงดูข้อมูลและโปรดจำไว้ว่ารายการส่วนใหญ่เป็นทางเลือก บริบท (สิ่งนี้) ของฟังก์ชันคืออินสแตนซ์ L.OWM.Current ที่คุณสร้างขึ้น ดังนั้นคุณจึงสามารถเข้าถึงตัวเลือกต่างๆ (เช่น this.options.temperatureUnit) และคุณลักษณะอื่นๆ

 < 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 ) ;