تمام عصام نشر 24 أغسطس أرسل تقرير مشاركة نشر 24 أغسطس (معدل) لقد بحثت كثيرا و لم اجد الطريقة الصحيح لكيف استخدام و انشاء خريطة رادرار المطر او السحب من rainviewer لقد وجدت هذه الصفحة https://www.rainviewer.com/sa/api/single-radar-data.html و https://www.rainviewer.com/sa/api/weather-maps-api.html و كذلك وجدت https://api.rainviewer.com/public/weather-maps.json عند فتحه تظهر {"version":"2.0","generated":1724487332,"host":"https://tilecache.rainviewer.com","radar":{"past":[{"time":1724479800,"path":"/v2/radar/1724479800"},{"time":1724480400,"path":"/v2/radar/1724480400"},{"time":1724481000,"path":"/v2/radar/1724481000"},{"time":1724481600,"path":"/v2/radar/1724481600"},{"time":1724482200,"path":"/v2/radar/1724482200"},{"time":1724482800,"path":"/v2/radar/1724482800"},{"time":1724483400,"path":"/v2/radar/1724483400"},{"time":1724484000,"path":"/v2/radar/1724484000"},{"time":1724484600,"path":"/v2/radar/1724484600"},{"time":1724485200,"path":"/v2/radar/1724485200"},{"time":1724485800,"path":"/v2/radar/1724485800"},{"time":1724486400,"path":"/v2/radar/1724486400"},{"time":1724487000,"path":"/v2/radar/1724487000"}],"nowcast":[{"time":1724487600,"path":"/v2/radar/nowcast_c277f4444b28"},{"time":1724488200,"path":"/v2/radar/nowcast_c2771b16e7ac"},{"time":1724488800,"path":"/v2/radar/nowcast_c2774d641e05"}]},"satellite":{"infrared":[{"time":1724479800,"path":"/v2/satellite/74d1db794db1"},{"time":1724480400,"path":"/v2/satellite/fc79b636f1b0"},{"time":1724481000,"path":"/v2/satellite/8d0d6cbef209"},{"time":1724481600,"path":"/v2/satellite/dbe1699d2f79"},{"time":1724482200,"path":"/v2/satellite/945aa568e0fc"},{"time":1724482800,"path":"/v2/satellite/1d77942251f2"},{"time":1724483400,"path":"/v2/satellite/1a5413b2ff29"},{"time":1724484000,"path":"/v2/satellite/a2e9cad3283e"},{"time":1724484600,"path":"/v2/satellite/0e03dc39bd2f"},{"time":1724485200,"path":"/v2/satellite/41891264b535"},{"time":1724485800,"path":"/v2/satellite/ea77e0fc095b"},{"time":1724486400,"path":"/v2/satellite/339139b8ce98"},{"time":1724487000,"path":"/v2/satellite/929141138305"}]}} و هذا كود لخريطة المطر و السحب لكن لا نتيجة <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>خريطة رادار المطر والسحب</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <style> #map { height: 600px; width: 100%; } .leaflet-control-attribution { display: none; /* إخفاء حقوق الخريطة الافتراضية */ } </style> </head> <body> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script> // إعداد الخريطة وتحديد الموقع الافتراضي على السعودية var map = L.map('map').setView([24.7, 46.7], 6); // إضافة طبقة خريطة سوداء من CartoDB Dark Matter L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map); var baseUrl = "https://tilecache.rainviewer.com"; var pastRadarLayers = []; var satelliteLayers = []; var currentRadarLayer, currentSatelliteLayer; // دالة لتحميل البيانات وتحديث الخريطة function updateMap() { fetch('https://api.rainviewer.com/public/weather-maps.json') .then(response => response.json()) .then(data => { if (!data || !data.radar || data.radar.past.length === 0) { alert("لا توجد بيانات متاحة حاليًا لرادار المطر."); return; } // مسح الطبقات السابقة pastRadarLayers.forEach(layer => map.removeLayer(layer)); satelliteLayers.forEach(layer => map.removeLayer(layer)); pastRadarLayers = []; satelliteLayers = []; // إنشاء طبقات الرادار السابقة data.radar.past.forEach(function(radarData) { var tileLayer = L.tileLayer(baseUrl + radarData.path + "/256/{z}/{x}/{y}.png", { opacity: 0.5 }); pastRadarLayers.push(tileLayer); }); // إنشاء طبقات السحب من بيانات الأقمار الصناعية if (data.satellite && data.satellite.infrared.length > 0) { data.satellite.infrared.forEach(function(satelliteData) { var tileLayer = L.tileLayer(baseUrl + satelliteData.path + "/256/{z}/{x}/{y}.png", { opacity: 0.3 }); satelliteLayers.push(tileLayer); }); } else { alert("لا توجد بيانات متاحة حاليًا للسحب."); } // عرض الطبقة الأحدث (أحدث وقت) من طبقات الرادار currentRadarLayer = pastRadarLayers[pastRadarLayers.length - 1]; currentRadarLayer.addTo(map); // عرض الطبقة الأحدث من السحب if (satelliteLayers.length > 0) { currentSatelliteLayer = satelliteLayers[satelliteLayers.length - 1]; currentSatelliteLayer.addTo(map); } }) .catch(error => { alert("حدث خطأ أثناء تحميل البيانات: " + error.message); }); } // تحديث الخريطة كل 10 دقائق (600,000 مللي ثانية) setInterval(updateMap, 600000); // التحديث الأولي للخريطة عند التحميل updateMap(); </script> </body> </html> تم التعديل في 24 أغسطس بواسطة تمام عصام 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبد الوهاب بومعراف نشر 24 أغسطس أرسل تقرير مشاركة نشر 24 أغسطس أعتقد أنّ المشكلة قد تكون في طريقة بناء URL لطبقات الرادار والأقمار الصناعية هنا: var tileLayer = L.tileLayer(baseUrl + radarData.path + "/256/{z}/{x}/{y}.png", { opacity: 0.5 }); و var tileLayer = L.tileLayer(baseUrl + satelliteData.path + "/256/{z}/{x}/{y}.png", { opacity: 0.3 }); لذا يجب تعديل هذه الأسطر لتتوافق مع الصيغة الصحيحة لـ RainViewer API والصيغة الصحيحة هي: var tileLayer = L.tileLayer(baseUrl + radarData.path + "/{z}/{x}/{y}/2/1_1.png", { opacity: 0.5 }); و var tileLayer = L.tileLayer(baseUrl + satelliteData.path + "/{z}/{x}/{y}/2/1_1.png", { opacity: 0.3 }); وهذا وفقا لتوثيق RainViewer API وقد يكون السبب في عدم تحميل البيانات بشكل صحيح من API الخاص بـ RainViewer أو عدم إضافة طبقات الخريطة بشكل صحيح إلى عنصر الخريطة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
تمام عصام
لقد بحثت كثيرا و لم اجد الطريقة الصحيح لكيف استخدام و انشاء خريطة رادرار المطر او السحب من rainviewer
لقد وجدت هذه الصفحة
https://www.rainviewer.com/sa/api/single-radar-data.html
و
https://www.rainviewer.com/sa/api/weather-maps-api.html
و كذلك وجدت
https://api.rainviewer.com/public/weather-maps.json
عند فتحه تظهر
{"version":"2.0","generated":1724487332,"host":"https://tilecache.rainviewer.com","radar":{"past":[{"time":1724479800,"path":"/v2/radar/1724479800"},{"time":1724480400,"path":"/v2/radar/1724480400"},{"time":1724481000,"path":"/v2/radar/1724481000"},{"time":1724481600,"path":"/v2/radar/1724481600"},{"time":1724482200,"path":"/v2/radar/1724482200"},{"time":1724482800,"path":"/v2/radar/1724482800"},{"time":1724483400,"path":"/v2/radar/1724483400"},{"time":1724484000,"path":"/v2/radar/1724484000"},{"time":1724484600,"path":"/v2/radar/1724484600"},{"time":1724485200,"path":"/v2/radar/1724485200"},{"time":1724485800,"path":"/v2/radar/1724485800"},{"time":1724486400,"path":"/v2/radar/1724486400"},{"time":1724487000,"path":"/v2/radar/1724487000"}],"nowcast":[{"time":1724487600,"path":"/v2/radar/nowcast_c277f4444b28"},{"time":1724488200,"path":"/v2/radar/nowcast_c2771b16e7ac"},{"time":1724488800,"path":"/v2/radar/nowcast_c2774d641e05"}]},"satellite":{"infrared":[{"time":1724479800,"path":"/v2/satellite/74d1db794db1"},{"time":1724480400,"path":"/v2/satellite/fc79b636f1b0"},{"time":1724481000,"path":"/v2/satellite/8d0d6cbef209"},{"time":1724481600,"path":"/v2/satellite/dbe1699d2f79"},{"time":1724482200,"path":"/v2/satellite/945aa568e0fc"},{"time":1724482800,"path":"/v2/satellite/1d77942251f2"},{"time":1724483400,"path":"/v2/satellite/1a5413b2ff29"},{"time":1724484000,"path":"/v2/satellite/a2e9cad3283e"},{"time":1724484600,"path":"/v2/satellite/0e03dc39bd2f"},{"time":1724485200,"path":"/v2/satellite/41891264b535"},{"time":1724485800,"path":"/v2/satellite/ea77e0fc095b"},{"time":1724486400,"path":"/v2/satellite/339139b8ce98"},{"time":1724487000,"path":"/v2/satellite/929141138305"}]}}
و هذا كود لخريطة المطر و السحب لكن لا نتيجة
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>خريطة رادار المطر والسحب</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map {
height: 600px;
width: 100%;
}
.leaflet-control-attribution {
display: none; /* إخفاء حقوق الخريطة الافتراضية */
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
// إعداد الخريطة وتحديد الموقع الافتراضي على السعودية
var map = L.map('map').setView([24.7, 46.7], 6);
// إضافة طبقة خريطة سوداء من CartoDB Dark Matter
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(map);
var baseUrl = "https://tilecache.rainviewer.com";
var pastRadarLayers = [];
var satelliteLayers = [];
var currentRadarLayer, currentSatelliteLayer;
// دالة لتحميل البيانات وتحديث الخريطة
function updateMap() {
fetch('https://api.rainviewer.com/public/weather-maps.json')
.then(response => response.json())
.then(data => {
if (!data || !data.radar || data.radar.past.length === 0) {
alert("لا توجد بيانات متاحة حاليًا لرادار المطر.");
return;
}
// مسح الطبقات السابقة
pastRadarLayers.forEach(layer => map.removeLayer(layer));
satelliteLayers.forEach(layer => map.removeLayer(layer));
pastRadarLayers = [];
satelliteLayers = [];
// إنشاء طبقات الرادار السابقة
data.radar.past.forEach(function(radarData) {
var tileLayer = L.tileLayer(baseUrl + radarData.path + "/256/{z}/{x}/{y}.png", {
opacity: 0.5
});
pastRadarLayers.push(tileLayer);
});
// إنشاء طبقات السحب من بيانات الأقمار الصناعية
if (data.satellite && data.satellite.infrared.length > 0) {
data.satellite.infrared.forEach(function(satelliteData) {
var tileLayer = L.tileLayer(baseUrl + satelliteData.path + "/256/{z}/{x}/{y}.png", {
opacity: 0.3
});
satelliteLayers.push(tileLayer);
});
} else {
alert("لا توجد بيانات متاحة حاليًا للسحب.");
}
// عرض الطبقة الأحدث (أحدث وقت) من طبقات الرادار
currentRadarLayer = pastRadarLayers[pastRadarLayers.length - 1];
currentRadarLayer.addTo(map);
// عرض الطبقة الأحدث من السحب
if (satelliteLayers.length > 0) {
currentSatelliteLayer = satelliteLayers[satelliteLayers.length - 1];
currentSatelliteLayer.addTo(map);
}
})
.catch(error => {
alert("حدث خطأ أثناء تحميل البيانات: " + error.message);
});
}
// تحديث الخريطة كل 10 دقائق (600,000 مللي ثانية)
setInterval(updateMap, 600000);
// التحديث الأولي للخريطة عند التحميل
updateMap();
</script>
</body>
</html>
تم التعديل في بواسطة تمام عصامرابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.