שיפור הניווט לשדות תעופה

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

כך המערכת עושה זאת:

חיפוש שדה תעופה/מקום: המשתמשים מתחילים בחיפוש של מיקום מרכזי (למשל, ‫"Indira Gandhi International Airport") באמצעות הקלט של ההשלמה האוטומטית של Google Places, שמוגבל להודו.

איתור מיקום משני: אחרי שבוחרים מיקום ראשי, הסקריפט משתמש ב-Google Places API כדי לאחזר פרטים, כולל כל 'יעד משני' שמשויך למקום הזה (כמו טרמינל 1, טרמינל 3, שערים ספציפיים וכו', אם הם זמינים בנתונים של Google).

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

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

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

ממשקי API של Google Maps Platform באפליקציית הניווט בשדה התעופה

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

1. הפעלה והצגה של המפה

הבסיס של האפליקציה הוא המפה האינטראקטיבית עצמה.

• ה-API שבו נעשה שימוש: google.maps.Map (מ-Maps JavaScript API)
• מטרה: ליצור ולהציג את המפה האינטראקטיבית בדף האינטרנט.
• פרמטרים מרכזיים:
  • ‫center: מגדיר את המרכז הגיאוגרפי הראשוני של המפה. באפליקציה הזו, ההגדרה הראשונית היא הקואורדינטות של דלהי ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
  • ‫zoom: מגדיר את רמת הזום ההתחלתית של המפה. ‫DEFAULT_ZOOM_LEVEL (15) משמש לתצוגה מקרוב.
  • ‫mapId: מזהה ייחודי של סגנון מפה שהוגדר במסוף Google Cloud.

2. חיפוש מקומות והשלמה אוטומטית

הפונקציונליות של סרגל החיפוש מבוססת על Places API.

• API Used: google.maps.places.Autocomplete (from the Places Library of the Maps JavaScript API)
• מטרה: מספקת השלמה אוטומטית של טקסט חיזוי לחיפושים גיאוגרפיים בזמן שהמשתמש מקליד, ומציעה מקומות רלוונטיים כמו שדות תעופה.
• פרמטרים מרכזיים:
  • ‫input: רכיב הקלט של HTML ‏ (#search-input) שבו המשתמש מקליד את השאילתה.
  • ‫componentRestrictions: סינון תוצאות החיפוש למדינה ספציפית. בדוגמה הזו, { country: 'in' } מגביל את התוצאות להודו.
  • ‫fields: מציין את שדות הנתונים שיוחזרו עבור המקום שנבחר. ['place_id'] משמשת בהתחלה לאחזור רק של המזהה הייחודי של המקום, כדי לבצע אופטימיזציה של העברת הנתונים.
• איך משתמשים בהשלמה אוטומטית

    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

3. אחזור מידע מפורט על מקומות וטיפול ביעדי משנה

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

• ה-API שנעשה בו שימוש: Places API (באמצעות קריאה ישירה ל-fetch אל https://places.googleapis.com/v1/places/{placeId})
• מטרה: אחזור פרטים מפורטים על מקום ספציפי, כולל שם התצוגה, הכתובת, הסוגים שלו, וחשוב מכך, subDestinations (למשל, טרמינלים נפרדים או אזורים חשובים במתחם גדול יותר כמו שדה תעופה).
• פרמטרים מרכזיים בכתובת ה-URL:
  1. ‫{placeId}: המזהה הייחודי של המקום שנבחר.
  2. ‫fields: מציין את שדות הנתונים המדויקים שיש לאחזר. האפליקציה מבקשת id,‏ displayName,‏ subDestinations,‏ types ו-formattedAddress. השלב הזה חשוב מאוד כדי לשלוט בעלויות ולקבל רק את הנתונים הנחוצים.
• איך מקבלים את subDestinations בהינתן מיקום

async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}

**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

4. המרת כתובות לקואורדינטות (geocoding) והמרת קואורדינטות לכתובות (reverse geocoding): אחזור פרטים של יעדי משנה

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

• ממשקי ה-API שנעשה בהם שימוש: google.maps.Geocoder (מ-Maps JavaScript API) ו-Geocoding API (דרך קריאה ישירה ל-fetch אל https://maps.googleapis.com/maps/api/geocode/json)
• מטרה:
  • ‫google.maps.Geocoder: משמש להמרה של placeId (שהתקבל מ-Autocomplete או מ-Places API) לקואורדינטות גיאוגרפיות (lat,‏ lng) ולחלון תצוגה, כדי שהמפה תתמרכז ותבצע זום בצורה נכונה על המקום שנבחר ועל יעדי המשנה שלו.
  • ‫Geocoding API ‏ (fetch): משמש להמרת קואורדינטות לכתובות (reverse geocoding) ולאחזור נתוני מיקום מתקדמים כמו מתארים של בניינים ונקודות ניווט.
• פרמטרים מרכזיים:
  • google.maps.Geocoder.geocode():
    • ‫placeId: מזהה המקום לגיאו-קידוד.
    • ‫location: אובייקט LatLng להמרת קואורדינטות לכתובות (reverse geocoding).
  • קריאה ל-Geocoding API fetch:
    • ‫latlng: קואורדינטות של קו הרוחב וקו האורך למיקום גיאוגרפי הפוך.
    • ‫extra_computations=BUILDING_AND_ENTRANCES: הפרמטר הקריטי הזה מבקש נתונים נוספים, במיוחד נתוני טביעות רגל של בניינים ומידע על כניסות, שמשמשים להצגת קווי מתאר של בניינים ונקודות ניווט.

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

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

5. הצגת סמנים

סמנים משמשים להדגשת מיקומים ספציפיים במפה.

• ממשקי API שנעשה בהם שימוש: google.maps.Marker (מ-Maps JavaScript API) ו-google.maps.marker.AdvancedMarkerElement עם google.maps.marker.PinElement (מספריית הסמנים של Maps JavaScript API)
• מטרה:
  • ‫google.maps.Marker: משמש לסימון הראשוני שניתן להזזה (למרות שהערך של draggable מוגדר כ-false בקוד שסופק, הוא חלק מהיכולת שלו) ולסימון בסיסי של יעדי משנה, כפי שמתואר בקטע 3.
  • ‫AdvancedMarkerElement ו-PinElement: משמשים לסימון נקודות ניווט שקל יותר להבחין בהן מבחינה ויזואלית, ומאפשרים התאמה אישית של סגנון הסיכה של הסמן.
• פרמטרים מרכזיים:
  • ‫position: הקואורדינטות של המיקום שבו יוצב הסמן.LatLng
  • ‫map: מופע המפה שבו יוצג הסמן.
  • title: הטקסט שמוצג כשמעבירים את העכבר מעל הסמן.
  • ‫icon: מאפשר להשתמש בסמלים מותאמים אישית עבור google.maps.Marker (למשל, google.maps.SymbolPath.CIRCLE עם צבעים בהתאמה אישית).
  • ‫content: עבור AdvancedMarkerElement, מאפשר הטמעה של תוכן HTML מותאם אישית, כולל PinElement לסיכות עם סגנון מוגדר מראש.
  • פרמטרים של PinElement: ‏background, ‏borderColor, ‏glyphColor, ‏scale להתאמה אישית של המראה.

6. הצגת קווי מתאר של מבנים

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

• ה-API שבו נעשה שימוש: google.maps.Data (מ-Maps JavaScript API)
• מטרה: הצגת נתונים גיאוגרפיים, כמו קווי מתאר של בניינים (מוחזרים כ-GeoJSON display_polygon מ-extra_computations של Geocoding API).
• פרמטרים מרכזיים:
  • ‫map: מופע המפה שאליו מוחלת שכבת הנתונים.
  • ‫style: הגדרה של המראה החזותי של תכונות GeoJSON (לדוגמה, strokeColor, fillColor, fillOpacity).
  • ‫addGeoJson(): שיטה להוספת נתוני GeoJSON לשכבה.

7. גבולות המפה ושינוי מרחק התצוגה

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

• ה-API שבו נעשה שימוש: google.maps.LatLngBounds (מ-Maps JavaScript API)
• מטרה: להתאים באופן דינמי את אזור התצוגה של המפה כך שיתאים לאוסף של נקודות גיאוגרפיות (למשל, המקום הראשי וכל יעדי המשנה שלו).
• שיטות עיקריות:
  • ‫extend(location): מוסיף נקודה LatLng לגבולות, מרחיב אותם אם צריך.
  • ‫fitBounds(bounds): משנה את מרכז המפה ואת רמת הזום כדי להציג את כל האזור שמוגדר באובייקט LatLngBounds.

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

הערות לגבי הטמעה שימו לב שהפתרון הזה לא פועל בכל אזורי שדות התעופה, והוא תלוי בזמינות הנתונים (של טרמינל שדה התעופה).

מקורות מידע Geocoding API Places API Maps Javascript API

מחברים: