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

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

البدء:

تفعيل

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

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

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

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

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

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

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

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

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

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

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

    تتحرك الكاميرا بسلاسة في مسار موجة جيبية حول جسم معيّن نقطة اهتمام. تتيح هذه الحركة الفريدة للمشاهدين مراقبة نقطة الجذب من ارتفاعات وزوايا مختلفة، ما يقدّم تجربة مرئية ديناميكية و 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:

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

الخاتمة

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

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