leaflet openweathermap تنزيل - leaflet openweathermap تحميل كود المصدر

leaflet openweathermap

شفرة المصدر الأخرى

1.0.0

تنزيل

OpenWeatherMap للخرائط القائمة على المنشورات

نهاية الحياة

لم يعد يتم الحفاظ على هذا المشروع. إذا كنت ترغب في مواصلة هذا المشروع، فقط قم بالتخلي عنه واستمر. إذا أرسلت لي ملاحظة، فربما سأضيف رابطًا بارزًا إلى شوكتك هنا في هذا الملف التمهيدي.

وصف

OpenWeatherMap (OWM) هي خدمة توفر البيانات المتعلقة بالطقس، وتصورها باستخدام خريطة تعتمد على OpenLayers. هذا برنامج نصي مستقل قائم على المنشورات يوفر سهولة الوصول إلى ميزات OWM للخرائط القائمة على المنشورات.

باختصار: مكتبة جافا سكريبت مستقلة لتضمين طبقات OWM وبيانات المدينة الحالية لـ OWM في الخرائط القائمة على المنشورات دون أي متاعب.

تجريبي

يمكن رؤية مثال لخريطة تستخدم العديد من ميزات هذه المكتبة على ahorn.lima-city.de/owm. يعد تراكب "Wind Rose" الخاص به مثالاً على علامة يحددها المستخدم لإعطائك فكرة عما يمكن تحقيقه من خلال الوظائف التي يحددها المستخدم للعلامات. هذه الخريطة متاحة في دليل المثال أيضًا.

رخصة

هذا الرمز مرخص بموجب CC0. قد تحتوي بعض الملفات الموجودة في دليل المثال على تراخيص أخرى (على سبيل المثال leaflet.js - راجع leaflet.license) - يرجى إلقاء نظرة على الملفات إذا لزم الأمر.

باستخدام طبقات البلاط

تقدم OWM بعض طبقات TileLayers: السحب، والسحب الكلاسيكية، والهطول، والهطول الكلاسيكي، والمطر، والمطر الكلاسيكي، والثلج، ودرجة الحرارة، وسرعة الرياح، والضغط، وملامح الضغط.

تهيئة طبقات البلاط

إليك كيفية تهيئة TileLayers (معرف التطبيق إلزامي الآن، احصل على معرف التطبيق الخاص بك هنا):

var clouds = L.OWM.clouds({appId: 'YOUR_OWN_APPID'});
var cloudscls = L.OWM.cloudsClassic({appId: 'YOUR_OWN_APPID'});
فار هطول الأمطار = L.OWM.precipitation({appId: 'YOUR_OWN_APPID'});
var precipitationcls = L.OWM.precipitationClassic({appId: 'YOUR_OWN_APPID'});
varrain = 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'});
ضغط فار = L.OWM.pressure({appId: 'YOUR_OWN_APPID'});
var presscntr = L.OWM.pressureContour({appId: 'YOUR_OWN_APPID'});
var temp = L.OWM.temperature({appId: 'YOUR_OWN_APPID'});
varwind = L.OWM.wind({appId: 'YOUR_OWN_APPID'});

خيارات لطبقات البلاط

بالإضافة إلى الخيارات القياسية لـ Leaflet TileLayers هناك خيارات إضافية:

معرف التطبيق : معرف التطبيق إلزامي. احصل عليه على https://www.openweathermap.org/appid
showLegend : صحيح أم خطأ. إذا تم تعيين الخيار "legendImagePath" على "صحيح"، فستكون هناك صورة توضيحية على الخريطة.
legendImagePath : عنوان URL (يتم تعيينه على صورة افتراضية لبعض الطبقات، وخالية بالنسبة للطبقات الأخرى، انظر أدناه). عنوان URL أو المسار النسبي لصورة تمثل وسيلة إيضاح لهذه الطبقة.
legendPosition : 'أسفل اليسار' . موقع الصور الأسطورية على الخريطة. تتوفر مواضع قياسية لعناصر تحكم النشرة ("أعلى اليمين"، و"أعلى اليسار"، و"أسفل اليمين"، و"أسفل اليسار").

تتوفر صورة توضيحية خارج الصندوق فقط للضغط وهطول الأمطار الكلاسيكي وClouds Classic وRain Classic والثلج ودرجة الحرارة وسرعة الرياح. يرجى إضافة الصور الخاصة بك إذا كنت بحاجة إلى المزيد.

استخدام البيانات الحالية للمدن

يتم جلب بيانات الطقس للمدن باستخدام OpenWeatherMap API. تتم إضافتها كمجموعة طبقات من العلامات. يمكن تحديث هذه الطبقة كل n دقيقة (اضبط n باستخدام الفاصل الزمني للخيار ولكن لا تستخدم أقل من 10 دقائق، من فضلك).

التهيئة

إليك كيفية تهيئة هذه الطبقات التي تم إنشاؤها ديناميكيًا:

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

خيارات

تتوفر الكثير من الخيارات لتكوين سلوك بيانات المدينة ( القيمة الافتراضية بالخط العريض). لكن لا تخف من العدد الكبير من الخيارات، فلن تحتاج إلى تعيين أي منها إذا كنت راضيًا عن الإعدادات الافتراضية:

معرف التطبيق : سلسلة ( فارغة ). يرجى الحصول على مفتاح API مجاني (يسمى APPID) إذا كنت تستخدم بيانات الطقس الحالية الخاصة بـ OWM بشكل منتظم.
lang : 'en' ، 'de'، 'ru'، 'fr'، 'es'، 'ca'. لغة النصوص المنبثقة. ملحوظة: لم تنتهي كل الترجمة بعد.
التكبير الأدنى : الرقم ( 7 ). الحد الأدنى من مستوى التكبير/التصغير لجلب بيانات المدينة. استخدم القيم الأصغر فقط على مسؤوليتك الخاصة.
الفاصل الزمني : الرقم ( 0 ). الوقت بالدقائق لإعادة تحميل بيانات المدينة. من فضلك لا تستخدم أقل من 10 دقائق. 0 لا يوجد إعادة تحميل (افتراضي)
التحكم في التقدم : صحيح أو خطأ. ما إذا كان يجب استخدام عنصر التحكم في التقدم لإخبار المستخدم بأنه يتم تحميل البيانات في الوقت الحالي.
imageLoadingUrl : عنوان URL ( 'owmloading.gif' ). عنوان URL لصورة التحميل، أو مسار متعلق بمستند HTML. يعد هذا أمرًا مهمًا عندما لا تكون الصورة في نفس الدليل مثل مستند HTML!
imageLoadingBgUrl : عنوان URL ( خالي ). عنوان URL لصورة الخلفية للتحكم في التقدم إذا كنت لا تحب الصورة الافتراضية.
وحدة درجة الحرارة : 'C' ، 'F'، 'K'. عرض درجة الحرارة بالدرجة المئوية أو الفهرنهايت أو الكلفن.
أرقام درجة الحرارة : العدد ( 1 ). عدد المنازل العشرية لدرجة الحرارة.
وحدة السرعة : 'ms' أو 'kmh' أو 'mph'. وحدة سرعة الرياح (م/ث، كم/ساعة أو ميل في الساعة).
أرقام السرعة : الرقم ( 0 ). عدد المنازل العشرية لسرعة الرياح.
المنبثقة : صحيح أو خطأ. ما إذا كان سيتم ربط نافذة منبثقة بعلامة المدينة أم لا.
keepPopup : صحيح أو خطأ. عندما يكون صحيحًا، فإنه يحاول إعادة فتح نافذة منبثقة مفتوحة بالفعل أثناء النقل أو إعادة التحميل. يمكن أن يؤدي إلى تحرك إضافي للخريطة (بعد إعادة فتح النافذة المنبثقة) مع إغلاق النافذة المنبثقة وإعادة فتحها مرة أخرى.
showOwmStationLink : صحيح أم خطأ. ما إذا كان سيتم ربط اسم المدينة بـ OWM.
showWindSpeed : "السرعة" أو "beaufort" أو "كلاهما" . إظهار سرعة الرياح كسرعة في وحدة السرعة أو في سكالا بوفورت أو كليهما.
showWindDirection : 'deg' أو 'desc' أو 'كلاهما' . أظهر اتجاه الرياح كدرجة أو وصف (على سبيل المثال شمال شرق) أو كليهما.
showTimestamp : صحيح أم خطأ. ما إذا كان سيتم إظهار الطابع الزمني للبيانات.
showTempMinMax : صحيح أم خطأ. ما إذا كان سيتم إظهار درجة الحرارة الدنيا/القصوى.
useLocalTime : صحيح أو خطأ. ما إذا كنت تريد استخدام التوقيت المحلي أو UTC للطابع الزمني.
حجم العنقود : العدد ( 150 ). إذا كانت بعض المدن قريبة جدًا من بعضها البعض، فهي مخفية. في منطقة بحجم بكسلات حجم الكتلة * حجم الكتلة بكسل يتم عرض مدينة واحدة فقط. إذا قمت بتكبير سوف تظهر المدن المخفية.
imageUrlCity : عنوان URL ( 'https://openweathermap.org/img/w/{icon}.png' ). قالب URL لصور حالة الطقس للمدن. سيتم استبدال {icon} بخاصية Icon الخاصة ببيانات المدينة. راجع http://openweathermap.org/img/w/ للاطلاع على بعض الصور القياسية.
عرض الصورة : العدد ( 50 ). عرض صورة حالة الطقس في المدينة.
ارتفاع الصورة : العدد ( 50 ). ارتفاع صورة حالة الطقس في المدينة.
وظيفة العلامة : الوظيفة ( خالية ). وظيفة محددة من قبل المستخدم لإنشاء العلامة. يحتاج إلى معلمة واحدة لبيانات المدينة.
وظيفة منبثقة : وظيفة ( خالية ). وظيفة محددة من قبل المستخدم لإنشاء النوافذ المنبثقة. يحتاج إلى معلمة واحدة لبيانات المدينة.
التخزين المؤقت : صحيح أو خطأ. استخدام التخزين المؤقت لبيانات الطقس الحالية. تتم إعادة تحميل البيانات المخزنة مؤقتًا عندما تكون قديمة جدًا أو عندما لا يتناسب المربع المحيط الجديد مع المربع المحيط المخزن مؤقتًا.
ذاكرة التخزين المؤقتMaxAge : الرقم ( 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 ) ;