תכונות של מפה וקטורית

הצגת דוגמה

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

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

• שליטה פרוגרמטית בהטיה ובכיוון
• שליטה משופרת במצלמה
• זום חלקי לזום חלק יותר

• תוכן ואנימציות בתלת-ממד

• במפות שנטענות באמצעות רכיב div ו-JavaScript, סוג הרינדור שמוגדר כברירת מחדל הוא google.maps.RenderingType.RASTER.

• במפות שנטענות באמצעות הרכיב gmp-map, סוג העיבוד שמוגדר כברירת מחדל הוא google.maps.RenderingType.VECTOR, עם אפשרות לשלוט בהטיה ובכיוון.

תחילת העבודה עם מפות וקטוריות

הטיה וסיבוב

אפשר להגדיר הטיה וסיבוב (כיוון) במפה הווקטורית על ידי הכללת המאפיינים heading ו-tilt בזמן האתחול של המפה, ועל ידי קריאה ל-methods‏ setTilt ו-setHeading במפה. בדוגמה הבאה נוספים למפה כמה כפתורים שמאפשרים לשנות את ההטיה והכיוון ב-20 מעלות בכל פעם.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

שימוש בתנועות של העכבר והמקלדת

אם הפעלתם את האפשרות להטות ולסובב את המפה (באמצעות קוד או במסוף Google Cloud), המשתמשים יכולים להטות ולסובב את המפה באמצעות העכבר והמקלדת:

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

שינוי ההטיה והכיוון באופן פרוגרמטי

אפשר להשתמש בשיטות setTilt() ו-setHeading() כדי לשנות באופן פרוגרמטי את ההטיה ואת הכיוון במפה וקטורית. הכיוון הוא הכיוון שאליו המצלמה פונה, במעלות בכיוון השעון החל מצפון. לכן, הערך map.setHeading(90) יסובב את המפה כך שהמזרח יפנה כלפי מעלה. זווית ההטיה נמדדת מנקודת השיא, כך ש-map.setTilt(0) היא מבט ישירות למטה, ו-map.setTilt(45) היא מבט אלכסוני.

• כדי להגדיר את זווית ההטיה של המפה, מפעילים את הפונקציה setTilt(). כדי לקבל את ערך ההטיה הנוכחי, משתמשים ב-getTilt().
• כדי להגדיר את כיוון המפה, אומרים setHeading(). משתמשים ב-getHeading() כדי לקבל את ערך הכיוון הנוכחי.

כדי לשנות את מרכז המפה בלי לשנות את ההטיה והכיוון, משתמשים ב-map.setCenter() או ב-map.panBy().

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

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

ההשפעה על שיטות אחרות

כשמפעילים הטיה או סיבוב במפה, זה משפיע על ההתנהגות של שיטות אחרות ב-Maps JavaScript API:

• הפונקציה map.getBounds() תמיד מחזירה את התיבה התוחמת הקטנה ביותר שכוללת את האזור הגלוי. כשמפעילים הטיה, הגבולות שמוחזרים עשויים לייצג אזור גדול יותר מהאזור הגלוי של אזור התצוגה של המפה.
• הפונקציה map.fitBounds() תאפס את ההטיה והכיוון לאפס לפני התאמת הגבולות.
• ‫map.panToBounds() יאפס את ההטיה והכיוון לאפס לפני הזזת הגבולות.
• הפונקציה map.setTilt() מקבלת כל ערך, אבל מגבילה את ההטיה המקסימלית בהתאם לרמת הזום הנוכחית במפה.
• הפונקציה map.setHeading() מקבלת כל ערך ומשנה אותו כך שיתאים לטווח [0, 360].

איך לשלוט במצלמה

אפשר להשתמש בפונקציה map.moveCamera() כדי לעדכן כל שילוב של מאפייני מצלמה בבת אחת. הפונקציה map.moveCamera() מקבלת פרמטר אחד שמכיל את כל מאפייני המצלמה שצריך לעדכן. בדוגמה הבאה מוצגת קריאה ל-map.moveCamera() כדי להגדיר את center,‏ zoom,‏ heading ו-tilt בבת אחת:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

אפשר להנפיש את מאפייני המצלמה באמצעות קריאה ל-map.moveCamera() עם לולאת אנימציה, כמו שמוצג כאן:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

מיקום המצלמה

תצוגת המפה מעוצבת כמצלמה שמשקיפה על מישור שטוח. מיקום המצלמה (ולכן גם הרינדור של המפה) נקבע לפי המאפיינים הבאים: target (מיקום קו רוחב/קו אורך), bearing, tilt ו-zoom.

טירגוט (מיקום)

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

כיוון (אוריינטציה)

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

כיוון של 0 פירושו שהחלק העליון של המפה מצביע לכיוון צפון אמיתי. ערך כיוון של 90 פירושו שהחלק העליון של המפה פונה לכיוון מזרח (90 מעלות במצפן). הערך 180 מציין שהחלק העליון של המפה פונה לכיוון דרום.

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

הטיה (זווית צפייה)

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

בתמונות הבאות, זווית הצפייה היא 0 מעלות. בתמונה הראשונה מוצג תרשים של המצב הזה: מיקום 1 הוא מיקום המצלמה, ומיקום 2 הוא המיקום הנוכחי במפה. המפה שנוצרה מוצגת מתחתיו.

בתמונות הבאות, זווית הצפייה היא 45 מעלות. שימו לב שהמצלמה זזה חצי דרך לאורך קשת בין המיקום הישר מעל הראש (0 מעלות) לבין הקרקע (90 מעלות), למיקום 3. המצלמה עדיין מכוונת לנקודת המרכז של המפה, אבל עכשיו אפשר לראות את האזור שמיוצג על ידי הקו במיקום 4.

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

Zoom

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

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

• ‫1: העולם
• ‫5: שטח יבשתי/יבשת
• ‫10: עיר
• ‫15: רחובות
• ‫20: מבנים

זום חלקי

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

בדוגמה הבאה מוצגת הפעלה של זום חלקי בזמן אתחול המפה:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

אפשר גם להפעיל ולהשבית את הזום החלקי על ידי הגדרת האפשרות isFractionalZoomEnabled במפה, כמו שמוצג כאן:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

אתם יכולים להגדיר מאזין שיזהה אם הזום החלקי מופעל. זה שימושי במיוחד אם לא הגדרתם במפורש את isFractionalZoomEnabled ל-true או ל-false. קוד הדוגמה הבא בודק אם הזום החלקי מופעל:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});