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

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

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

הפעלה

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

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

מוכנים לבצע התאמה אישית? לשם כך:

מיקום

אפשר להגדיר את נקודת ההתחלה של החוויה על ידי שינוי קווי האורך והרוחב בקובץ config.json.

שליטה במצלמה

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

  • מסלול קבוע:

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

    סיירו ב-Google סידני כדי לראות מסלול קבוע בפעולה Office.

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

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

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

נקודות עניין (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 }
  },

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

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

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

תמונה

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

סיכום

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

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