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

3D Area Explorer הוא פתרון שמאפשר לכם לחקור קהילות באמצעות חוויית תלת-ממד מדהימה. הפתרון הזה מתבסס על: משבצות תלת-ממדיות ריאליסטיות של Google, חיפוש מקומות, פרטי מקום והשלמה אוטומטית של ממשקי 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 המושלמת:

פשוט מוסיפים פרמטרים ספציפיים לכתובת ה-URL של ה-Region Explorer כדי להגדיר מראש את המיקום והגדרות נוספות. למשל:

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, אתם יכולים ליצור חוויות בהתאמה אישית ולהזמין אנשים אחרים לצאת להרפתקאות מאוסף.

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

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

כדי לבצע התאמות אישיות מתקדמות אלה, עליכם לבדוק את הקוד בקובץ 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: Sesium.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 מגדיר את מרכז האזור. זו נקודת המבט הראשונית של המצלמה במציג Cisium.coordinates: מגדיר את קו הרוחב (lat) וקו האורך (lng) של המיקום שאליו רוצים שהמצלמה תזיז קודם. מכוונים את הערכים האלה כדי להגדיר את המצלמה לכל מיקום ספציפי בכדור הארץ.

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

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

  1. ניגשים לכלי לקידוד גיאוגרפי.
  2. Create a Geocoding Request (יצירת בקשה לקידוד גיאוגרפי) לוחצים על הקטע 'Try it עצמה' ומזינים את המיקום הרצוי בשדה 'Address'. אפשר לציין כתובת, שם של מקום או אפילו ציוני דרך.
  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 ולהתייעץ עם המסמכים של cesium לגבי הוספת 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 בשביל להתאים אישית את חוויית הניתוח בתלת-ממד. על ידי שינוי התנהגות המצלמה, התאמת ההטיה החזותית ושינוי רמות הזום, אפשר ליצור חוויה ייחודית ומעניינת שמציגה את ההגדרות ונקודות העניין שבחרתם.

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