مربّعات جودة الهواء وحبوب اللقاح

الهدف

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

alt_text

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

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

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

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

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

التنفيذ

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

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

Air Quality API

- UAQI_RED_GREEN (UAQI، لوحة الألوان الحمراء والخضراء): لوحة الألوان الحمراء والخضراء لمؤشر جودة الهواء العالمي.
- 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;

تطبيق قناع متّجه

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

  • في منطقة معيّنة:

    • استخدِم deck.gl GeoJson لإنشاء قناع فوق 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.

    ملاحظة مهمة: تظل مربّعات واجهات برمجة التطبيقات بدقة 256 × 256 بكسل، ولكن سيسمح لك تعديل العرض المرئي بزيادة عدد طلبات المربّعات أو تقليله لتغطية إطار عرض الخريطة بأكمله.

    (تأكَّد من أنّها تعمل مع 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"