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

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

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 (עשירות וחווייתיות) ומותאמות אישית, שיקסמו לקהל שלכם ויתנו חיים לחזון שלכם.