שכבת שרטוט (ספרייה)

1. סקירה כללית
2. שימוש בספרייה
3. אפשרויות של DrawingManager
4. עדכון של כלי השרטוט
5. אירועי שרטוט

סקירה כללית

המחלקות DrawingManager מספקות ממשק גרפי למשתמשים כדי לשרטט פוליגונים, מלבנים, קווים, עיגולים וסמנים במפה.

שימוש בספרייה

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>

אחרי שמוסיפים את הפרמטר libraries, אפשר ליצור אובייקט DrawingManager באופן הבא:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

אפשרויות של DrawingManager

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

• המאפיין drawingMode של DrawingManager מגדיר את מצב הציור ההתחלתי של DrawingManager. היא מקבלת קבוע google.maps.drawing.OverlayType. ברירת המחדל היא null, ובמקרה כזה הסמן נמצא במצב לא פעיל כשמאתחלים את DrawingManager.
• המאפיין drawingControl של DrawingManager מגדיר את הנראות של ממשק הבחירה של כלי הציור במפה. אפשר להזין בו ערך בוליאני.
• אפשר גם להגדיר את המיקום של אמצעי הבקרה ואת סוגי שכבות העל שיוצגו באמצעי הבקרה באמצעות המאפיין drawingControlOptions של DrawingManager.
  • ‫position מגדיר את המיקום של אמצעי הבקרה של הציור במפה, ומקבל קבוע google.maps.ControlPosition.
  • ‫drawingModes הוא מערך של קבועי google.maps.drawing.OverlayType, והוא מגדיר את סוגי השכבות שיוצגו בבורר הצורות של כלי השרטוט. סמל היד תמיד יהיה נוכח, ויאפשר למשתמש לבצע פעולות במפה בלי לצייר. הסדר של הכלים ברכיב הבקרה יהיה זהה לסדר שבו הם מוצהרים במערך.
• לכל סוג של שכבת-על אפשר להקצות קבוצה של מאפייני ברירת מחדל, שמגדירים את המראה של שכבת-העל כשהיא נוצרת. הם מוגדרים במאפיין {overlay}Options של שכבת העל (כאשר {overlay} מייצג את סוג שכבת העל). לדוגמה, אפשר להגדיר את מאפייני המילוי של עיגול, מאפייני הקו, zIndex והאפשרות ללחיצה באמצעות המאפיין circleOptions. אם מועברים ערכים של גודל, מיקום או מפה, המערכת מתעלמת מהם. לפרטים מלאים על המאפיינים שאפשר להגדיר, אפשר לעיין במסמכי העזרה בנושא API.

הערה: כדי להגדיר צורה כניתנת לעריכה על ידי המשתמש אחרי שהיא נוצרה, צריך להגדיר את המאפיין editable שלה לערך true.

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }
  );

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

window.initMap = initMap;
index.js

עדכון של כלי השרטוט

אחרי שיוצרים את האובייקט DrawingManager, אפשר לעדכן אותו באמצעות קריאה ל-setOptions() והעברת ערכים חדשים.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

כדי להסתיר או להציג את אמצעי הבקרה של כלי הציור:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

כדי להסיר את אמצעי הבקרה של כלי הציור מהאובייקט map:

drawingManager.setMap(null);

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

אירועי שרטוט

כשיוצרים שכבת-על של צורה, מופעלים שני אירועים:

• אירוע {overlay}complete (כאשר {overlay} מייצג את סוג שכבת העל, כמו circlecomplete, polygoncomplete וכו'). הפניה לשכבת העל מועברת כארגומנט.
• אירוע overlaycomplete. מועבר כארגומנט אובייקט ליטרלי שמכיל את OverlayType והפניה לשכבת העל.

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

שימו לב: אירועים של google.maps.Map, כמו click ו-mousemove, מושבתים בזמן שמציירים במפה.