ציור על המפה

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

סוגים של שכבות-על

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

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

קווים פוליגוניים

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

הוספת קו פוליגוני

קו פוליגוני אדום שמשורטט על פני פני השטח של כדור הארץ

<gmp-map-3d center="0,-180,15000000">
  <gmp-polyline-3d altitude-mode="clamp-to-ground" stroke-color="red" stroke-width="10"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    polyline.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 }
    ];
  });
</script>

הסרת קו פוליגוני

const polyline = document.querySelector('gmp-polyline-3d');
polyline.remove();

קו פוליגוני חסום

אפשר לשלוט בחשיפה של קטעים מוסתרים באמצעות המאפיין draws-occluded-segments.

קו פוליגוני סגור שמסמן מסלול שרירותי דרך אזור הדאונטאון של סן פרנסיסקו

<gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
  <gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="#1967d2" stroke-width="10" stroke-opacity="0.75"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    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}
    ];
  });
</script>

לצפייה בדוגמה

פוליגונים

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

פוליגון פשוט

מצולע אדום משולש עם קצוות כחולים סביב מנהטן התחתונה

<gmp-map-3d center="40.6842,-74.0019,1000" heading="340" tilt="70">
  <gmp-polygon-3d altitude-mode="clamp-to-ground" fill-color="#ff0000" stroke-color="#0000ff" stroke-width="8" draws-occluded-segments></gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208},
      {lat: 40.6993, lng: -74.019},
      {lat: 40.7035, lng: -74.0004},
      {lat: 40.7144, lng: -74.0208}
    ];
  });
</script>

הסרת פוליגון

const polygon = document.querySelector('gmp-polygon-3d');
polygon.remove();

פוליגון מובלט

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

<gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
  });
</script>

לצפייה בדוגמה

פוליגון עם חור פנימי

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

<gmp-map-3d center="40.7093,-74.0122,10" heading="30" tilt="15" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
    polygon.innerCoordinates = [
      [
        {lat: 40.71, lng: -74.0175, altitude: 1000},
        {lat: 40.703, lng: -74.0165, altitude: 1000},
        {lat: 40.7035, lng: -74.006, altitude: 1000},
        {lat: 40.71, lng: -74.0175, altitude: 1000}
      ]
    ];
  });
</script>