3D Area Explorer: راهنمای سفارشی سازی، 3D Area Explorer: راهنمای سفارشی سازی

3D Area Explorer راه حلی است که به شما امکان می دهد جوامع را در سه بعدی جذاب کاوش کنید. اهرم‌های راه‌حل: کاشی‌های سه‌بعدی Photorealistic Google ، جستجوی مکان‌ها ، جزئیات مکان ، و APIهای تکمیل خودکار .

شروع به کار:

فعال کردن

تجربه را سفارشی کنید

راه حل 3D Area Explorer بسیار قابل تنظیم است و به شما این امکان را می دهد تا تجربه را مطابق با سفر مشتری خود تنظیم کنید. می توانید با استفاده از کنترل پنل روی رابط کاربری یا با استفاده از فایل config.json سفارشی کنید.

برای سفارشی کردن آماده هستید؟ در اینجا به این صورت است:

مکان

با تنظیم طول و عرض جغرافیایی در فایل config.json نقطه شروع تجربه خود را مشخص کنید.

کنترل دوربین

با انتخاب نوع مدار دوربین کنترل سفر خود را به دست بگیرید: یک مسیر دایره ای کلاسیک یا یک موج سینوسی جذاب.

  • مدار ثابت :

    این یک مدار دایره ای در یک ارتفاع ثابت و حول یک نقطه مورد نظر خاص است.

    با کاوش در دفتر Google سیدنی، یک مدار ثابت را در عمل مشاهده کنید.

  • مدار دینامیک :

    دوربین به آرامی در یک مسیر موج سینوسی در اطراف نقطه مورد نظر تعیین شده حرکت می کند. این حرکت منحصر به فرد بینندگان را قادر می سازد تا نقطه مورد نظر را از ارتفاعات و زوایای مختلف مشاهده کنند و یک تجربه بصری پویا و همه جانبه را ارائه دهند.

    با کاوش در برج ایفل، یک مدار پویا را در عمل ببینید.

نقاط مورد علاقه (POI):

  • با تعیین انواع مکان هایی که می خواهید کشف کنید، کاوش خود را سفارشی کنید. با استفاده از آرایه 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 که با کاما از هم جدا شده اند تا نمایش داده شوند.
  • poi.density : حداکثر تعداد POI انتخاب شده.
  • poi.searchRadius : شعاع جستجوی POIهای نزدیک.
  • camera.speed : سرعت مدار دوربین.
  • camera.orbitType : نوع مدار دوربین ("مدار ثابت" یا "مدار پویا").

مزایای سفارشی سازی URL:

  • با از پیش تعریف کردن تنظیمات انتخابی خود، تجربه کاربری را ساده کنید.
  • سفرهای هدفمند را با مکان ها و POI های از پیش بارگذاری شده به اشتراک بگذارید.
  • تجارب Area Explorer از پیش پیکربندی شده را به صورت یکپارچه در وب سایت ها جاسازی کنید.

با استفاده از سفارشی‌سازی URL، می‌توانید تجربه‌های سفارشی ایجاد کنید و دیگران را به ماجراجویی‌های انتخاب شده دعوت کنید.

سفارشی سازی های بیشتر

بخش قبلی تنظیمات قابل دسترسی از طریق UI یا فایل پیکربندی را بررسی کرد. با این حال، چندین پارامتر داخلی دیگر نیز وجود دارد که می توانید برای سفارشی کردن بیشتر برنامه، آنها را تغییر دهید.

برای انجام این سفارشی سازی های پیشرفته، باید به کد موجود در فایل 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 (15000 کیلومتر از سطح)

  • مقادیر نمونه:

    • longitude : -122.4934، latitude : 37.7951 (پل گلدن گیت)
    • height : 2000 (موقعیت شروع نزدیکتر)

یک مکان از پیش تعریف شده را بارگیری کنید

شی location در config.json مرکز منطقه را تنظیم می کند. این دیدگاه اولیه دوربین در بیننده سزیومی است. coordinates : عرض جغرافیایی ( lat ) و طول جغرافیایی ( lng ) را برای مکانی که می خواهید دوربین ابتدا به آن حرکت کند را مشخص می کند. این مقادیر را تنظیم کنید تا دوربین را در هر مکان خاصی از کره زمین تنظیم کنید.

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

این پیکربندی به شما امکان می‌دهد تا برنامه 3D Place Navigator خود را با بزرگنمایی در مکان خاصی که انتخاب می‌کنید، شروع کنید. می‌توانید از ابزار Geocoding Google برای دریافت مختصات طول و عرض جغرافیایی یک آدرس یا نام مکان با تعیین آن در شی مکان استفاده کنید:

  1. به ابزار Geocoding دسترسی پیدا کنید.
  2. ایجاد یک درخواست ژئوکدینگ روی بخش «خودت امتحان کن» کلیک کرده و مکان انتخابی خود را در قسمت «آدرس» وارد کنید. شما می توانید یک آدرس، نام مکان، یا حتی نشانه ها را مشخص کنید.
  3. ایجاد مختصات روی دکمه "اجرا" کلیک کنید تا درخواست خود را ارسال کنید. این ابزار پاسخی حاوی اطلاعات مختلف در مورد مکان، از جمله مختصات طول و عرض جغرافیایی که در قسمت geometry.location نمایش داده شده است، برمی گرداند.
  4. از ژئوکدها استفاده کنید مقادیر طول و عرض جغرافیایی بازیابی شده را از پاسخ کپی کنید و آنها را در شی coordinates در پیکربندی خود جایگذاری کنید.

توجه : ژئوکدهایی که از این طریق استفاده می‌شوند باید از شرایط مندرج در بخش 3.4 شرایط خدمات پلتفرم Google Maps پیروی کنند، یعنی نباید بیش از 30 روز در حافظه پنهان نگهداری شوند و پس از آن باید بازخوانی شوند.

تصویر

این پیکربندی از ابزار Geocoding برای تعیین خودکار مختصات دفتر مرکزی Google در Mountain View، کالیفرنیا استفاده می‌کند و برنامه 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 را به‌روزرسانی کنید و درباره نحوه افزودن GeoJSON یا سایر داده‌های ارجاع‌شده جغرافیایی به کره زمین، به اسناد سزیوم مراجعه کنید.

بخش های پیکربندی را حذف کنید

برنامه جاوا اسکریپت ما دارای سه بخش اصلی در فایل پیکربندی است: demo/src/[config-panel.js](config-panel.js): location ، poi ، و camera . هر یک از این بخش ها گزینه های پیکربندی را برای جنبه های مختلف برنامه ارائه می دهد. توسعه دهندگان می توانند این بخش ها را بر اساس نیازهای خاص خود سفارشی کنند.

1. یک بخش خاص را از پیکربندی حذف کنید

  • بخش مکان

برای حذف بخش location ، خط زیر را در کد خود پیدا کنید و نظر دهید یا آن را حذف کنید:

const locationConfig = { ...config.location, ...customConfig.location };
  • بخش POI

برای حذف بخش 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);

نتیجه گیری

در این سند، گزینه‌های سفارشی‌سازی مختلف موجود در Area Explorer را بررسی کرده‌ایم تا تجربه کاوش سه‌بعدی شما را تطبیق دهیم. با تغییر رفتار دوربین، تنظیم شیب بصری، و تغییر سطوح زوم، می‌توانید تجربیات منحصربه‌فرد و جذابی ایجاد کنید که تنظیمات و نقاط مورد علاقه شما را به نمایش بگذارد.

به یاد داشته باشید که با پیکربندی های مختلف آزمایش کنید و پارامترها را مطابق با نیازهای خاص خود تنظیم کنید. با استفاده از قدرت سفارشی سازی، می توانید سفرهای فراگیر و شخصی سازی شده ای ایجاد کنید که مخاطبان خود را مجذوب خود کرده و دیدگاه شما را زنده کند.