جودة الهواء وحبوب اللقاح في المناطق والطرق
الهدف
توفّر واجهات برمجة التطبيقات Air Quality وPollen فرصًا رائعة لإضافة المزيد من الإحصاءات إلى رحلة أو خريطة في أي موقع جغرافي معيّن. هناك طريقتان لاستخدام البيانات المتاحة من واجهات برمجة التطبيقات هذه: الفهرس كنص أو مربّعات خريطة الحرارة كصور نقطية.
أثناء استخدام نقاط نهاية واجهات برمجة التطبيقات لشرائح الخريطة الحرارية، قد تواجه بعض التحديات أثناء تحميل شرائح البيانات النقطية الفردية، مثل:
- كيف يمكن تحميل المربّعات على خريطة Google على الويب؟ (للالتزام أيضًا ببنود استخدام واجهات برمجة التطبيقات)
- كيف يمكن إدارة عدد الطلبات أثناء التجربة؟
- كيف يمكن قراءة قيم المربّعات؟
أمثلة لحالات الاستخدام
سيتم عرض نماذج لحالات الاستخدام لمحاولة الإجابة عن الأسئلة أعلاه.
- جودة الهواء وحبوب اللقاح في منطقة معيّنة: يمكنك عرض بيانات شرائح الخريطة الحرارية (الظروف الحالية) المركّزة داخل مضلّع واحد أو عدّة مضلّعات مخصّصة.
- جودة الهواء وحبوب اللقاح على طول المسار: يمكنك عرض شرائح الخريطة الحرارية (الظروف الحالية) والبيانات النقطية التي تمّ ربطها بنقاط الطريق على المسارات.
التنفيذ
ستتعرّف على المربّعات المتاحة وكيفية تحميلها في تجربة الويب. ستتعرّف أيضًا على الإجراءات التي يمكن اتّخاذها لإدارة عدد الطلبات في سيناريو يتم فيه تحميل المربّعات على خريطة. أخيرًا، سيتم عرض كيفية قراءة المربّعات.
مربّعات الخرائط الحرارية المتوفّرة حسب الأنواع
Air Quality API
- UAQI_RED_GREEN (مؤشر جودة الهواء العالمي، لوحة الألوان الأحمر والأخضر): لوحة الألوان الأحمر والأخضر لمؤشر جودة الهواء العالمي
- UAQI_INDIGO_PERSIAN (مؤشر جودة الهواء العالمي، لوحة الألوان الهندية الفارسية): لوحة الألوان الهندية الفارسية لمؤشر جودة الهواء العالمي.
- PM25_INDIGO_PERSIAN: لوحة ألوان مؤشر PM2.5 باللون الأزرق الداكن الفارسي
- GBR_DEFRA: لوحة ألوان مؤشر جودة الهواء اليومي (المملكة المتحدة)
- DEU_UBA: لوحة ألوان مؤشر جودة الهواء المحلي في ألمانيا
- CAN_EC: لوحة ألوان مؤشر الصحة لجودة الهواء في كندا
- FRA_ATMO: لوحة ألوان مؤشر جودة الهواء في فرنسا
- US_AQI: لوحة ألوان مؤشر جودة الهواء في الولايات المتحدة.
Pollen API
- TREE_UP: سيمثّل نوع خريطة التمثيل اللوني خريطة بيانية لفهرسة الأشجار.
- GRASS_UPI: سيمثّل نوع خريطة التمثيل اللوني خريطة بيانية لمؤشر العشب.
- WEED_UPI: سيمثّل نوع الخريطة الحرارية خريطة بيانية لمؤشر الأعشاب الضارة.
عرض مربّعات خريطة التمثيل اللوني في الويب
حمِّل المربّعات وطبِّق قناعًا مخطّطًا لعرض المناطق المطلوبة فقط من مساحة عرض الخريطة.
تحميل المربّعات
- استخدِم واجهة برمجة تطبيقات JavaScript لخرائط Google لتحميل الخريطة الأساسية من Google وتحميل مكتبة deckgl للاستعداد لتحميل صور الشبكة المركّبة.
- استخدِم TileLayer في deck.gl لتحميل شرائح خريطة الحرارة لجودة الهواء . سيؤدي ذلك إلى عرض تصنيفات الخريطة الأساسية على "خرائط Google" فوق مربّعات خريطة الحرارة (على عكس العناصر المتراكبة المخصّصة لتطبيق JavaScript في "خرائط Google").
import { TileLayer } from "deck.gl"; import { GoogleMapsOverlay } from "@deck.gl/google-maps"; // const TileLayer = deck.TileLayer; // const GoogleMapsOverlay = deck.GoogleMapsOverlay; // Initialize and add the map function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40, lng: -110 }, zoom: 4, }); const apiKey = 'YOUR_API_KEY'; const airqualityType = 'UAQI_RED_GREEN' // AirQuality API heatmap type const deckOverlay = new GoogleMapsOverlay({ layers: [ // Heatmap Tiles layer new TileLayer({ id: 'heatmap-tiles', data: 'https://airquality.googleapis.com/v1/mapTypes/'+ heatmapType + +'/heatmapTiles/{z}/{x}/{y}?key=' + apiKey, ... }) ], }); deckOverlay.setMap(map); } window.initMap = initMap;
تطبيق قناع متجه
يمكنك إخفاء أي جزء من مربّعات خريطة الحرارة أو إظهاره. ملاحظة مهمة: ستحتاج إلى الحصول على البيانات التي سيتم استخدامها لإنشاء قناع متّجه يتم تطبيقه على مربّعات خريطة الحرارة.
- في منطقة:
استخدِم GeoJson في deck.gl لإنشاء قناع على طبقة Air Quality TileLayer.
يستخدم المثال أدناه ملف geojson متعدد الأضلاع لفرنسا.
// geojson sample { "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]] }, "properties": { "name": "France" } }
في ما يلي مرجع لتنفيذ deckgl:
// Loaded layers in maps overlay const deckOverlay = new GoogleMapsOverlay({ layers: layers }); const MaskExtension = deck.MaskExtension; // or import extension ... // As part of object containing the different layers const layers = [ // Masking layer new GeoJsonLayer({ id: 'country-vector', operation: 'mask', data: "geojson.json", // <-- any custom geometry }) ... ... // Heatmap Tiles layer new TileLayer({ id: 'heatmap-tiles', maskId: 'country-vector', // <-- same as mask id extensions: [new MaskExtension()], // <-- enable mask extension ... }) ]
- على طول مسار: استخدِم deck.gl مع TripsLayer لإنشاء قناع على طبقة Air Quality TileLayer
مربّع خريطة الحرارة لجودة الهواء أثناء رحلة
إدارة طلبات البيانات من واجهة برمجة التطبيقات والتكلفة
على الرغم من أنّ السلوك التلقائي للمتصفح هو عادةً تخزين جميع المربّعات المحمَّلة في مساحة التخزين المحلية (خلال الجلسة نفسها)، يمكنك إجراء المزيد من التحسينات:
- حصر منطقة التحميل: أنشئ مربّع حدود (باللون الأحمر) وحدِّده للطبقة، ولن يتم تحميل سوى مربّعات خريطة الحرارة (باللون الأزرق) التي تغطي مربّع الحدود عند أي مستوى تكبير معيّن.
مربّع الحدود (باللون الأحمر)، مربّعات خريطة الحرارة (باللون الأزرق)
// Heatmap Tile layer new TileLayer({ id: 'heatmap-tiles', extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng ... })
- اضبط حجم مربّع العرض المرئي لتغطية إطار العرض بالكامل في أي مستوى تكبير معيّن، ويُنصح باستخدام حجم يتراوح بين 256 و1024.
ملاحظة مهمة: تظلّ شرائح واجهات برمجة التطبيقات بدقة 256x256، ولكن سيتيح لك تعديل العرض المرئي زيادة أو تقليل عدد طلبات الشرائح لتغطية مساحة العرض الكاملة للخريطة.
(تأكّد من أنّه يعمل مع minZoom وmaxZoom في "خرائط Google"، أي أنّ
tilesize:1024
لن تحمّل المربّعات عند التكبير 0 أو 1).
مساحة العرض مع مربّعات بحجم 256×256 بكسل في مقابل 512×512 بكسل
// Heatmap Tile layer new TileLayer({ id: 'heatmap-tiles', tilesize:256, // <-- change to 512 for instance ... })
قراءة قيم وحدات البكسل
لعرض القيمة المقابلة على مقياس ألوان
يمكنك استخدام مكتبة Luma.gl وطريقة readPixelsToArray عند حدوث حدث onClick تم تعيينه كخاصية لطبقة deck.gl.
قيمة البكسل: rgba(128,0,0,255)
منخفضة
عالية
// Uint8Array pixel sample import { readPixelsToArray } from "@luma.gl/core"; ... // assign on the TileLayer new TileLayer({ id: 'heatmap-tiles', ... onClick: ({ bitmap, layer }) => { if (bitmap) { const pixel = readPixelsToArray(layer.props.image, { sourceX: bitmap.pixel[0], sourceY: bitmap.pixel[1], sourceWidth: 1, sourceHeight: 1 }); // console.log("color picked:"+ pixel); } } })
الخاتمة
لقد اكتشفت كيف يمكن أن تكون نقاط نهاية واجهة برمجة التطبيقات الخاصة بشرائح خريطة الحرارة لجودة الهواء وحبوب اللقاح:
- تم تحميلها على خريطة Google على الويب مع التأكّد أيضًا من أنّها متوافقة مع بنود الاستخدام
- محسَّنة لمطابقة حالة الاستخدام
- قراءة قيم المربّعات
الإجراءات التالية
مراجع إضافية مقترَحة:
المساهمون
المؤلفون الرئيسيون:
توماس أنغلارت | مهندس حلول في "منصة خرائط Google"