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

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

البدء:

تفعيل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • تخصيص الاستكشاف من خلال تحديد أنواع الأماكن التي تريد زيارتها جديدة. يمكنك الاختيار من بين المتاحف والمنتزهات والمدارس وغيرها باستخدام 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: Celsium.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 ضمن الإعدادات.

ملاحظة: يجب أن تتبع الرموز الجغرافية المستخدمة بهذه الطريقة المصطلحات الموضحة في "خرائط Google". بنود خدمة الخدمات 3.4 أي شرط ألا يتم تخزينها مؤقتًا لمدة تزيد عن 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/ceium.js الرجوع إلى وثائق السيزيوم لمعرفة كيفية إضافة 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);

الخاتمة

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

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