اگر در دهه گذشته از Google Maps، OpenStreetMap یا هر نقشه وب مدرنی استفاده کردهاید، احتمالاً هر جاده و ساختمانی که دیدید به صورت vector tile بارگذاری شده بود. این فرمت قهرمان ناشناخته نقشهنگاری وب مدرن است. به همین دلیل نقشههای وب سریع بارگذاری میشوند، روی هر صفحهای واضح به نظر میرسند و به طراحان اجازه میدهند نقشههای زیبا با استایل برند خود بسازند بدون اینکه کل جهان را برای هر برند دوباره رندر کنند.
این راهنما توضیح میدهد vector tile چیست، چطور کار میکند، چرا برای اکثر موارد استفاده جایگزین raster tileها شده و MapAtlas چطور در محیط production آنها را serve میکند.
تعریف در یک جمله
یک vector tile یک فایل باینری کوچک است که ویژگیهای جغرافیایی برای یک tile از نقشه در یک سطح zoom مشخص را شامل میشود، به صورت داده نه تصویر از پیش رندرشده.
بخش "داده نه تصویر" همه چیز است. با یک raster tile، سرور قبلاً تصمیم گرفته هر پیکسل چه شکلی باشد. با یک vector tile، کلاینت هندسه زیرین (خطوط، چندضلعیها، نقاط) و برچسبها را دریافت میکند و آنها را در زمان اجرا به هر استایلی که کاربر انتخاب کرده رندر میکند.
چطور نقشههای وب از tile ها استفاده میکنند
هر نقشه وبی که تا به حال استفاده کردهاید جهان را به یک شبکه tile تقسیم میکند. در zoom 0، کل جهان در یک tile جا میشود. در zoom 1 چهار tile وجود دارد، در zoom 2 شانزده تا و به همین ترتیب ادامه مییابد. هر tile با سه عدد شناسایی میشود: zoom (z)، ستون (x) و ردیف (y). وقتی pan یا zoom میکنید، کتابخانه نقشه فقط tile های قابل مشاهده را fetch میکند، آنها را cache میکند و آنهایی که از viewport خارج شدهاند را دور میاندازد.
برای raster tileها، سرور یک PNG برای هر (z, x, y) از پیش رندر میکند. این کار میکند اما محدودیت دارد: استایل در زمان رندر ثابت است، هر تغییر استایل یعنی رندر مجدد کل جهان، و تصاویر باید در رزولوشن ۱x و ۲x برای نمایش واضح روی صفحههای Retina ارسال شوند.
Vector tileها مدل را معکوس میکنند. سرور هندسه ارسال میکند. کلاینت رندر میکند. یک tileset از هر تعداد استایل پشتیبانی میکند، در هر DPI واضح به نظر میرسد و حجم کمی روی wire دارد.
فرمت MVT
فرمت استاندارد de facto، MVT است، مشخصات Mapbox Vector Tile. MVT یک encoding با Protocol Buffers است که ویژگیها را در لایههای نامگذاریشده سازماندهی میکند، معمولاً:
transportation(جادهها، راهآهنها)buildings(پایهها)places(شهرها، شهرکها، محلههای نامدار)landuse(پارکها، مسکونی، تجاری)water(اقیانوسها، دریاچهها، رودخانهها)boundaries(مناطق اداری)
هر feature در یک لایه هندسه (نقطه، خط، چندضلعی) و مجموعهای از ویژگیها دارد (نام، نوع، اهمیت، گونههای زبانی). مختصات هندسه در فضای مختصات محلی tile به صورت اعداد صحیح بین ۰ و ۴۰۹۶ هستند که همین است که اندازه فشرده MVT را ممکن میکند.
MVT کاملاً باز، vendor-neutral و توسط هر موتور رندر اصلی پشتیبانی میشود: Mapbox GL JS، MapLibre GL JS، OpenLayers، deck.gl و SDKهای Mapbox برای iOS و Android.
چرا Vector Tileها جایگزین Raster Tileها شدند
پنج دلیل وجود دارد که نقشههای وب مدرن تقریباً همه برای لایه پایه از vector tileها استفاده میکنند:
انعطاف استایل. با یک tileset میتوانید یک تم روشن، یک تم تاریک، یک استایل بهینه برای چاپ، یک استایل overlay ماهوارهای و یک استایل رنگ برند برای بازاریابی رندر کنید. بدون رندر مجدد روی سرور.
واضح در هر DPI. یک raster tile در ۱x روی صفحه Retina محو به نظر میرسد. یک vector tile روی دستگاه کلاینت در رزولوشن native دستگاه تازه رندر میشود.
payload های کوچکتر. یک tile شهری پیچیده اغلب به صورت MVT کوچکتر از یک PNG با کیفیت بالا است، بهخصوص با gzip.
تعاملی بودن در زمان اجرا. میتوانید یک جاده خاص را هنگام hover برجسته کنید، لایههای غیرضروری را محو کنید، انتقالها را انیمیت کنید و به کلیک روی feature پاسخ دهید چون کلاینت میداند هر پیکسل چه چیزی را نشان میدهد.
Zoom و چرخش روان. هندسه vector بدون aliasing میچرخد و مقیاس میشود. Raster tileها وقتی بین سطوح zoom صحیح zoom میشوند یا از محور چرخانده میشوند، pixelated به نظر میرسند.
هزینه آن کار CPU و GPU کلاینت است که روی هر دستگاهی که در دهه گذشته ساخته شده مشکلی نیست.
چه چیزی را در زمان اجرا استایل میدهید
یک document استایل (معمولاً یک JSON در Mapbox Style Spec، که MapLibre هم پذیرفته) توصیف میکند هر لایه چطور باید کشیده شود. نمونههایی از چیزهایی که میتوانید بدون لمس کردن داده tile تغییر دهید:
- رنگ هر کلاس جاده
- عرض خطوط جاده که با zoom تغییر میکند
- کدام برچسبهای مکان در کدام zoom نشان داده میشوند
- فونت، اندازه و هاله هر برچسب متنی
- دیدهشدن لایههای کامل (خاموش کردن همه مرزهای اداری با یک toggle)
- Pattern fill، خطوط dash، gradient، blur
این چیزی است که نقشههای branded را ممکن میکند. یک تیم طراحی میتواند یک Mapbox style JSON، یک MapLibre style JSON یا یک MapAtlas style preset ارسال کند و همان tileset در هویت برند آنها رندر میشود.
Cache و عملکرد
Vector tileها به خوبی cache میشوند چون هندسه جهان هر دقیقه تغییر نمیکند. Cache های edge CDN معمولاً MVT tile ها را ساعتها یا روزها نگه میدارند. کتابخانه نقشه از پیش tile ها را در جهت احتمالی pan کاربر fetch میکند و tile های اخیراً مشاهدهشده را در حافظه نگه میدارد. نتیجه این است که کاربری که در یک شهر pan میکند تجربه روانی میبیند چون tile های viewport بعدی معمولاً قبلاً بارگذاری شدهاند.
سرویسهای tile production معمولاً tile ها را در مسیری مثل /{z}/{x}/{y}.pbf expose میکنند (PBF پسوند باینری protobuf است). یک اتصال HTTP/2 یا HTTP/3 مدرن دهها درخواست tile را به صورت موازی multiplex میکند.
جایگاه MapAtlas
MapAtlas از طریق محصول Dynamic Maps با میزبانی فقط در EU، قیمتگذاری قابل پیشبینی و یک schema tile طراحیشده برای استایلدهی downstream و annotation هوش مصنوعی، vector tile های سازگار با MVT serve میکند. همان لایههای داده که نقشه قابل مشاهده را میسازند (مکانها، حملونقل، ساختمانها، نقاط جالب) از طریق Geocoding و Search APIs هم به عنوان داده ساختاریافته expose میشوند.
برای بررسی عمیقتر لایه رندر، راهنمای Custom Map Styling نشان میدهد چطور یک استایل vector tile aligned با برند از ابتدا تا انتها بسازید.
سوالات متداول
Vector tile چیست؟
یک vector tile یک فایل باینری کوچک است که ویژگیهای جغرافیایی (جادهها، ساختمانها، نقاط جالب، برچسبها) برای یک tile از نقشه وب در یک سطح zoom مشخص را شامل میشود. برخلاف raster tile که یک تصویر PNG یا JPG از پیش رندرشده است، یک vector tile هندسه و ویژگیهای زیرین را به صورت داده نگه میدارد. مرورگر یا کلاینت موبایل این داده را در زمان اجرا به پیکسل تبدیل میکند، یعنی همان tile میتواند با استایلهای مختلف رندر شود، چرخانده شود و در هر تراکم پیکسل بدون کاهش کیفیت نمایش داده شود.
تفاوت vector tile و raster tile چیست؟
یک raster tile یک تصویر PNG یا JPG ثابت است که معمولاً ۲۵۶×۲۵۶ یا ۵۱۲×۵۱۲ پیکسل است و با یک استایل ثابت از پیش روی سرور رندر شده. یک vector tile یک فایل باینری است که هندسه و ویژگیها را نگه میدارد و توسط کلاینت به پیکسل رندر میشود. Vector tileها از نظر حجم کوچکتر هستند، از restyling در زمان اجرا پشتیبانی میکنند، در هر zoom و هر DPI واضح به نظر میرسند و اجازه میدهند لایهها را بدون دریافت مجدد روشن و خاموش کنید.
فرمت MVT چیست؟
MVT مشخصات Mapbox Vector Tile است، فرمت استاندارد de facto برای vector tileها. این یک encoding با Protocol Buffers (protobuf) از ویژگیهای جغرافیایی برای یک tile است که در لایههای نامگذاریشده سازماندهی شده (مثلاً roads، buildings، places). فرمت باز، vendor-neutral و توسط هر رندرر نقشه مدرن پشتیبانی میشود. MapAtlas از طریق endpoint نقشههای پویای خود tile های سازگار با MVT serve میکند.
Vector tileها چقدر کوچک هستند؟
یک vector tile شهری معمولی در zoom 14 بین ۵۰ تا ۲۰۰ کیلوبایت روی wire است و اغلب بعد از gzip به ۳۰ تا ۱۰۰ کیلوبایت فشرده میشود. حجم به تراکم داده منطقه بستگی دارد: یک tile که مرکز پاریس را پوشش میدهد سنگینتر از یک tile که اقیانوس اطلس را پوشش میدهد. اکثر نقشههای production pan و zoom روانی دارند چون tile ها به شدت cacheشده، از پیش fetchشده و روی GPU رندر میشوند.
