سلام سلام
من بعد از مدت ها از لاک خودم اومدم بیرون و شروع کردم به نوشتن!
یه موضوعی بود که چند وقتی ذهنم درگیرش بود و راه حلی براش پیدا نکرده بودم. من چند ماهی هست به واسطه پروژه ای که در شرکت انجام میدم با نمایش نقشه (در سایت و اپ موبایل) زیاد سروکار دارم. به این صورت که دیتاهای زیادی باید روی نقشه نمایش داده بشه و چالشی که اینجا وجود داره این هست که اگر بخواهیم تعداد خیلی زیادی مارکر (یا پین) رو روی نقشه نمایش بدیم، صفحه به شدت کند میشه و عملا نمیشه کاری انجام داد.برای اینکه بتونیم این مشکل رو حل کنیم دو تا راه حل وجود داره. قبل گفتن راه حل ها اینو بگم که من از OpenStreetMap به عنوان Tile Server و از Leaflet به عنوان Map Client در وب استفاده می کنم.
اولین راه حلی که برای این مسئله پیدا کردیم این بود که از Clustering (به فارسی میشه بهش گفت دسته بندی یا خوشه بندی) استفاده کرد، به این صورت که هر چند تا مارکر نزدیک به هم تجمیع میشن و با زوم کردن روی نقشه میشه به تعداد بیشتری از مارکرها رسید و در زوم های کم فقط کلیاتی از تعداد مارکرها رو میشه دید. از اون جایی که من میخوام درباره ی راه حل دوم صحبت کنم، بنابراین در اینجا فقط یک صفحه که خروجی خوشه بندی رو نشون بده میارم تا متوجه بشید راجع به چی صحبت کردم!
این لینک رو باز کنید تا ببینید Clustering یعنی چی؟ Clustering 50K Markers
اگر در آینده فرصت و حسش بود یه پست مفصل درباره ی Clustering میزارم.
حالا اگه کسی که قراره کار رو بهش تحویل بدید با خوشه بندی حال نکنه و بگه من میخوام همه نقطه ها رو روی نقشه ببینم و صفحه هم کند نباشه، اون وقت چیکار باید کرد؟!
اول از همه بزارید بگم چرا وقتی تعداد زیادی مارکر روی نقشه می اندازیم، سرعت به شدت افت میکنه. Leaflet به ازای هر Marker که تعریف می کنید و به نقشه اضافه می کنید یک DOM element درنظر می گیره. حالا درنظر بگیرید که شما 10،000 تا مارکر به نقشه اضافه می کنید. این باعث میشه 10 هزار تا element به صفحه HTML شما اضافه بشه! در نتیجه سرعت به شدت پایین میاد و عملا مرورگر قفل میکنه. راه حلی که گوگل به صورت هوشمندانه استفاده کرده رو در تصویر زیر بهتون نشون میدم:
همان طور که در عکس می بینید تمامی المان های روی نقشه داخل یک canvas قرار گرفته اند و سپس canvas به DOM اضافه شده است. ما هم از گوگل کمک می گیریم!
تو این روش به جای Marker از CircleMarker استفاده می کنیم و برای اینکه به ازای هر نقطه یک DOM Element تو leaflet ساخته نشه، بهش میگیم تمامی نقاط رو بریز توی یک Canvas و بعد فقط canvas رو به DOM اضافه کن. به همین راحتی!
از اون جایی که اینجا نمیشه خوب تکه کدها رو آورد، من باز هم خروجی نهایی کار همراه با سورس کد رو میزارم براتون تا بتونید ازش استفاده کنید!
لینک خروجی نهایی (نمایش 100 هزار نقطه روی نقشه): 100K dots on map
لینک سورس کد:
امیدوارم این پست مفید باشه براتون. تا پست بعدی بای :)
