סקירה כללית

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

הנה דוגמה למה שאפשר לעשות עם מפות תלת-ממדיות ב-Maps JavaScript API:

למה כדאי להשתמש במפות תלת-ממדיות ב-Maps JavaScript

במפות תלת-ממדיות ב-Maps JavaScript, המחלקה Map3DElement (<gmp-map-3d>) בספרייה maps3d מאפשרת להשתמש בתמונות התלת-ממדיות של Google באפליקציות. מפות תלת-ממדיות מספקות חוויית רינדור מובנית בתלת-ממד, שמאפשרת לשלב או להתנסות בסביבות תלת-ממדיות בעולם האמיתי, בתצוגות של ערים ובסיורים באתרי תיירות.

משתמשים בתלת-ממד <gmp-map-3d> (Map3DElement בספרייה maps3d) לשטח תלת-ממדי, הטיית מצלמה, כיוון וטווח תצוגות אוויריות, מבנים תלת-ממדיים מובלטים ואובייקטים תלת-ממדיים כמו Marker3DElement (<gmp-marker-3d>). למפות דרכים דו-ממדיות שטוחות, סיכות דו-ממדיות רגילות AdvancedMarkerElement וסגנון וקטורי דו-ממדי, משתמשים בדו-ממד <gmp-map> (MapElement או google.maps.Map בספרייה maps).

מה אפשר לעשות עם מפות תלת-ממדיות ב-Maps JavaScript?

• יצירת חוויות של מפות בעולם האמיתי: אפשר ליצור תמונות אוויריות תלת-ממדיות פוטו-ריאליסטיות של ערים, פני שטח וציוני דרך במצב SATELLITE או HYBRID (שמציג שכבת-על של תוויות מפת בסיס על תמונות לוויין), או להציג מפת בסיס תלת-ממדית מעוצבת במצב ROADMAP באמצעות המאפיין mode. מידע נוסף זמין במאמר שינוי מצב המפה.
• התאמה אישית של סגנון המפה:
  • עיצוב מפות מבוסס-ענן בתלת-ממד: אתם יכולים לקבוע אם נקודות עניין וכבישים במפת הבסיס יוצגו ואיך הם ייראו. מידע נוסף זמין במאמר התאמה אישית של מפות תלת-ממדיות.
  • סמנים בהתאמה אישית, חלונות קופצים, קווים פוליגוניים ופוליגונים: זיהוי מיקומים ושרטוט מסלולים או גבולות בתלת-ממד במפה באמצעות MarkerElement,‏ Marker3DElement,‏ Marker3DInteractiveElement,‏ PopoverElement,‏ Polyline3DElement ו-Polygon3DElement. מידע נוסף זמין במאמרים סמנים, חלונות קופצים וצורות וקווים.
  • מודלים תלת-ממדיים ונכסי glTF: הוספת מודלים תלת-ממדיים מותאמים אישית של PBR glTF של מבנים, ציוני דרך או אובייקטים בקואורדינטות בעולם האמיתי באמצעות Model3DElement. מידע נוסף זמין במאמר מודלים.
• יצירת מפות סוחפות:
  • מסלולי מצלמה מוגדרים מראש: אתם יכולים להדריך את המשתמשים במפה התלת-ממדית באמצעות אנימציות מוגדרות מראש של מעוף מעל פני השטח ואנימציות מסלוליות באמצעות flyCameraTo ו-flyCameraAround. מידע נוסף זמין במאמר הוספת אנימציה לנתיבי מצלמה.
  • שליטה באינטראקציה של המשתמשים: התאמה אישית של אמצעי הבקרה ותנועת המצלמה שזמינים למשתמשים. מידע נוסף זמין במאמרים פקדים וניווט במפה תלת-ממדית, הגבלת התצוגה והגבולות של המצלמה ושליטה במיקום המצלמה.

דוגמה מהירה

כדי לטעון את הספרייה maps3d ולעבד רכיב <gmp-map-3d> עם mode="HYBRID",‏ center (lat,lng,altitude),‏ range,‏ tilt ו-heading, משתמשים בקטע הקוד הבא:

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

מחליפים את הערך YOUR_API_KEY במפתח ה-API של Google Maps Platform.

איך משתמשים במפות תלת-ממדיות ב-Maps JavaScript

כיסוי

רשתות פוליגונים של בניינים וציוני דרך בתלת-ממד פוטו-ריאליסטי זמינות באזורים מטרופוליניים נבחרים במדינות ובאזורים נתמכים. באזורים שאין בהם כיסוי של רשת תלת-ממדית (כמו הודו), <gmp-map-3d> מעבד תמונות דו-ממדיות של לוויין או מפת דרכים שמוצגות על פני השטח בתלת-ממד, בלי בניינים בתלת-ממד. כדי להציג נקודת ציון באזור שאין בו כיסוי של רשת תלת-ממדית, אתם יכולים להציב מודל תלת-ממדי מסוג glTF בהתאמה אישית בקואורדינטות שלו באמצעות Model3DElement, או להשתמש ב-<gmp-map> דו-ממדי. כדי לבדוק את הזמינות בכל מדינה (בעמודה Maps JavaScript 3D), קראו את פרטי הכיסוי של Google Maps Platform.

השלבים הבאים

• במדריך לתחילת העבודה מוסבר איך ליצור אפליקציית "Hello, World!‎" מפה תלת-ממדית.
• כדאי לנסות את שיעור ה-Codelab למתחילים כדי ללמוד איך להוסיף תכונות למפה.
• ב-Codelab הבא תוכלו להרחיב את הידע שלכם בנושא סמנים ואנימציה.
• עיינו באוסף הדוגמאות של Google כדי למצוא דוגמה שמתאימה לתרחיש לדוגמה שלכם.