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

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

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

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

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

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

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

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

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

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

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

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

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

מחברים: