דף זה תורגם על ידי Cloud Translation API.

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

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

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

הפעלה

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

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

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

מיקום

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

שליטה במצלמה

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

מסלול קבוע:

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

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

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

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

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

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

טעינה מראש של הניתוח: ניתוח מעמיק יותר עם התאמה אישית של כתובות URL

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

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

פשוט מוסיפים פרמטרים ספציפיים לכתובת ה-URL של ה-Region Explorer כדי להגדיר מראש המיקום והגדרות אחרות. לדוגמה:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

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

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 כדי לקבל את קווי האורך והרוחב של כתובת או שם מקום על ידי ציון הכתובת במיקום object:

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

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

סיכום

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

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