הפתרון של 3D Area Explorer ניתן להתאמה אישית רבה, ומאפשר לכם להתאים את החוויה למסלולים להמרת הלקוח. תוכלו להתאים אישית את הנתונים באמצעות לוח הבקרה בממשק המשתמש או באמצעות הקובץ config.json
.
בוחרים את סוג המסלול של המצלמה: מסלול קלאסי מעגלי או גל סינוס מעניין.
בעזרת 3D Area Explorer תוכלו להגדיר מראש את הניתוח באמצעות התאמה אישית של כתובות אתרים. כך לא תצטרכו להגדיר הגדרות ידניות, וכך לייעל את חוויית המשתמש.
פשוט מוסיפים פרמטרים ספציפיים לכתובת ה-URL של 'סייר האזור' כדי להגדיר מראש את המיקום והגדרות אחרות. למשל:
כתובת ה-URL הזו מגדירה את נקודת ההתחלה לקווי הרוחב והאורך שצוינו, ומעבירה אתכם מיידית למיקום שנבחר. פרמטרים זמינים:
התאמה אישית של כתובות ה-URL מאפשרת לכם ליצור חוויות בהתאמה אישית ולהזמין אחרים לצאת להרפתקאות בתוך אוסף.
הערה: אפשר לנסות כתובת URL מותאמת אישית מלאה:
https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100
התאמות אישיות נוספות
בקטע הקודם נבדקו התאמות שאפשר לגשת אליהן דרך ממשק המשתמש או קובץ התצורה. עם זאת, יש גם כמה פרמטרים מובנים אחרים שאפשר לשנות כדי להתאים אישית את האפליקציה עוד יותר.
כדי לבצע התאמות אישיות מתקדמות, צריך לבדוק את הקוד בקובץ 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
: 2000 (נקודת ההתחלה הקרובה יותר)
טעינה של מיקום מוגדר מראש
האובייקט location
ב-config.json
מגדיר את מרכז האזור. זוהי נקודת המבט הראשונית של המצלמה במציג Cesium.coordinates
: מגדיר את קו הרוחב (lat
) וקו האורך (lng
) של המיקום שאליו רוצים שהמצלמה תזיז קודם. תוכלו לשנות את הערכים האלה כדי להגדיר את המצלמה לכל מיקום ספציפי בכדור הארץ.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
כך תוכלו להפעיל את האפליקציה 3D Place Navigator ולהגדיל את התצוגה למיקום ספציפי שתבחרו.
ניתן להשתמש בכלי הקידוד הגיאוגרפי של Google על מנת לקבל את הקואורדינטות של קווי אורך ורוחב של כתובת או שם של מקום על ידי ציון השם באובייקט המיקום:
נכנסים לכלי הקידוד הגיאוגרפי .
יצירת בקשה לקידוד גיאוגרפי , לוחצים על הקטע 'רוצה לנסות בעצמך' ומזינים את המיקום הרצוי בשדה 'כתובת'. אפשר לציין כתובת, שם של מקום או אפילו ציוני דרך.
יצירת קואורדינטות , יש ללחוץ על הלחצן 'הפעלה' כדי לשלוח את הבקשה. הכלי יחזיר תשובה שמכילה פרטים שונים על המיקום, כולל קווי האורך והרוחב שמוצגים בקטע geometry.location
.
שימוש בקואורדינטות מעתיקים את ערכי קווי הרוחב והאורך שאוחזרו מהתשובה ומדביקים אותם באובייקט 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 ולעיין במסמכי התיעוד של צsיום לגבי הוספת 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);
סיכום
במסמך הזה בדקנו את האפשרויות השונות של התאמה אישית ב-Region Explorer כדי להתאים אישית את חוויית הניתוח בתלת-ממד. על ידי שינוי
התנהגות המצלמה, התאמת ההטיה החזותית ושינוי רמות הזום, ניתן ליצור
חוויות ייחודיות ומעניינות שמציגות את ההגדרות ואת נקודות העניין שבחרת.
אל תשכחו להתנסות בהגדרות שונות ולכוונן את הפרמטרים כך שיתאימו לצרכים הספציפיים שלכם. בעזרת כוחה של ההתאמה האישית אפשר ליצור מסלולים סוחפים בהתאמה אישית שילכדו את תשומת הלב של הקהל ויהפכו את החזון שלכם למציאות.