بهترین شیوه‌ها برای نقشه‌های سه‌بعدی

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

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

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

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

نقشه را بارگذاری کنید

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

• بارگذاری API : از بارگذاری پویای ناهمگام نقشه‌های سه‌بعدی برای بارگذاری API جاوااسکریپت نقشه‌ها در بارگذاری اولیه صفحه استفاده کنید.
• کتابخانه‌ها : کتابخانه‌ها را به صورت برنامه‌نویسی شده در صورت نیاز بارگذاری کنید، مانند google.maps.importLibrary("maps3d") . از طرف دیگر، اگر از اجزای وب مانند <gmp-map-3d> مستقیماً در صفحه HTML خود با بارگذاری مستقیم اسکریپت استفاده کنید، کتابخانه‌ها به طور خودکار در زمان مناسب بارگذاری می‌شوند.
• مدیریت ویژگی‌های نقشه پایه: از یک mapId سفارشی برای فیلتر کردن نقاط مورد علاقه نقشه پایه (حالت HYBRID) و کنترل تراکم آنها استفاده کنید، به خصوص اگر برنامه دارای مجموعه عناصر سفارشی خود مانند نشانگرها یا پلی‌لاین‌ها باشد. این کار از شلوغی بصری و همپوشانی احتمالی جلوگیری می‌کند. از طرف دیگر، می‌توانید ویژگی‌های کاشی‌های برداری نقشه پایه مانند نقاط مورد علاقه، پلی‌لاین‌های جاده‌ها، نام جاده‌ها، نام خیابان‌ها (حالت ماهواره‌ای) را غیرفعال کنید.
• رویدادها : به رویدادهای 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> تنظیمات دوربین مانند Tilt بر سرعت بارگذاری تأثیر می‌گذارد. هرچه صحنه بیشتر زوم یا کج شود، چندضلعی‌های دقیق‌تری نمایش داده می‌شوند و نیاز به بارگذاری دارند. سطح جزئیات همچنین به مکان بستگی دارد (مثلاً: شهری با ساختمان‌های زیاد در مقابل روستایی با فقط ویژگی‌های طبیعی).

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

• پیش‌بارگذار بصری : اگرچه <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();

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

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

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

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

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

نشانگرها

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

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

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

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

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

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

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

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

• کاهش حجم فایل با فشرده‌سازی : برای اطمینان از بارگذاری سریع، به خصوص در شبکه‌های تلفن همراه، حجم فایل‌های مدل پیچیده .glb را زیر 5 مگابایت (در حالت ایده‌آل کمتر) نگه دارید. روش اصلی برای دستیابی به این هدف، اعمال فشرده‌سازی Draco روی داده‌های مش درون فایل‌های .glb شماست که می‌تواند حجم فایل را به میزان قابل توجهی (اغلب بیش از 50٪) با حداقل افت کیفیت بصری کاهش دهد.
• مبدأ مدل مرکزی: اطمینان حاصل کنید که نرم‌افزار مدل‌سازی سه‌بعدی، مدل را با مبدأ آن (نقطه 0، 0، 0) که در مرکز پایه مدل قرار دارد، صادر می‌کند. این کار موقعیت‌یابی و چرخش روی نقشه را ساده می‌کند و تضمین می‌کند که مدل به درستی به مختصات Lat، Lng متصل می‌شود.
• مدیریت CORS : اگر فایل‌های مدل شما در دامنه یا CDN متفاوتی نسبت به برنامه وب شما میزبانی می‌شوند، باید سرور میزبان را طوری پیکربندی کنید که هدرهای لازم Cross-Origin Resource Sharing (CORS) را شامل شود (مثلاً Access-Control-Allow-Origin: *). در غیر این صورت، نقشه نمی‌تواند مدل را بارگیری کند.