התאמות אישיות של כלי התלת-ממד לניתוח אזורים

‫"סיור וירטואלי תלת-ממדי" הוא פתרון שמאפשר לכם לחקור קהילות בתלת-ממד מרהיב. הפתרון משתמש ב: קטעי מפה ריאליסטיים בתלת-ממד, חיפוש מקומות, Place Details, וממשקי API של השלמה אוטומטית.

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

הפעלה

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

הפתרון "ממשק Explorer לאזורים בתלת-ממד" מאפשר לכם להתאים אישית את חוויית המשתמש בהתאם למסלולים להמרת לקוחות. אפשר להתאים אישית באמצעות לוח הבקרה בממשק המשתמש או באמצעות הקובץ config.json.

רוצים להתאים אישית? לשם כך:

מיקום

כדי להגדיר את נקודת ההתחלה של החוויה, משנים את קו הרוחב וקו האורך בקובץ config.json.

שליטה במצלמה

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

  • מסלול קבוע:

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

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

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

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

    כדי לראות איך פועל מסלול דינמי, חפשו את מגדל אייפל.

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

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

טעינה מראש של הניתוח: מידע נוסף על התאמה אישית של כתובת URL

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

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

פשוט מוסיפים פרמטרים ספציפיים לכתובת ה-URL של Area 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: סוג מסלול המצלמה ("fixed-orbit" או "dynamic-orbit").

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

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

אתם יכולים להתאים אישית את כתובת ה-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: 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: ‏2,000 (מיקום התחלתי קרוב יותר)

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

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

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

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

  1. פותחים את הכלי להמרת כתובות לקואורדינטות.
  2. יצירת בקשה להמרת כתובות לקואורדינטות (geocoding) לוחצים על הקטע "Try It Yourself" ומזינים את המיקום שבחרתם בשדה "Address". אפשר לציין כתובת, שם של מקום או אפילו ציוני דרך.
  3. יצירת קואורדינטות: לוחצים על הכפתור Run (הפעלה) כדי לשלוח את הבקשה. הכלי יחזיר תשובה עם מידע שונה על המיקום, כולל קואורדינטות של קו הרוחב וקו האורך שמוצגות בקטע 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);

סיכום

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

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