روال‌های مطلوب برای نقشه‌های سه‌بعدی

این راهنما نگاهی دقیق به مؤلفه‌های وب Maps سه‌بعدی و ملاحظات هنگام ادغام با برنامه شما ارائه می‌دهد.

نمونه جستجوی مکان و یافتن مسیر.

ملاحظات عملکرد

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

بار کردن نقشه

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

• بار کردن میانای برنامه‌سازی کاربردی: از بار کردن پویای ناهمگام «نقشه‌های سه‌بعدی» برای بار کردن Maps JavaScript API در بار کردن اولیه صفحه استفاده کنید.
• کتابخانه‌ها: کتابخانه‌ها را به‌صورت برنامه‌نویسی‌شده در جاهایی که لازم است بار کنید، مثلاً google.maps.importLibrary("maps3d"). یا اگر از مؤلفه‌های وب مانند <gmp-map-3d> مستقیماً در صفحه HTML خود با بارگیری مستقیم اسکریپت استفاده می‌کنید، کتابخانه‌ها به‌طور خودکار در زمان مناسب بارگیری می‌شوند.
• مدیریت ویژگی‌های نقشه پایه: از mapId سفارشی برای فیلتر کردن نقاط موردعلاقه نقشه پایه (حالت «ترکیبی») و کنترل تراکم آن‌ها استفاده کنید، به‌ویژه اگر برنامه مجموعه عناصر سفارشی خودش را داشته باشد، مانند نشانگرها یا چندخطی‌ها. این کار از درهم‌ریختگی بصری و هم‌پوشانی احتمالی جلوگیری می‌کند. یا می‌توانید ویژگی‌های کاشی‌های برداری نقشه پایه مانند نقاط موردعلاقه، چندخطی‌های جاده، نام جاده‌ها، نام خیابان‌ها (حالت ماهواره‌ای) را غیرفعال کنید.
• رویدادها: به رویدادهای gmp-steadystate یا gmp-error گوش دهید تا منطق بعدی خود را بسازید، مانند بارگذاری نشانگرها، متحرک‌سازی دوربین.

بوم پس‌زمینه > کاشی‌های کوچک‌شده > مش عوارض زمین > مش سطح (مثلاً: ساختمان‌ها) > برچسب‌های مکان‌های جالب و جاده، عناصر سفارشی که به‌طور موازی بار می‌شوند (نشانگرها، مدل‌های سه‌بعدی، و غیره)

• تعامل کاربر: قبل‌از ایجاد تغییر در محتوای نقشه، منتظر رویداد gmp-steadystate بمانید. اگر کاربر قبل‌از رویداد اولیه gmp-steadystate شروع به تعامل (حرکت، بزرگ‌نمایی) با نقشه کند، رویداد فقط پس‌از توقف تعامل کاربر راه‌اندازی می‌شود. از نمایش یا به‌روزرسانی محتوای هم‌پوشان (مانند نشانگرها یا چندضلعی‌ها) هنگامی که کاربر نقشه را جابه‌جا می‌کند یا بزرگ‌نمایی می‌کند، خودداری کنید. از نمایش یا به‌روزرسانی محتوای هم‌پوشان (مانند نشانگرها یا چندضلعی‌ها) با گوش دادن به gmp-centerchange، gmp-headingchange، gmp-rangechange، gmp-rollchange، gmp-tiltchange خودداری کنید.

• از requestAnimationFrame() (rAF) برای به‌روزرسانی‌های مداوم استفاده کنید و محاسبات فشرده را کاملاً از فراخوانی‌های ترسیم جدا کنید.

  • استفاده از rAF: به‌روزرسانی‌ها را با نرخ نمایش مرورگر همگام‌سازی می‌کند تا پویانمایی روان با نرخ ۶۰ فریم در ثانیه و مصرف برق کاهش‌یافته ارائه شود.
  • از کارهای ترسیمی سنگین اجتناب کنید: درطول به‌روزرسانی نهایی، کارهای سنگین غیرترسیمی انجام ندهید.
  • منطق جداگانه: همه منطق‌های فشرده را قبل‌از فراخوانی‌های به‌روزرسانی مؤلفه وب کمینه در حلقه rAF انجام دهید.

• تنظیمات اولیه صحنه: <gmp-map-3d> تنظیمات دوربین مانند «شیب» بر سرعت بارگیری تأثیر می‌گذارد. هرچه صحنه بیشتر بزرگ‌نمایی یا کج شود، چندضلعی‌های دقیق‌تری نمایش داده می‌شود و نیاز به بار کردن دارد. سطح جزئیات به مکان نیز بستگی دارد (مثلاً: شهری با ساختمان‌های زیاد درمقابل حومه شهر با ویژگی‌های طبیعی).

  • نماهای کمتر بزرگ‌نمایی‌شده (ارتفاع زیاد)، کم‌شیب یا بدون شیب را ترجیح دهید.
  • مرزهایی (نمونه) به نقشه اضافه کنید تا کاربران روی منطقه خاصی متمرکز بمانند و کاشی‌ها بتوانند به‌طور کامل بار شوند.

• پیش‌بارگذار تصویری: اگرچه <gmp-map-3d> بسیار سریع بار می‌شود، ممکن است برای کاربرانی که دستگاه‌های ضعیف (GPU ضعیف) یا پهنای باند کم (4G کند) دارند، نمایش با وضوح کامل کمی طول بکشد. در این حالت می‌توانید پیش‌بارگذاری با تصویر، پویانمایی، یا نوشتار ایجاد کنید و صحنه سه‌بعدی در پس‌زمینه بار شود. رویداد کلیدی را برای استفاده در زیر ببینید:

نمونه پیش‌بارکننده

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• نقشه دوبعدی:
  • نقشه دوبعدی جایگزین (ماهواره) می‌تواند به این کاربران ارائه شود و همچنان شامل داده‌های جغرافیایی شما مانند نشانگرها باشد.

• یا می‌توان نقشه ایستا دوبعدی مکمل را در حالت «ماهواره» برای کاربران نمایش داد تا مکان موردنظر را هنگام بار شدن تجسم کنند.

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

مدیریت و عملکرد عناصر دیداری

‫3D Maps چندین روش برای نمایش عناصر بصری مانند نشانگرها، چندخطی‌ها، و مدل‌های سه‌بعدی با عملکرد بهینه و حداقل زمان برای رندر کردن ارائه می‌دهد، حتی برای حجم‌های بالاتر عناصر بصری.

نشانگرها

سناریو نمونه: ۱۵۰ تا ۳۰۰ میلی‌ثانیه برای بار کردن ۳۰۰ نشانگر با ۴۱ نویسه‌نگاشت نشانگر svg مختلف (رایانه کیفی مدرن: macOS M3 Pro،‏ Chrome)

• گزینه سفارشی‌سازی بهینه:
  • PinElement: برای تغییرات نشانگر اصلی (رنگ، مقیاس، حاشیه، گلیف نوشتار)، از عنصر <gmp-pin> یا کلاس PinElement استفاده کنید. این روش سفارشی‌سازی، بهترین عملکرد را دارد.
  • از نشانگرهای HTMLImageElement یا SVGElement به‌ندرت استفاده کنید: از آن‌ها برای سفارشی‌سازی بیشتر استفاده کنید، مانند افزودن شفافیت یا تزریق تصویری مانند نماد به SVGElement (نیاز به کدگذاری base64 دارد). این قلم‌ها هنگام بار شدن شطرنجی می‌شوند و سربار عملکردی دارند. HTMLImageElement و SVGElement باید قبل‌از اختصاص دادن به جایگاه پیش‌فرض Marker3DElement، در عنصر <template> قرار داده شوند.
  • درحال‌حاضر افزودن HTML یا CSS ساده دردسترس نیست.
• مدیریت رفتار تصادم: از ویژگی collisionBehavior نشانگر بهره ببرید. برای نشانگرهای مهمی که باید همیشه نمایان باشند، رفتار را به‌طور مناسب تنظیم کنید. برای نشانگرهای کم‌اهمیت‌تر، اجازه دهید پنهان شوند تا تجربه نقشه تمیزتر و خلوت‌تری حفظ شود، به‌ویژه در سطوح بزرگ‌نمایی بالا.
• فقط نقاط موردعلاقه حیاتی: فقط از drawsWhenOccluded (یا تنظیم ویژگی به‌صورت برنامه‌نویسی‌شده) برای نشانگرهایی استفاده کنید که کاملاً باید ازطریق ساختمان‌ها یا زمین دیده شوند (مثلاً هدف نجات، خط تأسیسات دفن‌شده، یا چهرک کاربر).
• آزمایش انسداد: ازآنجایی‌که نقشه سه‌بعدی است، نشانگرها می‌توانند به‌صورت بصری توسط ساختمان‌ها یا زمین پنهان شوند (مسدود شوند). زوایای مختلف دوربین و ارتفاع نشانگر را آزمایش کنید تا مطمئن شوید نقاط موردعلاقه مهم قابل‌مشاهده باقی می‌مانند یا منطقی را برای تنظیم رؤیت‌پذیری و ارتفاع درصورت مسدود شدن پیاده‌سازی کنید.
• استفاده از ارتفاع: در نقشه‌های سه‌بعدی، نشانگرها باید از موقعیت با مقدار ارتفاع استفاده کنند. برای نشانگرهای مرتبط با زمین یا ساختمان‌ها، از altitudeMode: 'RELATIVE_TO_GROUND'،‏ 'RELATIVE_TO_MESH' یا تنظیمات مشابه استفاده کنید تا مطمئن شوید که نشانگر هنگام کج شدن یا چرخیدن نقشه به‌درستی لنگر می‌اندازد.

چندضلعی‌ها و چندخطی‌ها

سناریو نمونه: ۱۰۰ تا ۱۵۰ میلی‌ثانیه برای بار کردن ۱۰۰۰ چندضلعی (رایانه کیفی مدرن: macOS M3 Pro،‏ Chrome)

• ساده‌سازی هندسه: قبل‌از رندر کردن، الگوریتم ساده‌سازی را روی داده‌های مسیرتان اعمال کنید. این کار تعداد رأس‌ها را کاهش می‌دهد و درعین‌حال شکل کلی را حفظ می‌کند، که به‌طور چشمگیری سرعت رندر کردن را بهبود می‌بخشد، به‌ویژه برای مرزها یا مسیرهای پیچیده.
• کاهش براساس سطح بزرگ‌نمایی: برای مجموعه‌داده‌های بسیار بزرگ، بار کردن هندسه با جزئیات بیشتر را فقط زمانی درنظر بگیرید که کاربر روی منطقه بزرگ‌نمایی کرده باشد. در سطح بزرگ‌نمایی پایین، فقط نسخه بسیار ساده‌شده چندخطی یا چندضلعی لازم است.
• پیش‌محاسبه برای چندضلعی‌های برآمده: اگر چندضلعی‌های شما برآمده هستند (extruded: true)، داده‌های مسیر یک حجم سه‌بعدی (یک مش) را تعریف می‌کنند. پردازش چندضلعی‌های پیچیده با تعداد رأس‌های زیاد ازنظر محاسباتی پرهزینه است. مطمئن شوید داده‌های منبع چندضلعی‌هایتان تا حد امکان ساده باشد.
• آزمایش عملکرد چندخطی و چندضلعی: هنگام افزودن چندخطی‌ها/ چندضلعی‌های متعدد یا پیچیده، به‌ویژه زمانی که برای سه‌بعدی اکسترود شده‌اند، مطمئن شوید که باعث افت نرخ فریم نمی‌شوند. تعداد رأس‌ها را محدود کنید یا درصورت لزوم از الگوریتم‌های ساده‌سازی استفاده کنید.
• هنگام به‌روزرسانی شکل، کل آرایه مسیر را در یک عملیات واحد اصلاح کنید، نه اینکه عناصر را به‌صورت جداگانه اصلاح کنید و حلقه ایجاد کنید. یک عملیات واگذاری تکی (مثلاً polyline.path = newPathArray;) بسیار کارآمدتر از چندین به‌روزرسانی تکراری است.
• از چندخطی‌های برآمده (درصورت امکان) اجتناب کنید: اگرچه چندخطی‌ها می‌توانند از مقدار ارتفاع برای قرار گرفتن در فضای سه‌بعدی استفاده کنند، برآمدگی چندخطی (مثلاً دادن پهنای قلم و بازه ارتفاع بزرگ به آن) می‌تواند ازنظر گرافیکی سنگین باشد. هرزمان ممکن بود، برای عملکرد بهتر از چندخطی‌های دوبعدی روی زمین (RELATIVE_TO_GROUND) یا حداقل پهنای قلم استفاده کنید.
• از drawsOccludedSegments فقط برای عناصر مسیریابی مهم استفاده کنید. برای شکل‌های پس‌زمینه یا زمینه‌ای، اجازه دهید به‌طور طبیعی توسط هندسه سه‌بعدی نقشه پوشانده شوند. نمایش هندسه پنهان غیربحرانی پیچیدگی غیرضروری به پردازش اضافه می‌کند.

مدل‌های سه‌بعدی

پرداز مدل سه‌بعدی .glb و تعامل‌پذیری مانند رویداد gmp-click در <gmp-map-3d> بسیار سریع است.

سناریو نمونه: حدود ۲ ثانیه طول می‌کشد تا ۱۰۰۰ مورد از یک مدل سه‌بعدی سبک (۲۰۰ کیلوبایت) که درطول یک مسیر حرکت می‌کند نمایش داده شود. (رایانه کیفی مدرن: macOS M3 Pro،‏ Chrome)

• به‌حداقل رساندن اندازه فایل با فشرده‌سازی: برای اطمینان از بارگیری سریع، به‌ویژه در شبکه‌های تلفن همراه، اندازه فایل‌های مدل glb .پیچیده را زیر ۵ مگابایت (در حالت ایده‌آل کمتر) نگه دارید. روش اصلی برای دستیابی به این هدف، اعمال فشرده‌سازی Draco روی داده‌های مش در فایل‌های ‎.glb است که می‌تواند اندازه فایل را به‌طور قابل‌توجهی (اغلب بیش‌از ۵۰٪) با حداقل افت کیفیت بصری کاهش دهد.
• مبدأ مدل مرکزی: مطمئن شوید نرم‌افزار مدل‌سازی سه‌بعدی مدل را با مبدأ آن (نقطه ۰، ۰، ۰) در مرکز پایه مدل صادر می‌کند. این کار موقعیت‌یابی و چرخش روی نقشه را ساده می‌کند و تضمین می‌کند که مدل به‌درستی به مختصات طول و عرض جغرافیایی متصل شود.
• مدیریت CORS: اگر فایل‌های مدل شما در دامنه یا CDN متفاوتی نسبت به برنامه وب شما میزبانی می‌شوند، باید سرور میزبان را پیکربندی کنید تا شامل سرصفحه‌های ضروری «اشتراک‌گذاری منابع میان‌مبدئی» (CORS) باشد (مثلاً Access-Control-Allow-Origin: *). درغیراین‌صورت، نقشه نمی‌تواند مدل را بار کند.