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

מטרה

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

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

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

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

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

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

הטמעה

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

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

Air Quality API

‫- UAQI_RED_GREEN (UAQI, פלטת אדום-ירוק): מדד אוניברסלי של איכות האוויר (UAQI) בפלטת אדום-ירוק.
‪- UAQI_INDIGO_PERSIAN (UAQI, indigo-persian palette): Universal Air Quality Index indigo-persian palette.
- PM25_INDIGO_PERSIAN: PM2.5 index indigo-persian palette.
- GBR_DEFRA: Daily Air Quality Index (UK) color palette.
‫- DEU_UBA: פלטת צבעים של מדד איכות האוויר המקומי בגרמניה.
‪- CAN_EC: Canadian Air Quality Health Index color palette.
‫- FRA_ATMO: פלטת הצבעים של מדד איכות האוויר בצרפת.
- US_AQI: פלטת הצבעים של מדד איכות האוויר בארה"ב.

Pollen API

‫- TREE_UP: סוג מפת החום יהיה ייצוג של מפת אינדקס של עץ.
‫- GRASS_UPI: סוג מפת החום ייצג מפה גרפית של מדד הדשא.
‪- WEED_UPI: The heatmap type will represent a weed index graphically map.

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

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

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

• משתמשים ב-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
        ...
    })

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

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

אזהרה: אפשר לקרוא ולשמור במטמון למשך שעה (לא ללא הגבלה) את משבצות המפה של חום או כל ערך שנקרא מפיקסלים בודדים שכלולים במשבצות של 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 Maps Platform Solutions Engineer