جودة الهواء وحبوب اللقاح في المناطق والطرق

الهدف

توفّر واجهات برمجة التطبيقات Air Quality وPollen فرصًا رائعة لإضافة المزيد من الإحصاءات إلى رحلة أو خريطة في أي موقع جغرافي معيّن. هناك طريقتان لاستخدام البيانات المتاحة من واجهات برمجة التطبيقات هذه: الفهرس كنص أو مربّعات خريطة الحرارة كصور نقطية.

alt_text

أثناء استخدام نقاط نهاية واجهات برمجة التطبيقات لشرائح الخريطة الحرارية، قد تواجه بعض التحديات أثناء تحميل شرائح البيانات النقطية الفردية، مثل:

  • كيف يمكن تحميل المربّعات على خريطة 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: سيمثّل نوع الخريطة الحرارية خريطة بيانية لمؤشر الأعشاب الضارة.

عرض مربّعات خريطة التمثيل اللوني في الويب

حمِّل المربّعات وطبِّق قناعًا مخطّطًا لعرض المناطق المطلوبة فقط من مساحة عرض الخريطة.

تحميل المربّعات 

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.

alt_text

يستخدم المثال أدناه ملف 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

مربّع خريطة الحرارة لجودة الهواء أثناء رحلة

alt_text

إدارة طلبات البيانات من واجهة برمجة التطبيقات والتكلفة

على الرغم من أنّ السلوك التلقائي للمتصفح هو عادةً تخزين جميع المربّعات المحمَّلة في مساحة التخزين المحلية (خلال الجلسة نفسها)، يمكنك إجراء المزيد من التحسينات:

  • حصر منطقة التحميل: أنشئ مربّع حدود (باللون الأحمر) وحدِّده للطبقة، ولن يتم تحميل سوى مربّعات خريطة الحرارة (باللون الأزرق) التي تغطي مربّع الحدود عند أي مستوى تكبير معيّن.

مربّع الحدود (باللون الأحمر)، مربّعات خريطة الحرارة (باللون الأزرق)

alt_text 

 // 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 بكسل

alt_text alt_text 



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

alt_text

منخفضة alt_text عالية 

  // 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"