Leaflet.js یک کتابخانه منبع باز است که با استفاده از آن می توانیم نقشه های ساده، تعاملی و سبک وزن را در صفحه وب داشته باشیم. در این مقاله روش نمایش نقشه با کمک کتابخانه leafletjs را آموزش می دهیم.کتابخانه leafletJS جاوا اسکریپت، همچنین اجازه می دهد تا از لایه هایی مانند لایه های کاشی، WMS، نشانگرها، پنجره ها، لایه های Vector (polylines، چند ضلعی ها، حلقه ها و غیره)، Overlays Image و GeoJSON در نقشه استفاده کنید.
با کشیدن نقشه، بزرگنمایی (با دوبار کلیک و یا حرکت چرخ)، با استفاده از صفحه کلید، با استفاده از رویداد و با کشیدن نشانگرها، می توانید با نقشه های برگه ارتباط برقرار کنید.
این برگه از مرورگرهای مانند Chrome، Firefox، Safari 5+، Opera 12+، IE 7-11 در دسکتاپ و مرورگرهای مانند Safari، Android، Chrome، Firefox برای تلفن های همراه پشتیبانی می کند.
مراحل بارگذاری نقشه در یک صفحه وب
مراحل زیر را برای بارگذاری نقشه روی صفحه وب خود انجام دهید –
مرحله 1: یک صفحه HTML ایجاد کنید
یک صفحه HTML ساده با برچسب های head و body ایجاد کنید که در زیر نشان داده شده است:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...........
</body>
</html>
مرحله 2 : اسکریپت leaflet را بارگذاری کنید
فایل leaflet.css را مشابه زیر ضمیمه کنید:
<head>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
مرحله 3: اسکریپت leaflet را بارگذاری کنید
API مربوطه را برگه با استفاده از برچسب اسکریپت ضمیمه کنید:
<head>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
مرحله 4: ایجاد یک کانتینر
برای نگه داشتن نقشه، باید یک عنصر کانتینر ایجاد کنیم. به طور کلی، برچسب <div> (یک کانتینرعمومی) برای این منظور استفاده می شود.
یک عنصر کانتینر ایجاد کنید و ابعاد آن را تعریف کنید:
<div id = "sample" style = "width:900px; height:580px;"></div>
مرحله 5: تنظیمات نقشه
این اسکریپت گزینه های متعددی از قبیل انواع گزینه های کنترل، گزینه های تعامل، گزینه های حالت نقشه، گزینه های انیمیشن، و غیره را فراهم می کند. با تنظیم مقادیر آن، می توانیم نقشه را به صورت دلخواه تنظیم کنیم.
یک شی mapOptions ایجاد کرده و برای گزینه های مرکز و زوم، مقادیر دلخواه را تعیین کنید.
center- برای مقداردهی این گزینه، باید یک شی LatLng را مشخص کنید که مکان را در آن می خواهید مرکز نقشه باشد تعیین کنید. (فقط مقادیر عرض و عرض جغرافیایی را در [] braces تنظیم کنید)
zoom – مقدار این گزینه با یک عدد صحیح تعیین کنید که سطح زوم نقشه را نشان می دهد، همانطور که در زیر نشان داده شده است.
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
مرحله 6: یک شیء نقشه ایجاد کنید
با استفاده از کلاسMap از API لیف لت ، می توانید یک نقشه را روی یک صفحه ایجاد کنید. شما می توانید یک نمونه نقشه را با کمک کلاس Map از کتابخانه leaflet ایجاد کنید. برای ایجاد نمونه ای از این کلاس باید دو پارامتر را تعیین کنید :
- باید یک متغیر رشته ای که نشان دهنده شناسه یک عنصر <div> در صفحه باشد را منتقل کنید. در اینجا، عنصر <div> یک ظرف HTML است که نقشه را نگه می دارد.
- گزینه های نقشه که اختیاری است.
یک شیء Map را با مقداردهی شناسه عنصر <div> و objectmapOptions ایجاد شده در مرحله قبلی ایجاد کنید.
var map = new L.map('map', mapOptions);
مرحله 7: ایجاد یک شیء لایه
شما همچنین می توانید انواع مختلف نقشه (لایه های کاشی) را با اکتیو کردن کلاس TileLayer بارگیری و نمایش دهید.
شیء TileLayer را به صورت زیر نشان دهید.
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
در اینجا ما از openstreetmap استفاده کرده ایم.
مرحله 8: لایه را به نقشه اضافه کنید
در نهایت لایه ایجاد شده در مرحله قبل به شیء نقشه با استفاده از متدaddlayer که در زیر نشان داده شده است را اضافه کنید.
map.addLayer(layer);
مثال کاربردی نمایش نقشه
مثال زیر نشان می دهد که چگونه یک نقشه خیابان باز از شهر حیدرآباد با مقدار بزرگنمایی 10 را بارگذاری کنید.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
</script>
</body>
</html>
این طراحی، خروجی زیر تولید می کند:
ارائه دهندگان نقشه leaflet
درست مثل نقشه خیابان باز، شما می توانید لایه های مختلف از ارائه دهندگان خدمات مثل Open Topo، Thunder forest، Hydda، ESRI، Open weather، GIBS ناسا و غیره را بارگذاری کنید. برای انجام این کار، هنگام ایجاد TileLayer باید URL مربوط به ارائه کننده را وارد کنید:
var layer = new L.TileLayer('URL of the required map');
جدول زیر نمونه هاایی از URL ها و نقشه های مربوط به نمونه های آنها با استفاده از openstreetmap را مشاهده می کنید:
http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png
http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png
و URL های دیگر که به دلخواه می توانید استفاده کنید.