אריחים של איכות האוויר ושל אבקנים

מטרה

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

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

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

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

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

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

הטמעה

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

כרטיסי מידע של מפת חום זמינים לפי סוגים

Air Quality API

‫- UAQI_RED_GREEN (UAQI, פלטת צבעים אדום-ירוק): פלטת צבעים אדום-ירוק של מדד איכות האוויר האוניברסלי.
- UAQI_INDIGO_PERSIAN (UAQI, indigo-persian palette): Universal Air Quality Index indigo-persian palette.
- 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 יוצגו מעל משבצות מפת החום (בניגוד לשכבות-על בהתאמה אישית של Maps JavaScript)

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.

בדוגמה הבאה נעשה שימוש ב-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 כדי ליצור Mask מעל Air Quality TileLayer

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

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

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

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

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

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

  חשוב: רזולוציית המשבצות של ה-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:'best-available' ל-refinementStrategy:'no-overlap'.

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

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

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

אתם יכולים להשתמש בספרייה Luma.gl וב-method‏ readPixelsToArray שלה באירוע onClick שמוקצה כ-prop לשכבת 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 Maps Platform Solutions Engineer