איכות האוויר והאבקה באזורים ובמסלולים

מטרה

ממשקי ה-API של איכות האוויר ושל האבק מספקים הזדמנויות נהדרות להוסיף תובנות נוספות לנסיעה או למפה בכל מיקום נתון. יש שתי דרכים לצרוך את הנתונים שזמינים מממשקי ה-API האלה: כטקסט באינדקס או כתמונות רסטר של משבצות של מפת חום.

כשמשתמשים בנקודות הקצה של ממשקי ה-API של השבבים של מפות החום, יכול להיות שתתקלו בכמה אתגרים בזמן טעינת השבבים הבודדים של הרשתות הרסטר, למשל:

• איך אפשר לטעון את המשבצות במפה של Google באינטרנט? (גם כדי לעמוד בתנאי השימוש של ממשקי ה-API)
• איך מנהלים את מספר הבקשות במהלך החוויה?
• איך קוראים את הערכים של המשבצות?

תרחישים לדוגמה

יוצגו לכם תרחישים לדוגמה כדי לענות על השאלות שלמעלה.

• איכות האוויר והאבק באזור: הצגה חזותית של נתוני ראסטר של משבצות מפת חום (התנאים הנוכחיים) בתוך פוליגון אחד או יותר בהתאמה אישית.
• איכות אוויר ואבקנים לאורך המסלול: אפשר להציג נתוני ראסט של משבצות מפת חום (התנאים הנוכחיים) שממופים בנקודות ציון במסלולים.

הטמעה

כאן תלמדו אילו משבצות זמינות ואיך אפשר לטעון אותן בחוויית שימוש באינטרנט. בנוסף, נסביר איך אפשר לנהל את מספר הבקשות בתרחיש שבו המשבצות נטענות במפה. בסיום, תוצג לכם הוראות לקריאת המשבצות.

אריחי מפת החום הזמינים לפי סוגים

Air Quality API

- UAQI_RED_GREEN (UAQI, לוח צבעים אדום-ירוק): לוח צבעים אדום-ירוק של מדד איכות האוויר האוניברסלי.
- UAQI_INDIGO_PERSIAN (UAQI, צבעים שחורים-כחולים): Universal Air Quality Index (מדד איכות האוויר האוניברסלי), צבעים שחורים-כחולים.
- PM25_INDIGO_PERSIAN: צבעים של אינדיגו פרסי באינדקס PM2.5.
- GBR_DEFRA: צבעים של מדד איכות האוויר היומי (בריטניה).
- DEU_UBA: צבעים של מדד איכות האוויר המקומי בגרמניה.
- CAN_EC: לוח הצבעים של מדד איכות האוויר והבריאות בקנדה.
- FRA_ATMO: ערכת הצבעים של מדד איכות האוויר בצרפת.
- US_AQI: ערכת הצבעים של מדד איכות האוויר בארה"ב.

Pollen API

- TREE_UP: סוג מפת החום ייצג מפה גרפית של אינדקס עץ.
- GRASS_UPI: סוג מפת החום ייצג מפה גרפית של מדד דשא.
- WEED_UPI: סוג מפת החום ייצג מפה גרפית של מדד עשבים שוטים.

הצגת משבצות של מפת חום באינטרנט

מעמיסים את המשבצות ומחילים מסכת וקטור כדי להציג רק את האזורים הרצויים בחלון התצוגה של המפה.

טעינת כרטיסי המידע

• משתמשים ב-Maps JavaScript API כדי לטעון את המפה הבסיסית של 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;

החלת מסכה וקטורית

אפשר להסתיר או להציג באופן חזותי כל חלק של משבצות מפת החום. חשוב: תצטרכו לקבל את הנתונים שישמשו ליצירת מסכת הווקטור שתחול על המשבצות של מפת החום.

• באזור:

משתמשים ב-deck.gl GeoJson כדי ליצור מסכה מעל שכבת האריחים של איכות האוויר.

בדוגמה הבאה נעשה שימוש ב-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 שלו כדי ליצור מסכה מעל שכבת האריחים של איכות האוויר.

משבצת של מפת חום של איכות האוויר במהלך נסיעה

ניהול העלויות והבקשות של ממשקי ה-API

ברירת המחדל של הדפדפן היא בדרך כלל לשמור במטמון את כל המשבצות שהועלו באחסון המקומי (באותו סשן), אבל אפשר לבצע אופטימיזציה נוספת:

• הגבלת אזור הטעינה: יוצרים תיבה תוחמת (באדום) ומקצים אותה לשכבה. בכל רמת זום נתונה, רק אריחי מפת החום (באפור) שמכסים את התיבה התוחמת ייטענו.

התיבה התוחמת (bounding box) (באדום), אריחי מפת החום (בכחול)

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })

• מגדירים את גודל המשבצת בתצוגה החזותית כך שתכלול את כל אזור התצוגה בכל רמת זום נתונה. מומלץ להגדיר גודל של בין 256 ל-1,024.

  חשוב: המשבצות של ממשקי ה-API נשארות ברזולוציה של 256x256, אבל התאמת התצוגה החזותית תאפשר לכם להגדיל או להקטין את מספר הבקשות למשבצות כדי לכסות את כל אזור התצוגה של המפה.

  (חשוב לוודא שהיא פועלת עם minZoom ו-maxZoom של מפות Google, כלומר: tilesize:1024 לא יטעמו משבצות ברזולוציה 0 או 1).

חלון תצוגה עם משבצות בגודל 256x256 פיקסלים לעומת 512x512 פיקסלים

    // Heatmap Tile layer
    new TileLayer({
        id: 'heatmap-tiles',
        tilesize:256, // <-- change to 512 for instance
        ...
    })

טיפ: כדי למנוע התנגשות חזותית בין המשבצות, כדאי לשנות את הגדרת העיבוד של המשבצות בשכבה באמצעות refinementStrategy:'no-overlap' במקום 'best-available'.

קריאת ערכי פיקסלים

אזהרה: אפשר לקרוא ולשמור בקובץ האחסון (cache) למשך שעה אחת (לא ללא הגבלת זמן) את המשבצות של מפת החום או את הערכים שנקראו מפיקסלים ספציפיים שמופיעים במשבצות של Air Quality API או Pollen API. כדי לאמת את ההטמעה, יש לעיין בתנאים הספציפיים ל-API שמפורטים בקטע '16 Air Quality API'

כדי להציג את הערך המתאים בסולם צבעים

אפשר להשתמש בספרייה 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);
    }
  }
  })

סיכום

למדתם איך נקודות הקצה של ממשקי ה-API של משבצות מפת החום של איכות האוויר ושל האבק יכולות:

• נטענים במפה של Google באינטרנט, תוך הקפדה על התנאים וההגבלות
• מותאם לתרחיש לדוגמה שלכם
• קריאת הערכים של המשבצות

הפעולות הבאות

מקורות מידע נוספים:

• הצגת מידע על איכות האוויר ב-'מקומות' באמצעות Air Quality API

תורמים

המחברים הראשיים:

Thomas Anglaret | מהנדס פתרונות בפלטפורמה של מפות Google