צורות וקווים

בחירת פלטפורמה: Android iOS

אפשר להוסיף למפה צורות שונות. צורה היא אובייקט במפה שקשור לLatLng מערכת קואורדינטות. מפות פוטוריאליסטיות תלת-ממדיות ב-Maps JavaScript API תומכות בהוספה של קווים ומצולעים למפה.

קו פוליגוני

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

הוספת קו מרובה

הבונה Polyline מקבל קבוצה של Polyline3DElementOptions שמציינת את LatLng הקואורדינטות של הקו וקבוצה של סגנונות להתאמת ההתנהגות החזותית של הקו.

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

  • ‫outerColor: צבע הקסדצימלי ב-HTML בפורמט "#FFFFFF".
  • ‫outerWidth: ערך מספרי בין 0.0 ל-1.0, שמתורגם לאחוז מתוך strokeWidth.
  • ‫strokeColor: צבע הקסדצימלי ב-HTML בפורמט "#FFFFFF".
  • ‫strokeWidth: רוחב הקו בפיקסלים.
  • geodesic: האם הקצוות של הפוליגון עוקבים אחרי העיקול של כדור הארץ, או שהם מצוירים כקווים ישרים.
  • ‫altitudeMode: איך מפרשים את רכיבי הגובה בקואורדינטות
  • ‫drawsOccludedSegments: ערך בוליאני שמציין אם צריך לצייר חלקים של הפוליגון שמוסתרים על ידי אובייקטים (כמו בניינים).
  • ‫extruded: ערך בוליאני שמציין אם הקו צריך להיות מחובר לקרקע.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.coordinates = [
      {lat: 37.80515638571346, lng: -122.4032569467164},
      {lat: 37.80337073509504, lng: -122.4012878349353},
      {lat: 37.79925208843463, lng: -122.3976697250461},
      {lat: 37.7989102378512, lng: -122.3983408725656},
      {lat: 37.79887832784348, lng: -122.3987094864192},
      {lat: 37.79786443410338, lng: -122.4066878788802},
      {lat: 37.79549248916587, lng: -122.4032992702785},
      {lat: 37.78861484290265, lng: -122.4019489189814},
      {lat: 37.78618687561075, lng: -122.398969592545},
      {lat: 37.7892310309145, lng: -122.3951458683092},
      {lat: 37.7916358762409, lng: -122.3981969390652}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

קו פוליגוני אינטראקטיבי

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

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

פוליגונים

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

אובייקטים של Polygon יכולים לתאר צורות מורכבות, כולל:

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

כדי להגדיר צורה מורכבת, משתמשים במצולע עם כמה נתיבים.

הוספת מצולע

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

למצולעים בסיסיים שמורכבים מנתיב אחד בלבד, אפשר ליצור Polygon באמצעות מערך אחד של קואורדינטות LatLng. מפות פוטוריאליסטיות תלת-ממדיות ב-Maps JavaScript API ימירו את המערך למערך של מערכים בזמן היצירה, כשהוא מאוחסן במאפיין outerCoordinates.

async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

פוליגונים אינטראקטיביים

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

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();