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

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

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

تفعيل

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

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

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

الخاتمة

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

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