Loading
Logo
Leaflet Js چیست؟

Leaflet Js چیست؟

Leaflet Js چیست؟

Leaflet Js چیست؟

Leaflet Js یک کتابخانه ی متن باز جاوااسکریپت میباشد که با استفاده از آن میتوانیم نقشه های وب ساده و تعاملی و سبک وزن را پیاده سازی کنیم. LeafletJs به شما این امکان را میدهند که از لایه هایی مانند لایه های کاشی وار، WMS، نشانه گرها، Popup ها، لایه های برداری یا Vector (چندضلعی، دایره، مربع و غیره)، پوشش های تصویر و GeoJSON استفاده کنید. در کل باید بگوییم Leaflet JS به خودی خورد قادر به نمایش هیچ نقشه ای نیست و فقط یک فراهم کننده ی امکانات بسیار سبک و کارامد برای نمایش نقشه ها و کنترول آنهاست. در ادامه به نحوه ی کانفیگ Leaflet JS خواهیم پرداخت.

کنترول نقشه های Leaflet JS

شما میتوانید عملیات کنترولی نقشه را با استفاده از دابل کلیک یا چرخش غلتک ماوس یا استفاده از کلید های + و - روی کیبورد برای عمل Zoom و کشیدن (Drag) نقشه و یا استفاده از کلیدهای جهتی روی کی بورد برای جابجایی روی نقشه استفاده کنید.

Leaflet JS از چه مرورگرهایی پشتیبانی میکند؟

Leaflet JS از مرورگرهایی مانند Chrome، Firefox، Safari 5+، Opera 12+، IE 7-11 روی کامپیوتر، مرورگرهایی مانند Safari و همچنین بر روی اندروید و موبایل از Chrome و Firefox پشتیبانی میکند.

آموزش کامل Leaflet JS

مراحل نمایش نقشه Leaflet JS بر روی صفحات وب

لطفا تمامی مراحل زیر را قدم به قدم دنبال نمایید تا بتوانید بدون هیچ مشکلی نقشه های خود را بر روی سایت بارگزاری نمایید.

قدم اول: ایجاد صفحه ی وب

یک صفحه ی وب ساده متشکل از تگ های head و body به شکل زیر ایجاد نمایید:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

...........

</body>

</html>

قدم دوم: افزودن فایل های Css و Js مربوط به Leaflet JS در صفحه

رفرنس css زیر را به بخش head صفحه اضافه نمایید. این فایل تمامی استایل های مربوط به نقشه ها و امکانات Laflet JS را دربر دارد.

<link rel = "stylesheet" href ="http://cdn.Leafletjs.com/Leaflet-0.7.3/Leaflet.css">

و حالا فایل Javascript زیر، مربوط به Leaflet JS را به بخش head اضافه نمایید.

<script src="http://cdn.Leafletjs.com/Leaflet-0.7.3/Leaflet.js"></script>

قدم چهارم: ایجاد یک محفظه یا تگ برای نمایش و لود نقشه در آن

به جهت نگهداری نقشه ها در صفحه، ما یک تگ Div که به صورت عمومی قابل نمایش باشد را در صفحه ایجاد خواهیم کرد. کد زیر را در تگ body قرار دهید.

 <div id ="map" style ="position:fixed;top:0px;bottom: 0px;right: 0px;left: 0px; "></div>

توجه کنید که استایل های تنظیم شده باعث نمایش نقشه در حالت Full Screen میشوند.

قدم پنجم: تنظیمات نقشه

Leaflet یک سری تنظیمات برای کارهایی مانند نوع نقشه، حالات نقشه، تنظیمات اینمیشن ها، تنظمیمات نمایش نقشه مانند Zoom و نقطه ی نمایش در حالت پیش فرض و غیره دارد که با تنظیم مقادیر روی آن ها میتوانیم نقشه هایی سفارشی و دلخواه بسازیم. کد زیر را ملاحظه کنید:

 var mapOptions = { center: [17.385044, 78.486671], zoom: 10 } 

یک متغییر با عنوان mapOptions ایجاد کردیم و مقادیر Center و Zoom را در آن قرار دادیم. Center بیانگر نقطه ای روی نقشه میباشد که قرار است نقشه آن را نمایش دهد و آن نقطه دقیقا وسط نقشه قرار خواهد گرفت و Zoom نیز یک عدد صحیح میباشد که Zoom روی آن نقطه را مشخص میکند، عدد 1 دورترین حالت و تا عدد بزرگتر شود زوم نیز بزرگتر خواهد شد.

قدم ششم: ایجاد یک Object از Map در Leaflet Js

با استفاده از کلاس Map از Api های Leaflet شما میتوانید نقشه را روی صفحه به نمایش در بیاورید. برای به نمایش دراوردن نقشه با این کلاس شما به مقدار دهی دو پارامتر نیاز خواهید داشت که پارامتر اول تعیین کننده ی Id تگی هست که نقشه در آن نمایش داده میشود و پارامتر دوم هم تنظیمات و Option های نقشه را تعیین میکند.

با استفاده از mapOptions که بالا تعیریف کردیم و کد زیر عملیات ابتدایی نمایش نقشه انجام خواهد شد.

 var map = new L.map('map', mapOptions);

قدم هفتم: ایجاد لایه نقشه و اختصاص آن به Map

همانطور که قبلا هم خدمتتون عرض کردم Leaflet JS به خودی خود نمیتواند نقشه ای را به نمایش در بیاورد و فقط وظیفه ی کنترول نقشه و فراهم کردن امکانات و بستر لازم لا بر اهده دارد. لایه ی اصلی نقشه ها که به صورت کاشی هستند و تقیربا همیشه تصاویر مربعی px256 هستند میتوانند در سرورهای دیگری باشد و فقط آدرس آن را در اختیار Leaflet JS قرار دهیم تا بتواند تصاویر زا دانلود کند و در کنار هم قرار دهد و نقشه ی مورد نظز ما نمایش داده شود. در ادامه یکی از آن سرور ها را خدمت شما معرفی و روی Leaflet JS تنظیم میکنیم.

 var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); 

در کد بالا یک ادرس را به وسیله ی متد TileLayer در یک متغییر به نام layer قرار دادیم. شما میتوانید TileLayer های دیگری را نیز که در این آدرس (TileLayer) موجود هستند را استفاده کنید.

قدم هشتم: افزودن لایه به نقشه

در آخر شما باید TileLayer را به نقشه اضافه نمایید تا بتواند به نمایش در آورد. کد زیر را ملاحظه نمایید.

 map.addLayer(layer); 

کدهایی نهایی را در بخش زیر مشاهده نمایید:

<!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 JS چیست

دموی لایو از دوره ی آموزش LeafletJS در قالب پروژه ی Google Map با Asp.net Core 3

محمدرضا احمدی

محمدرضا احمدی

تاریخ عضویت: 07 اردیبهشت 1399
دنبال کردن ایمیل رزومه
ثبت یک نظر جدید
  • برای ثبت نظر بهتر است وارد سایت شوید
  • لطفا از کلمات و جملات توهین آمیز بپرهیزید
  • کامنتهایی که جنبه ی تبلیغ داشته باشند تایید نخواهند شد
  • از ارسال شماره تماس یا ایمیل خود در دیدگاه ها بپرهیزید
  • به سوالات تخصصی در بخش نظرات پاسخ داده نخواهد شد
دیدگاه شما بعد از تایید توسط مدیریت نمایش داده میشود
نظرات