مستكشف المنطقة الثلاثية الأبعاد: دليل التخصيص

"مستكشف المنطقة الثلاثية الأبعاد" هو حل يمكّنك من استكشاف المجتمعات باستخدام تصاميم ثلاثية الأبعاد رائعة. يستفيد الحلّ من ذلك: المربّعات الثلاثية الأبعاد ذات الصور الواقعية من Google وبحث الأماكن وتفاصيل المكان وواجهات برمجة التطبيقات للإكمال التلقائي.

الخطوات الأولى:

تفعيل

تخصيص التجربة

حل "مستكشف المنطقة الثلاثية الأبعاد" قابل للتخصيص بشكل كبير، ما يسمح لك بتخصيص التجربة لرحلات العملاء. يمكنك التخصيص باستخدام لوحة التحكم في واجهة المستخدم أو استخدام ملف config.json.

هل أنت مستعد للتخصيص؟ يُرجى اتّباع الخطوات التالية:

الموقع الجغرافي

حدِّد نقطة البداية للتجربة من خلال تعديل خط العرض وخط الطول في ملف config.json.

التحكّم في الكاميرا

ويمكنك التحكم في رحلتك من خلال اختيار نوع مدار الكاميرا: مسار دائري كلاسيكي أو موجة جيبية مثيرة للاهتمام.

  • المدار الثابت:

    هذا مدار دائري بارتفاع ثابت وحول نقطة اهتمام محددة.

    يمكنك الاطّلاع على مدار ثابت أثناء العمل من خلال استكشاف مكتب Google في سيدني.

  • المدار الديناميكي:

    تتحرك الكاميرا بسلاسة في مسار موجات جيبية حول نقطة اهتمام معيّنة. تتيح هذه الحركة الفريدة للمشاهدين مراقبة نقطة الاهتمام من ارتفاعات وزوايا مختلفة، ما يوفر تجربة مرئية ديناميكية وغامرة.

    شاهِد مدارًا ديناميكيًا أثناء العمل من خلال استكشاف برج إيفل.

نقاط الاهتمام:

  • ويمكنك تخصيص استكشافك من خلال تحديد أنواع الأماكن التي تريد استكشافها. يمكنك الاختيار من بين المتاحف والمنتزهات والمدارس وغيرها باستخدام مصفوفة types في config.json.
  • اضبط الحدّ الأقصى لعدد نقاط الاهتمام المعروضة من خلال ضبط مَعلمة density.
  • عدِّل searchRadius (in meters) لتضمين جواهر مخفية قريبة أو التركيز على مناطق معيّنة.
  • يمكنك ضبط السرعة التي اخترتها لحركة الكاميرا باستخدام المَعلمة speed (in revolutions per minute).

التحميل المُسبَق للاستكشاف: تفصيل المعلومات من خلال تخصيص عنوان URL

يمكّنك مستكشف المنطقة الثلاثية الأبعاد من تحديد استكشافك مسبقًا من خلال تخصيص عناوين 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. استخدم القيم السالبة للإمالة لأسفل والقيم الموجبة لعرض لأعلى. لإضافة حركة ديناميكية بسيطة إلى الاستكشاف، غيِّر BACK_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: 1500 متر (أبعد من الوسط)

إحداثيات البدء:

تحدد 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 وسط المنطقة. وهذه هي نقطة العرض الأولى للكاميرا في عارض سيزيوم.coordinates: يتم تحديد خط العرض (lat) وخط الطول (lng) للموقع الجغرافي الذي تريد تحريك الكاميرا إليه أولاً. اضبط هذه القيم لضبط الكاميرا على أي موقع جغرافي محدّد على الكرة الأرضية.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

تتيح لك هذه التهيئة بدء تطبيق 3D Place Navigator بتكبير موقع محدد من اختيارك. يمكنك استخدام أداة الترميز الجغرافي من Google للحصول على إحداثيات خطي الطول والعرض لعنوان أو اسم مكان عن طريق تحديده في كائن الموقع:

  1. ادخل إلى أداة الترميز الجغرافي.
  2. إنشاء طلب ترميز جغرافي انقر على القسم "جرِّب بنفسك" وأدخِل الموقع الجغرافي الذي اخترته في حقل "العنوان". يمكنك تحديد عنوان أو اسم مكان أو حتى معالم.
  3. إنشاء الإحداثيات انقر على الزر "تشغيل" لإرسال طلبك. ستعرض الأداة ردًا يحتوي على معلومات مختلفة حول الموقع الجغرافي، بما في ذلك إحداثيات خط العرض وخط الطول المعروضة ضمن القسم geometry.location.
  4. استخدام ترميزات المواقع الجغرافية انسخ قيم خطوط الطول والعرض التي تم استردادها من الاستجابة والصقها في الكائن 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 ومراجعة وثائق السيزيوم حول كيفية إضافة 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);

الخلاصة

في هذا المستند، اكتشفنا خيارات التخصيص المختلفة المتوفرة في "مستكشف المنطقة" لتخصيص تجربة الاستكشاف ثلاثي الأبعاد. من خلال تعديل سلوك الكاميرا وضبط الإمالة البصرية وتغيير مستويات التكبير/التصغير، يمكنك إنشاء تجارب فريدة وجذابة تعرض الإعدادات ونقاط الاهتمام التي اخترتها.

تذكر تجربة تهيئات مختلفة وضبط المعلمات لتناسب احتياجاتك الخاصة. ومن خلال الاستفادة من فعالية التخصيص، يمكنك إنشاء رحلات غامرة ومخصّصة تأسر جمهورك وتحقِّق رؤيتك.