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

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

البدء:

تفعيل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخاتمة

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

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