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

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

البدء:

تفعيل

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

يمكن تخصيص حلّ 3D Area Explorer بشكل كبير، ما يتيح لك تعديل التجربة لتناسب رحلات العملاء. يمكنك التخصيص باستخدام لوحة التحكّم في واجهة المستخدم أو باستخدام ملف config.json.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يتيح لك 3D Area Explorer تحديد استكشافك مسبقًا من خلال تخصيص عنوان 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:

  • تسهيل تجربة المستخدم من خلال تحديد الإعدادات التي اخترتها مسبقًا
  • مشاركة رحلات مستهدَفة مع مواقع جغرافية ونقاط اهتمام محدّدة تم تحميلها مسبقًا
  • تضمين تجارب Area Explorer التي تم ضبطها مسبقًا بسلاسة في المواقع الإلكترونية

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

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

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

  1. يمكنك الوصول إلى أداة Geocoding Tool.
  2. إنشاء طلب ترميز جغرافي انقر على قسم "جرِّب بنفسك" وأدخِل الموقع الجغرافي الذي اخترته في حقل "العنوان". يمكنك تحديد عنوان أو اسم مكان أو حتى معالم.
  3. إنشاء الإحداثيات انقر على الزر "تشغيل" لإرسال طلبك. ستعرض الأداة ردًا يحتوي على معلومات مختلفة عن الموقع الجغرافي، بما في ذلك إحداثيات خطوط الطول والعرض المعروضة ضمن قسم geometry.location.
  4. استخدام الرموز الجغرافية انسخ قيم خطوط الطول والعرض التي تم استردادها من الرد والصقها في عنصر coordinates ضمن الإعدادات.

ملاحظة: يجب أن تتّبع الرموز الجغرافية المستخدَمة بهذه الطريقة البنود الموضّحة في القسم 3.4 من بنود خدمة "منصة خرائط Google"، أي يجب عدم تخزينها مؤقتًا لأكثر من 30 يومًا ويجب إعادة تحميلها بعد ذلك.

الصورة

سيستخدم هذا الإعداد أداة Geocoding لتحديد إحداثيات مقرّ 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 والرجوع إلى مستندات 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. على سبيل المثال، إذا أردت إزالة قسم معيّن من لوحة المشرف، مثل سرعة الكاميرا، عليك تعديل كل من رمز JavaScript ورمز HTML.

4. إزالة قسم "إعدادات الكاميرا"

لإزالة قسم "إعدادات الكاميرا" من واجهة المستخدم، ابحث عن السطر التالي وعلِّقه أو احذفه:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

ملخّص إزالة قسم "الموقع الجغرافي"

const locationSection = await getLocationSettingsSection(locationConfig);

الخاتمة

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

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