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

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

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

הפעלה

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

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

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 מעלות לאורך זמן)

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

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

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

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

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

תמונה

בהגדרה הזו, המערכת תשתמש בכלי ליצירת כתובות (geocoding) כדי לקבוע באופן אוטומטי את הקואורדינטות של המשרדים הראשיים של Google במאונטיין ויו, קליפורניה, ולהפעיל את אפליקציית 'ניווט למקומות ב-3D' עם המצלמה במרכז המיקום הזה.

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

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

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

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

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

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

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