סייר אזורים בתלת-ממד: מדריך להתאמה אישית

3D Area Explorer הוא פתרון שמאפשר לחקור קהילות באופן מרתק בתלת-ממד. בפתרון הזה נעשה שימוש: באריחים פוטוריאליסטיים בתלת-ממד של Google, בחיפוש מקומות, בפרטי מקום ובממשקי API להשלמה אוטומטית.

תחילת העבודה:

משתמשים באפליקציית האדמין של 3D Area Explorer

או

קבל מפתח API והורד את הקוד מ-GitHub.

הפעלה

• ממשק API של משבצות תלת-ממדיות פוטוריאליסטיות
• Places API

התאמה אישית של חוויית המשתמש

הפתרון של 3D Area Explorer ניתן להתאמה אישית רבה, ומאפשר לכם להתאים את החוויה למסלולים להמרת הלקוח. תוכלו להתאים אישית את הנתונים באמצעות לוח הבקרה בממשק המשתמש או באמצעות הקובץ config.json.

מוכנים לבצע התאמה אישית? לשם כך:

מיקום

אפשר להגדיר את נקודת ההתחלה של החוויה על ידי שינוי קווי האורך והרוחב בקובץ config.json.

בקרת מצלמה

בוחרים את סוג המסלול של המצלמה: מסלול קלאסי מעגלי או גל סינוס מעניין.

• מסלול קבוע:

  זהו מסלול מעגלי בגובה קבוע ומסביב לנקודת עניין ספציפית.

  סיירו במשרד של Google בסידני כדי לראות מסלול קבוע בפעולה.

• מסלול דינמי:

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

  לסייר במגדל אייפל כדי לראות מסלול דינמי בפעולה.

נקודות עניין (POI):

• אפשר להתאים אישית את הניתוח על ידי בחירת סוגי המקומות שרוצים לגלות. אפשר לבחור מבין מוזיאונים, פארקים, בתי ספר ועוד באמצעות מערך types ב-config.json.
• אפשר להגדיר את המספר המקסימלי של נקודות עניין שיוצגו על ידי התאמת הפרמטר density.
• משנים את searchRadius (in meters) כך שיכללו פנינים נסתרות בסביבה או התמקדות באזורים ספציפיים.
• מגדירים את המהירות שנבחרה לתנועת המצלמה באמצעות הפרמטר speed (in revolutions per minute).

טעינה מראש של הניתוח: ניתוח מעמיק יותר בעזרת התאמה אישית של כתובות URL

בעזרת 3D Area Explorer תוכלו להגדיר מראש את הניתוח באמצעות התאמה אישית של כתובות אתרים. כך לא תצטרכו להגדיר הגדרות ידניות, וכך לייעל את חוויית המשתמש.

יצירת כתובת ה-URL המושלמת:

פשוט מוסיפים פרמטרים ספציפיים לכתובת ה-URL של 'סייר האזור' כדי להגדיר מראש את המיקום והגדרות אחרות. למשל:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

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

• location.coordinates.lat: קו הרוחב של המיקום שבחרת.
• location.coordinates.lng: קו האורך של המיקום שנבחר.
• poi.types: רשימה של סוגי נקודות עניין להצגה, שמופרדים בפסיקים.
• poi.density: המספר המקסימלי של נקודות עניין.
• poi.searchRadius: הרדיוס לחיפוש נקודות עניין בקרבת מקום
• camera.speed: מהירות המסלול של המצלמה.
• camera.orbitType: סוג מסלול המצלמה ('מסלול קבוע' או 'מסלול דינמי').

יתרונות ההתאמה האישית של כתובות אתרים:

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

התאמה אישית של כתובות ה-URL מאפשרת לכם ליצור חוויות בהתאמה אישית ולהזמין אחרים לצאת להרפתקאות בתוך אוסף.

הערה: אפשר לנסות כתובת URL מותאמת אישית מלאה: https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

התאמות אישיות נוספות

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

כדי לבצע התאמות אישיות מתקדמות, צריך לבדוק את הקוד בקובץ src/utils/cesium.js שנמצא בספרייה src. אפשר לשנות את המשתנים הבאים כדי לשנות את המראה והסגנון של האפליקציה

גובה המצלמה

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

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

• הגדרה: CAMERA_HEIGHT
• ערך ברירת המחדל: 100
• תיאור: מגדיר את גובה המצלמה מעל מיקום היעד בעת טיסה לנקודה מסוימת.
• ערכים לדוגמה:
  • 50: תצוגה קרובה יותר, הדגשת פרטים.
  • 200: נקודת מבט פנורמית יותר.

מצגת מכירות למצלמה

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

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

• הגדרה: BASE_PITCH וגם AUTO_ORBIT_PITCH_AMPLITUDE
• ערכי ברירת המחדל:
  • BASE_PITCH: -30 (נגיעה של 30 מעלות למטה)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (שינוי גובה הצליל ב-10 מעלות לאורך הזמן)

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

ערכים לדוגמה:

• BASE_PITCH: 0 (מצלמה ברמה)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (ללא שינוי בגובה מצגת)

טווח המצלמה וזום

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

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

הגדרה: RANGE_AMPLITUDE_RELATIVE וגם ZOOM_FACTOR

ערכי ברירת המחדל:

• RANGE_AMPLITUDE_RELATIVE: 0.55 (שינוי מרחק יחסי)
• ZOOM_FACTOR: 20 (גורם זום במצלמה)

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

ערכים לדוגמה:

• RANGE_AMPLITUDE_RELATIVE: 1 (וריאציה לטווח מלא)
• ZOOM_FACTOR: 10 (פחות זום)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

איפוס המצלמה

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

• הגדרה: CAMERA_OFFSET
• ערכי ברירת המחדל:
  • heading: 0 (ללא קיזוז סיבוב)
  • pitch: Cesium.Math.toRadians(-30) (נע ב-30 מעלות כלפי מטה)
  • range: 800 (800 מטר מהמרכז)
• תיאור: מגדיר את הכיוון, גובה הצליל והטווח של המצלמה לאיפוס התצוגה.
• ערכים לדוגמה:
  • heading: 45 (מעלות, תצוגה צפון-מערבית)
  • range: 1,500 מטר (יותר מהמרכז)

הקואורדינטות של התחלת:

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

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

• הגדרה: START_COORDINATES

• ערכי ברירת המחדל:

  • longitude: 0
  • latitude: 60
  • height: 15000000 (15,000 ק"מ מעל פני השטח)

• ערכים לדוגמה:

  • longitude: -122.4934, latitude: 37.7951 (גשר שער הזהב)
  • height: 2000 (נקודת ההתחלה הקרובה יותר)

טעינה של מיקום מוגדר מראש

האובייקט location ב-config.json מגדיר את מרכז האזור. זוהי נקודת המבט הראשונית של המצלמה במציג Cesium.coordinates: מגדיר את קו הרוחב (lat) וקו האורך (lng) של המיקום שאליו רוצים שהמצלמה תזיז קודם. תוכלו לשנות את הערכים האלה כדי להגדיר את המצלמה לכל מיקום ספציפי בכדור הארץ.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

כך תוכלו להפעיל את האפליקציה 3D Place Navigator ולהגדיל את התצוגה למיקום ספציפי שתבחרו. ניתן להשתמש בכלי הקידוד הגיאוגרפי של Google על מנת לקבל את הקואורדינטות של קווי אורך ורוחב של כתובת או שם של מקום על ידי ציון השם באובייקט המיקום:

1. נכנסים לכלי הקידוד הגיאוגרפי.
2. יצירת בקשה לקידוד גיאוגרפי, לוחצים על הקטע 'רוצה לנסות בעצמך' ומזינים את המיקום הרצוי בשדה 'כתובת'. אפשר לציין כתובת, שם של מקום או אפילו ציוני דרך.
3. יצירת קואורדינטות, יש ללחוץ על הלחצן 'הפעלה' כדי לשלוח את הבקשה. הכלי יחזיר תשובה שמכילה פרטים שונים על המיקום, כולל קווי האורך והרוחב שמוצגים בקטע geometry.location.
4. שימוש בקואורדינטות מעתיקים את ערכי קווי הרוחב והאורך שאוחזרו מהתשובה ומדביקים אותם באובייקט coordinates בהגדרות האישיות.

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

בתצורה הזו ייעשה שימוש בכלי הקידוד הגיאוגרפי כדי לקבוע באופן אוטומטי את הקואורדינטות של המשרדים הראשיים של Google במאונטיין ויו שבקליפורניה, וכדי להשיק את אפליקציית 3D Place Navigator כשהמצלמה מתמקדת במיקום הזה.

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

התאמות אישיות מתקדמות

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

הוספת נתיב מצלמה חדש

הפתרון מוטמע בשני נתיבים שונים של המצלמה:

fixed-orbit" | "dynamic-orbit"

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

/src/utils/cesium.js בפונקציה calculateAutoOrbitFrame.

כדי להשתמש בחישוב הנתיב החדש בחלונית התצורה,עיינו בהטמעה בdemo/src/camera-settings.js.

הוספה של עוד סוגי מקומות

אפשר לשנות את רשימת סוגי המקומות בקובץ demo/src/place-settings.js. החל משורה 4 הם סוגי המקומות הזמינים בהדגמה.

אם רוצים להשתמש בסוגים ספציפיים של מקומות בלי לשנות את מקור ההדגמה, פשוט מוסיפים אותם לקובץ config.json במסגרת poi.types

התאמה אישית של הסגנון (CSS)

לסגנונות שעבדנו עם משתני CSS. יש תמיכה בהן בכל הדפדפנים העיקריים, והן מאפשרות לשנות שורה אחת במקום מרכזי ולעדכן מאפייני CSS ספציפיים. משתני ה-CSS שלנו מוגדרים ב-src/main.css. שם אפשר להתאים את הצבעים, הגדרות הגופן, המרווחים והשוליים בכל האפליקציה.

שכבת-על של נתונים נוספים

כדי ליצור שכבת-על של נתונים נוספים, צריך לעדכן את הקובץ src/utils/cesium.js ולעיין במסמכי התיעוד של צsיום לגבי הוספת GeoJSON או נתונים אחרים שיש אליהם הפניה גיאוגרפית לכדור הארץ.

הסרה של מקטעי הגדרות אישיות

באפליקציית ה-JavaScript יש שלושה קטעים עיקריים בקובץ התצורה: demo/src/[config-panel.js](config-panel.js): location, poi ו-camera. כל אחד מהקטעים האלה מספק אפשרויות הגדרה להיבטים שונים של האפליקציה. המפתחים יכולים להתאים אישית את הקטעים האלה בהתאם לצרכים הספציפיים שלהם.

1.הסרת קטע מסוים מהתצורה

• הקטע 'מיקום'

כדי להסיר את הקטע location, מאתרים את השורה הבאה בקוד ומוסיפים לו או מוחקים אותו:

const locationConfig = { ...config.location, ...customConfig.location };

• הקטע של נקודת העניין

כדי להסיר את הקטע poi, מאתרים את השורה הבאה בקוד, מוסיפים תגובה או מוחקים אותה:

const poiConfig = { ...config.poi, ...customConfig.poi };

• הקטע עם המצלמה

כדי להסיר את הקטע camera, מאתרים את השורה הבאה בקוד, מוסיפים תגובה או מוחקים אותה:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. עדכון הגדרות משולבות

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

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. התאמת הרכיבים של ממשק המשתמש

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

4. הסרת הקטע של הגדרות המצלמה

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

הסרת סיכום של קטע המיקום

const locationSection = await getLocationSettingsSection(locationConfig);

סיכום

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

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