ציור על המפה

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

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

המפות התלת-ממדיות הריאליסטיות בממשק 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="rgba(25, 102, 210, 0.75)"  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.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="rgba(25, 102, 210, 0.75)"  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>