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

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

תחילת העבודה

הפעלה

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

הפתרון "ממשק לסיור בתלת-ממד" מאפשר לכם להתאים אישית את חוויית המשתמש בהתאם למסלול להמרת הלקוח. אפשר להתאים אישית באמצעות לוח הבקרה בממשק המשתמש או באמצעות הקובץ 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. יצירת בקשה להמרת כתובות לקואורדינטות: לוחצים על הקטע 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 כדי להתאים אישית את חוויית החקירה בתלת-ממד. אתם יכולים לשנות את התנהגות המצלמה, את ההטיה החזותית ואת רמות הזום כדי ליצור חוויות ייחודיות ומושכות שמציגות את ההגדרות ואת נקודות העניין שבחרתם.

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