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

מטרה

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

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

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

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

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

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

הטמעה

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

משבצות מפת חום זמינות לפי סוגים

Air Quality API

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

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

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

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

• משתמשים ב-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;

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

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

• באזור מסוים:

משתמשים ב-package.gl GeoJson כדי ליצור מסכה מעל ה-Air Quality TileLayer.

בדוגמה הבאה נעשה שימוש בקובץ גיאוjson מרובה פוליגונים בצרפת

// 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 (שכבת הזאת)

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

ניהול בקשות 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 ל-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
        ...
    })

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

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

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

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

אתם יכולים להשתמש בספריית Luma.gl ובשיטת readPixelsToArray שלה באירוע onClick שהוקצה כתומך לשכבה deck.gl.

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

תורמים

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

תומאס אנגלרט | מהנדסי פתרונות פלטפורמה של מפות Google