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

מטרה

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

alt_text

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

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

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

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

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

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

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

alt_text

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

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

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

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

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 ל-1,024.

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

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

אזור תצוגה עם משבצות 256x256 פיקסלים לעומת 512x512 פיקסלים

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.

ערך Pixel: 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);
    }
  }
  })

סיכום

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

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

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

הצעות לקריאה נוספת:

תורמים

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

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