سفارشی‌سازی‌های «کاوشگر سه‌بعدی منطقه»

«کاوشگر سه‌بعدی منطقه» راهکاری است که به شما امکان می‌دهد انجمن‌ها را به‌صورت سه‌بعدی جذاب کاوش کنید. این راهکار از موارد زیر بهره می‌برد: کاشی‌های سه‌بعدی واقع‌نمای Google، جستجوی جاها، جزئیات جا، و میاناهای برنامه‌سازی کاربردی تکمیل خودکار.

درحال شروع کردن

فعال کردن

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

راهکار «کاوشگر سه‌بعدی منطقه» بسیار قابل‌سفارشی‌سازی است و به شما امکان می‌دهد تجربه را با سفر مشتری‌تان تطبیق دهید. می‌توانید بااستفاده از صفحه کنترل در میانای کاربر یا بااستفاده از فایل config.json سفارشی‌سازی کنید.

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

مکان

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

کنترل دوربین

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

  • مدار ثابت:

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

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

  • مدار پویا:

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

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

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

  • با تعیین انواع مکان‌هایی که می‌خواهید کاوش کنید، کاوشتان را سفارشی کنید. بااستفاده از آرایه types در config.json، از میان موزه‌ها، پارک‌ها، مدارس، و غیره انتخاب کنید.
  • با تنظیم پارامتر density، حداکثر تعداد «نقاط جالب» نمایش‌داده‌شده را تنظیم کنید.
  • searchRadius (in meters) را اصلاح کنید تا گنجینه‌های پنهان اطراف را اضافه کنید یا روی مناطق خاصی تمرکز کنید.
  • سرعت انتخاب‌شده برای حرکت دوربین را با پارامتر speed (in revolutions per minute) تنظیم کنید.

درحال پیش‌بارگیری کاوش شما: با سفارشی‌سازی نشانی وب عمیق‌تر کاوش کنید

«کاوشگر سه‌بعدی منطقه» به شما امکان می‌دهد کاوش خود را با سفارشی‌سازی نشانی وب ازپیش تعریف کنید. این کار نیاز به پیکربندی دستی را ازبین می‌برد و تجربه کاربری را ساده‌تر می‌کند.

ساختن نشانی وب عالی:

کافی است پارامترهای خاصی را به نشانی وب Area Explorer اضافه کنید تا مکان و تنظیمات دیگر را ازپیش تنظیم کنید. برای مثال:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

این نشانی وب نقطه شروع را روی طول و عرض جغرافیایی مشخص‌شده تنظیم می‌کند، و فوراً شما را به مکان انتخاب‌شده منتقل می‌کند. پارامترهای دردسترس:

  • ‫location.coordinates.lat: عرض جغرافیایی مکان انتخابی شما.
  • ‫location.coordinates.lng: طول جغرافیایی مکان انتخابی شما.
  • poi.types: فهرست جداشده با کاما از انواع نقطه موردعلاقه برای نمایش.
  • ‫poi.density: حداکثر تعداد انتخاب‌شده برای نقاط موردعلاقه.
  • ‫poi.searchRadius: شعاع جستجوی نقاط موردعلاقه اطراف.
  • camera.speed: سرعت چرخش دوربین.
  • camera.orbitType: نوع مدار دوربین («fixed-orbit» یا «dynamic-orbit»).

مزایای سفارشی‌سازی نشانی وب:

  • با تعریف کردن تنظیمات انتخابی‌تان ازقبل، تجربه کاربری را ساده کنید.
  • سفرهای هدفمند را با مکان‌ها و نقاط جالب ازپیش بارشده خاص هم‌رسانی کنید.
  • تجربه‌های ازپیش پیکربندی‌شده «کاوشگر منطقه» را به‌طور یکپارچه در وب‌سایت‌ها جاسازی کنید.

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

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

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

برای انجام این سفارشی‌سازی‌های پیشرفته، باید به کد موجود در فایل 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
  • مقدار پیش‌فرض: ۱۰۰
  • توضیحات: ارتفاع دوربین را نسبت به مکان هدف هنگام پرواز به یک نقطه تعریف می‌کند.
  • مقادیر نمونه:
    • ‫۵۰: نمای نزدیک‌تر، با تأکید بر جزئیات.
    • ‫۲۰۰: چشم‌انداز تمام‌نمای بیشتر.

زاویه دوربین

شیب اولیه دوربین با 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: -۳۰ (۳۰ درجه چرخش به پایین)
    • ‫AUTO_ORBIT_PITCH_AMPLITUDE: ۱۰ (تغییر گام به‌اندازه ۱۰ درجه درطول زمان)

توضیحات: زاویه دوربین، کجی بصری نقشه است که با درجه اندازه‌گیری می‌شود. به آن «کج کردن» هم می‌گویند. این تنظیمات زاویه اولیه دوربین و تنظیم زاویه پویا را درطول چرخش‌های خودکار تعریف می‌کند.

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

  • BASE_PITCH: ۰ (تراز کردن دوربین)
  • ‫AUTO_ORBIT_PITCH_AMPLITUDE: ۰ (بدون تغییر زیروبمی)

محدوده دوربین و بزرگ‌نمایی

این پارامترها میزان بزرگ‌نمایی اعمال‌شده هنگام تمرکز روی نقاط خاص را تنظیم می‌کنند. مقادیر کوچک‌تر به‌معنای بزرگ‌نمایی نزدیک‌تر است.

// 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: ۰٫۵۵ (تغییر فاصله نسبی)
  • ZOOM_FACTOR: 20 (camera zoom factor)

شرح: این تنظیمات تغییرات محدوده را درطول حرکت دوربین و سطح بزرگ‌نمایی برای نمای نزدیک‌تر تعریف می‌کند.

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

  • ‫RANGE_AMPLITUDE_RELATIVE: ۱ (انحراف محدوده کامل)
  • 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: ۰ (بدون جابه‌جایی چرخش)
    • pitch: Cesium.Math.toRadians(-30) (زاویه ۳۰ درجه به‌سمت پایین)
    • range: ۸۰۰ (۸۰۰ متر از مرکز)
  • توضیحات: جهت، زاویه، و محدوده دوربین را برای بازنشانی نما تعریف می‌کند.
  • مقادیر نمونه:
    • ‫heading: ۴۵ (درجه، نمای شمال غربی)
    • range: ۱۵۰۰ متر (دورتر از مرکز)

مختصات شروع

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: ۰
    • latitude: 60
    • height: ۱۵۰۰۰۰۰۰ (۱۵۰۰۰ کیلومتر بالاتر از سطح)

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

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

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

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

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

این پیکربندی به شما امکان می‌دهد برنامه «ناوبری سه‌بعدی مکان» را با بزرگ‌نمایی روی مکان خاصی که انتخاب می‌کنید شروع کنید. می‌توانید از ابزار «زمین‌کدیابی» Google برای دریافت مختصات طول و عرض جغرافیایی نشانی یا نام مکان با مشخص کردن آن در شیء مکان استفاده کنید:

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

توجه: زمین‌کدیاب‌هایی که به این روش استفاده می‌شوند باید از شرایط ذکرشده در بخش ۳.۴ شرایط خدمات Google Maps Platform پیروی کنند، یعنی نباید بیش‌از ۳۰ روز در حافظه نهان ذخیره شوند و پس‌از آن باید بازآوری شوند.

تصویر

این پیکربندی از ابزار «زمین‌کدیابی» برای تعیین خودکار مختصات دفتر مرکزی Google در مانتین ویو، کالیفرنیا استفاده می‌کند و برنامه «کاوشگر سه‌بعدی مکان» را با دوربین متمرکزشده روی آن مکان راه‌اندازی می‌کند.

سفارشی‌سازی‌های پیشرفته

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

افزودن مسیر دوربین جدید

این راهکار به‌طور پیش‌فرض دو مسیر دوربین متفاوت را پیاده‌سازی می‌کند:

fixed-orbit" | "dynamic-orbit"

اما اگر بخواهید می‌توانید مسیر دوربین جدیدی ایجاد کنید و آن را بااستفاده از

/src/utils/cesium.js در تابع calculateAutoOrbitFrame.

برای استفاده از این محاسبه مسیر جدید در پانل پیکربندی، به پیاده‌سازی در demo/src/camera-settings.js. مراجعه کنید

افزودن انواع مکان بیشتر

فهرست انواع مکان‌ها برای پیکربندی را می‌توان در فایل demo/src/place-settings.js تنظیم کرد. از خط ۴، انواع مکان‌هایی که در نسخه نمایشی دردسترس هستند شروع می‌شود.

اگر می‌خواهید از انواع مکان خاصی بدون تغییر منبع نمایشی استفاده کنید، می‌توانید آن‌ها را به فایل config.json در poi.types اضافه کنید

سفارشی‌سازی سبک (css)

برای سبک‌ها، با متغیرهای CSS کار کردیم. همه مرورگرهای اصلی از آن‌ها پشتیبانی می‌کنند و امکان تغییر یک خط در مکانی مرکزی و به‌روزرسانی ویژگی‌های CSS خاص را فراهم می‌کنند. متغیرهای CSS ما در src/main.css. تعریف شده‌اند. در آنجا می‌توانید رنگ‌ها، تنظیمات قلم، و فاصله‌گذاری یا حاشیه‌ها را برای کل برنامه تنظیم کنید.

رونهاد کردن داده‌های اضافی

برای هم‌پوشانی داده‌های اضافی، باید فایل src/utils/cesium.js را به‌روز کنید و برای نحوه افزودن GeoJSON یا سایر داده‌های ارجاع جغرافیایی به کره زمین، به اسناد cesium مراجعه کنید.

برداشتن بخش‌های پیکربندی

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

‫۱.بخش خاصی را از پیکربندی بردارید

  • بخش مکان

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

const locationConfig = { ...config.location, ...customConfig.location };
  • بخش نقطه موردعلاقه

برای برداشتن بخش poi، خط زیر را در کدتان پیدا کنید و آن را کامنت کنید یا حذف کنید:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • بخش دوربین

برای برداشتن بخش camera، خط زیر را در کدتان پیدا کنید و آن را کامنت کنید یا حذف کنید:

const cameraConfig = { ...config.camera, ...customConfig.camera };

۲. به‌روزرسانی پیکربندی‌های ترکیبی

پس‌از برداشتن بخش، به‌روزرسانی شیء پیکربندی ترکیبی ضروری است. این شیء پیکربندی پیش‌فرض را با هرگونه سفارشی‌سازی ادغام می‌کند. خصوصیت مربوطه را از شیء 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
};

۳. تنظیم کردن عناصر میانای کاربر

اگر برداشتن بخش به‌معنای برداشتن عناصر میانای کاربر مرتبط نیز باشد، کد را به‌طور مقتضی در کد html به‌روز کنید. برای مثال، اگر می‌خواهید بخش خاصی را از «قاب سرپرستی» بردارید، مثلاً سرعت دوربین، باید هم کد js و هم کد html را برای آن به‌روز کنید.

۴. برداشتن بخش تنظیمات دوربین

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

درحال برداشتن خلاصه بخش مکان

const locationSection = await getLocationSettingsSection(locationConfig);

نتیجه‌گیری

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

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