המחשה חזותית של נתונים באמצעות הפלטפורמה של מפות Google ו-bucket.gl

המחשה חזותית של נתונים באמצעות הפלטפורמה של מפות Google ו-bucket.gl

מידע על Codelab זה

subjectהעדכון האחרון: מאי 11, 2022
account_circleנכתב על ידי גוגלר

1.‏ לפני שמתחילים

קוד Lab זה מלמד אתכם איך ליצור תצוגה חזותית של נתונים גיאו-מרחביים בנפח גבוה באמצעות ה-API של מפות Google JavaScript ו-bucket.GL

d01802e265548be1.png

דרישות מוקדמות

הפעולות שתבצעו:

  • שילוב של מפות Google עםדק.gl
  • ייבוא של מערך נתונים למפה מ-BigQuery.
  • מגדירים את נקודות הנתונים במפה.

מה תצטרך להכין

  • חשבון Google.
  • עורך טקסט או IDE לבחירתך
  • ידע בסיסי ב-JavaScript, ב-HTML וב-CSS

2.‏ הגדרת הסביבה

תחילת העבודה עם הפלטפורמה של מפות Google

אם עוד לא השתמשתם בפלטפורמה של מפות Google, פעלו לפי השלבים הבאים:

  1. יוצרים חשבון לחיוב.
  2. יוצרים פרויקט.
  3. מפעילים ממשקי API וערכות SDK של מפות Google.
  4. יוצרים מפתח API.

הורדת Node.js

אם עדיין לא עשיתם זאת, נכנסים לכתובת https://nodejs.org/, ומורידים ומתקינים את זמן הריצה של Node.js במחשב.

Node.js כולל npm, מנהל חבילה שעליך להתקין את התלות ב-codelab זה.

הגדרת הפרויקט למתחילים

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

תחילה, מבצעים את הפעולות הבאות:

  1. שכפול או הורדה של מאגר הנתונים הזה.
  2. בשורת הפקודה, עוברים אל הספרייה /starter, שמכילה את מבנה הקבצים הבסיסי שצריך להשלים כדי של שיעור הקוד הזה.
  3. התקנת יחסי תלות מ-npm באמצעות הפקודה הבאה:
npm install
  1. מריצים את פרויקט Starter בדפדפן שלכם באמצעות Webpack Dev Server על ידי הרצת הפקודה הבאה:
npm start

    The starter app opens in your browser and displays a map.
  1. יש לפתוח את הפרויקט ב-IDE שלך ולעבור לספרייה של /starter/src.
  2. פותחים את הקובץ app.js.

צריך לבצע את כל התכנות בקטע הזה של הקוד בקובץ:

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

לא נעשה דבר עם שאר הקוד בקובץ שטוען את ממשק ה-API של מפות Google ואת המפה:

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}
  1. מחליפים את YOUR API KEY במפתח ה-API בפועל, שנוצר כשהגדרתם את הסביבה:
const googleMapsAPIKey = 'YOUR API KEY';

3.‏ ייצוא נתונים מ-BigQuery

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

משתמשים ב-BigQuery כדי לייצא מערך נתונים שזמין לציבור באופן ציבורי, וכולל נתוני מיקום עבור עיר האופניים של ניו יורק,תוכנית שיתוף אופניים עם 14, 500 זוגות אופניים ו-900 מיקומים על ידי ביצוע השלבים הבאים:

  1. נכנסים אל Cloud Console.
  2. לוחצים על Navigation menu 41e8e87b85b0f93.png > BigQuery.
  3. בעורך השאילתות, מזינים את השאילתה הבאה ולוחצים על Run (הרצה):
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. כאשר השאילתה מסתיימת, לוחצים על שמירת התוצאות ואז בוחרים באפשרות JSON (קובץ מקומי) כדי לייצא את קבוצת התוצאות. נותנים לקובץ את השם stations.json ושומרים אותו בספרייה /src.

2f4932829f7e1f78.png

עכשיו, לאחר שקיבלתם את הנתונים, תוכלו ליצור את התצוגה החזותית הראשונה באמצעות console.gl.

4.‏ הגדרת התצוגה החזותית

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

כדי ליצור תצוגה חזותית, יש צורך בשתי כיתות – GoogleMapsOverlay ואחת משכבות הוויזואליות השונות.

כדי להתחיל, יש ליצור מופע של ScatterplotLayer – שמציג את נקודות הנתונים כעיגולים במפה:

  1. אפשר לייבא את הכיתה ScatterplotLayer.C דק'. על ידי הוספת הקטע הבא לראש הרשימה app.js:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. מגדירים את נכסי השכבות על ידי בחירה מתוך שני סוגי הנכסים הזמינים לשכבת פיזור.pl_gl's.

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

לפניך פירוט של המאפיינים שבהם אתה משתמש בקטע הקוד הבא:

  • id מאפשר לרינדור לזהות שכבות מסיבות שונות, כמו צביעה מחדש ועדכונים אחרים בהצגה החזותית. לכל השכבות שלדק.gl נדרש מזהה ייחודי שאתה מקצה.
  • data מציין את מקור הנתונים של הוויזואליזציה. יש להגדיר אותו ל-‘./stations.json&#39, כדי להשתמש במערך הנתונים שייצאת מ-BigQuery.
  • getPosition מאחזר כל מיקום של אובייקט ממקור הנתונים. שימו לב שהערך של הנכס הוא פונקציה. דק.gl משתמש בפונקציה כדי לחזור על כל שורה במערך הנתונים. הפונקציה מורה לרינדור איך לגשת לקווי הרוחב והאורך של נקודת הנתונים בכל שורה. במערך הנתונים הזה, הנתונים בכל שורה הם אובייקט JSON עם מיקום שמוגדר במאפיינים של קו רוחב וקו אורך, כך שהפונקציה שאתם מספקים ל-getPosition היא d => [parseFloat(d.longitude), parseFloat(d.latitude)].
  • getRadius מגדיר את רדיוס כל אובייקט במטרים. במקרה זה, הרדיוס מוגדר ל-d => parseInt(d.capacity), שמגדיר את גודל נקודות הנתונים על בסיס הקיבולת של כל תחנה.
  • המדיניות stroked קובעת אם לנקודות הנתונים שעברו רינדור יש קו על הקצוות החיצוניים.
  • getFillColor מגדירה את צבע המילוי של כל נקודה על הגרף כקוד צבע RGB.
  • getLineColor מגדירה את צבע הקווים של כל נקודה על הגרף כקוד צבע RGB.
  • radiusMinPixels מגדיר את הרוחב המינימלי של פיקסלים לכל נקודת נתונים. ככל שהמשתמשים מגדילים את התצוגה או מגדילים את התצוגה, OpenGL.gl משנה באופן אוטומטי את קנה המידה של נקודות הנתונים כדי שהתצוגה החזותית תוצג במפה באופן ברור. המאפיין הזה מאפשר לך לשלוט במידה שבה הגודל משתנה.
  • radiusMaxPixels מגדיר את רוחב הפיקסלים המקסימלי לכל נקודה על הגרף.
const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],    
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};
  1. יוצרים מכונה של Class.gl'ScatterplotLayer:
const scatterplotLayer = new ScatterplotLayer(layerOptions);

לאחר השלמת הקטע הזה, הקוד אמור להיראות כך:

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5.‏ החלה של התצוגה החזותית במפה

עכשיו אפשר להחיל את המופע שלך ב-ScatterplotLayer על הכיתה עם המחלקה GoogleMapsOverlay, שמשתמשת ב-API של ממשק ה-API של JavaScript OverlayView כדי להחדיר הקשר WebGL מעל המפה.

אחרי שיוצרים את השכבות האלה, אפשר להעביר כל אחת מהשכבות החזותיות של דק'.pl' אל GoogleMapsOverlay, שמעבדת את השכבה ומסנכרנת אותה עם המפה.

כדי להחיל את ScatterplotLayer על המפה, צריך לבצע את השלבים הבאים:

  1. ייבוא הכיתה שלדק.gl'GoogleMapsOverlay:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. יוצרים מופע של המחלקה GoogleMapsOverlay ומעבירים אותה למופע (scatterplotLayer) שיצרתם קודם לכן במאפיין layers של אובייקט:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. החלת שכבת העל על המפה:
 googleMapsOverlay.setMap(map);

לאחר השלמת הקטע הזה, הקוד אמור להיראות כך:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

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

d01802e265548be1.png

6.‏ מזל טוב

מעולה! הפקתם תצוגה חזותית של נפח הנתונים של ניו יורק סיטיפס, במפות Google וב-bucket.gl.

מידע נוסף

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

על ידי console.gl תוכלו להציג שכבות רבות של תצוגה חזותית, שבהן ניתן להשתמש כדי להציג נתונים למשתמשים שלך. למידע נוסף על השימוש ב-pla.gl עם API של JavaScript במפות Google, ניתן לעיין בקישורים הבאים:

bug_report דיווח על טעות