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

‫3D Area Explorer هو حلّ يتيح لك استكشاف المنتديات بتقنية ثلاثية الأبعاد آسرة. يستفيد هذا الحلّ من: المربّعات الثلاثية الأبعاد لصور واقعية من Google، وميزة "البحث عن الأماكن"، وميزة "تفاصيل المكان"، وواجهات برمجة التطبيقات لميزة "الإكمال التلقائي".

بدء الاستخدام:

تفعيل

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

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

هل أنت مستعد لتخصيص الإعدادات؟ وإليك كيفية ذلك:

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

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

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

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

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

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

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

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

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

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

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

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

جارٍ التحميل مسبقًا: استكشاف أعمق لتخصيص عناوين URL

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

إنشاء عنوان URL المثالي:

ما عليك سوى إلحاق مَعلمات معيّنة بعنوان URL الخاص بـ Area 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: نوع مدار الكاميرا ("fixed-orbit" أو "dynamic-orbit")

مزايا تخصيص عنوان 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: Cesium.Math.toRadians(-30) (pitching 30 degrees downwards)
    • ‫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 مركز المنطقة. وهي نقطة العرض الأولية للكاميرا في عارض Cesium.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 في ماونتن فيو، كاليفورنيا، تلقائيًا، وتشغيل تطبيق "التنقّل في الأماكن الثلاثية الأبعاد" مع تركيز الكاميرا على ذلك الموقع الجغرافي.

التخصيصات المتقدّمة

يمكنك إجراء عمليات تخصيص إضافية من خلال التعمّق في الرمز البرمجي. يستعرض القسم التالي بعض الخيارات

إضافة مسار كاميرا جديد

ينفّذ الحلّ مسارَين مختلفَين للكاميرا:

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 لتخصيص تجربة الاستكشاف الثلاثية الأبعاد. من خلال تعديل سلوك الكاميرا وضبط الإمالة المرئية وتغيير مستويات التكبير، يمكنك إنشاء تجارب فريدة وجذابة تعرض الإعدادات المحدّدة والنقاط المهمة.

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