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

الهدف

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

alt_text

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

  • كيف أحمّل المربّعات على خريطة Google على الويب؟ (أيضًا للالتزام ببنود استخدام واجهات برمجة التطبيقات)
  • كيف يمكن إدارة عدد الطلبات أثناء التجربة؟
  • كيف يمكن قراءة قيم المربّعات؟

أمثلة لحالات الاستخدام

سيتم تقديم نماذج لحالات الاستخدام لمحاولة الإجابة عن الأسئلة أعلاه.

  • جودة الهواء وحبوب اللقاح في منطقة معيّنة: يمكنك عرض بيانات شرائح الخريطة الحرارية (الظروف الحالية) المركّزة داخل مضلّع واحد أو عدّة مضلّعات مخصّصة.
  • جودة الهواء وحبوب اللقاح على طول المسار: يمكنك عرض شرائح الخريطة الحرارية (الظروف الحالية) والبيانات النقطية التي تمّ ربطها بنقاط الطريق على المسار.

التنفيذ

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

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

Air Quality API

‫- UAQI_RED_GREEN (مؤشر جودة الهواء العالمي، لوحة الألوان الأحمر والأخضر): لوحة الألوان الأحمر والأخضر لمؤشر جودة الهواء العالمي
- UAQI_INDIGO_PERSIAN (UAQI، لوحة ألوان فارسية أبيضة): لوحة فارسية هندية لمؤشر جودة الهواء العالمي.
- 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 لإنشاء قناع فوق 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"