در این پست نحوه‌ی نمایش لایه‌های نقشه وکتوری مپ را با استفاده از کتابخانهی Leaflet بررسی می‌کنیم. نتیجه‌ی نهایی به‌صورت یک مثال آماده، در آدرس زیر و در انتهای این مطلب، قابل مشاهده است.
برای آشنایی با نحوه‌ی استفاده از کنسول stackblitz اینجا را ببینید. 🕹
مقدمه
کتابخانهی لیف‌لت (Leaflet) یکی از قدیمی‌ترین کتاب‌خانه‌های جاوا‌اسکریپتی (JavaScript) برای نمایش نقشه در وبسایت است که از سال ۲۰۱۱ به‌صورت متن‌باز توسعه داده شد و رایگان در دسترس قرار گرفت. این کتابخانه تمامی عملکردهای لازم برای نمایش نقشه و اطلاعات جغرافیایی را ارائه داده و با پشتیبانی و ارائه افزونه‌های (پلاگین [Plugin]) مختلف می‌توان کارکرد آن را متناسب با نیاز خود گسترش داد.
کتابخانهی Leaflet از ابتدا با هدف نمایش لایه‌های رستری پیاده‌سازی شده و از روش‌های مختلف نمایش لایه‌های رستری نظیر XYZ، WMS و TMS پشتیبانی می‌کند. ما در مپ نیز برای توسعه‌ی نقشه‌های رستری خود در وبسایت مپ و Web SDK از این کتابخانه استفاده می‌کنیم.
مطالعه‌ی پست زیر خالی از لطف نخواهد بود:
🔗 https://help.map.ir/raster-vector-tile
اگرچه کتابخانه Leaflet از نمایش داده‌های وکتوری‌ای نظیر داده‌های جئوجیسون (GeoJSON)، دایره، مربع، SVG و Canvas پشتیبانی می‌کند؛ به‌صورت پیش‌فرض قابلیت نمایش کاشی‌های (تایل [Tile]) نقشه وکتوری را ندارد. خوشبختانه اما، پلاگین‌های متنوعی برای نمایش تایل‌های وکتوری نقشه با استاندارد مپ‌باکس (Mapbox) توسعه داده شده و در دسترس هستند. همچنین راهکاری نیز شرکت مپ‌باکس ارائه داده که در این مثال از همین روش استفاده می‌کنیم.
نمایش لایه‌های وکتوری مپ با استفاده از کتاب‌خانهٔ Leaflet
خلاصه؛ در این پست از راهکاری که شرکت مپ‌باکس (Mapbox) ارائه داده استفاده می‌کنیم. برای اینکار هردو کتابخانه Leaflet و Mapbox را لود کرده و یک نقشه‌ی Leaflet ایجاد می‌کینم، سپس با استفاده از کتابخانه Mapbox یک لایه‌ی وکتوری ساخته و آن را به نقشه اضافه می‌کنیم.
پیش‌نیاز نمایش لایه‌های وکتوری
تمامی APIهای مپ برای تشخیص پروژه و مدیریت مصرف نیازمند ارسال پارامتری با عنوان x-api-key در هدر (Header) هر درخواست (Request) است.
> به زودی امکان ارسال پارامتر x-api-key از طریق پارامتر‌های آدرس (URL Query Parameters) نیز امکان‌پذیر خواهد که نیاز به این مرحله را حذف می‌کند.
ساخت نقشه
در ابتدا یک نقشه با استفاده از کتابخانه Leaflet می‌سازیم:
var map = L.map('app', {
minZoom: 1,
maxZoom: 20,
crs: L.CRS.EPSG3857,
center: [31, 52],
zoom: 4
});
سپس یک لایه‌ی وکتوری با استفاده از کتابخانه Mapbox و یکی از استایل‌های نقشه مپ ایجاد کرده و آن را به نقشه اضافه می‌کنیم:
L.mapboxGL({
type: 'vector',
style: `https://map.ir/vector/styles/main/mapir-xyz-style.json?x-api-key=${Your_API_Key}`,
transformRequest: (url, resourceType) => {
return {
url: url,
headers: {
'x-api-key': Your_API_Key
}
};
}
}).addTo(map);
> توجه کنید که با استفاده از متد transformRequest، هدر x-api-key را به درخواست‌های نقشه اضافه کرده‌ایم. نیاز است تا مقدار این هدر را برابر کلید دسترسی‌ای که از پنل کاربران دریافت کرده‌اید قرار دهید.
به همین سادگی یک نقشه‌ی Leaflet با لایه‌ی وکتور مپ در اختیار داریم که تمامی توابع و APIهای کتابخانه Leaflet برای کنترل و تنظیم آن در اختیار هستند.