Leaflet یک کتابخانه JavaScript بصورت منبع باز است که به طور گسترده مورد استفاده قرار می گیرد و برای ساخت نقشه ها در وب مورد استفاده قرار میگیرد. در سال 2011 معرفی شد و در اکثر مرورگرهای وب و موبایل پشتیبانی میشود. همراه با OpenLayers و Google Maps API ، یکی از محبوب ترین کتابخانه های کار با نقشه در جاوا اسکریپت است و توسط وب سایت هایی مانند FourSquare ، Pinterest و Flickr مورد استفاده قرار می گیرد. LeafletJS به کاربران اجازه میدهد تا بدون استفاده از GIS (سامانه اطلاعات جغرافیایی) به صورت خیلی ساده با استفاده از تصاویر که مانند کاشی کنار همدیگر قرار میگیرند نقشه ها را به نمایش درآورند.
در این دوره ی آموزشی ما به صورت کامل با نقشه های LeafletJS اشنا خواهیم شد و به صورت کاملا پروژه محور وبسایت قدرتمند Google Map را پیاده سازی خواهیم کرد. شما برای شرکت در این دوره باید با زبان برنامه نویسی C# اشنایی داشته باشید و همچنین بتوانید با Asp.net Core نیز کار بکنید. بانک اطلاعاتی که از آن استفاده میکنیم Sql Server میباشد و همچنین تسلط شما بر Html , Css , JavaScript میتواند بسیار سودمند باشد.
نمایش نقشه ها و سوئیچ بین حالت های مختلف نقشه (ماهواره ای، عوارض و ...)
نمایش طول و عرض جغرافیایی مکان انتخاب شده
قابلیت جستوجوی مکان با آدرس و یا نام مکان
افزودن مکان جدید و عکس به نقشه و یافتن مکان های نزدیک (+ دسته بندی)
محاسبه ی فاصله بین دو نقطه
نمایش مسیر رانندگی بین دو نقطه روی نقشه
تغییر زبان نقشه
افزودن اشکال مختلف بر روی نقشه به صورتی شخصی و عمومی
قابلیت به اشتراک گذاری مکان
قابلیت نمایش موقعیت فعلی کاربر
قابلیت نمایش منطقه زمانی
قالبیت نمایش مرز شهرها، استان ها، کشور ها به صورت برنامه ریزی
قابلیت نمایش داده های کاربران به صورت عمومی در صورت تایید مدیریت
قابلیت تنظیم کنترول هایی مانند زوم و ...
و ده ها قابلیت دیگر که در این دوره ی آموزشی به آنها خواهیم پرداخت
دموی دوره ی آموزش Leaflet JS را میتوانید به صورت کامل و آبدیت شده بعداز ضبط هر جلسه، در ادرس زیر مشاهده بفرمایید.
دموی لایو از دوره ی آموزش LeafletJS در قالب پروژه ی Google Map با Asp.net Core 3
|
1
|
 |
20 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- Leaflet JS چیست؟
-- Leaflet JS چگونه کار میکند؟
|
2
|
|
20 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- کانفیگ پروژه ی جدید Asp.net Core
-- کانفیگ و نمایش اولین نقشه با استفاده از Leaflet JS
|
3
|
|
17 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- Tiles چیست؟
-- افزودن Tile Layer های مختلف به Leaflet JS
-- سرور هایTiles Layer چگونه کار میکنند
|
4
|
|
18 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- تغییر لایه ی نقشه به صورت Live
|
5
|
|
18 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- نمایش Context Menu روی نقشه ی Leaflet JS
-- نمایش طول و عرض جغرافیایی یک نقطه (Longitude, latitude) در Leaflet JS
|
6
|
|
16 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- نمایش مشخصات (نام مکان+ نام استان + نام کشور + طول و عرض جغرافیایی) نقطه کلیک شده در Leaflet JS
|
7
|
|
22 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- شناسایی نقطه ی کلیک شده روی نقشه
-- افزودن مارکر به نقطه ی کلیک شده
-- حذف مارکر
|
8
|
|
19 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- تغییر Icon مارکر
-- متحرک کردن مارکر (Animate)
-- Context Menu روی مارکر
|
9
|
|
13 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- متحرک کردن مارکر (Animate) در Leaflet JS
|
10
|
|
15 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مسیریابی رانندگی در Leaflet JS
-- رسم مسیر رانندگی در Leaflet JS
|
11
|
|
20 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مسیریابی رانندگی در Leaflet JS (بخش دوم)
-- نمایش Popup روی مارکر
-- نمایش طول مسیر و زمان لازم در مارکر
|
12
|
|
23 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مسیریابی رانندگی در LeafletJS (بخش سوم)
-- تبدیل آدرس به طول و عرض جغرافی در Leaflet JS
-- تبدیل طول و عرض جغرافی به آدرس در Leaflet JS
|
13
|
|
31 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مسیریابی رانندگی در Leaflet JS (بخش چهارم)
-- تبدیل آدرس به طول و عرض جغرافی در Leaflet JS
-- تبدیل طول و عرض جغرافی به آدرس در Leaflet JS
|
14
|
|
25 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مسیریابی رانندگی در LeafletJS (بخش پنجم)
-- نمایش مسیر روی نقشه با استفاده از نقطه های انتخاب شده
|
15
|
|
25 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مسیریابی رانندگی در Leaflet JS (بخش ششم)
--نمایش نام مسیرها و جادها و مکان های پیش رو
|
16
|
|
15 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مسیریابی رانندگی در Leaflet JS (بخش هفتم)
--ریست کردن و لود مجدد نقشه های Leaflet JS
|
17
|
|
22 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- نمایش مکان های ثبت شده روی نقشه در Leaflet JS
|
18
|
|
17 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- کاربا رویدادهای Zoom و Move در Leaflet JS
-- نمایش مارکرها در زوم های مختلف در Leaflet JS
|
19
|
|
21 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- نمایش مارکرهای یک محدوده ی خاص در Leaflet JS
-- نمایش مارکرهای با جابجایی نقشه در Leaflet JS
|
20
|
|
15 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- شروع بخش جستوجوی مکان در Leaflet JS
|
21
|
|
20 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- ادامه ی بخش جستوجوی مکان در Leaflet JS
|
22
|
|
28 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- ادامه ی بخش جستوجوی مکان در Leaflet JS
-- نمایش مکان روی نقشه با جستوجو در Leaflet JS
|
23
|
|
23 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- نمایش اشکال مختلف مانند مربع و مستطیل و چندضلعی و ... در Leaflet JS
|
24
|
|
29 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- افزودن مکان به نقشه Leaflet JS
|
25
|
|
35 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- به اشتراک گذاری مکان در Leaflet JS
-- نمایش مناطق زمانی در Leaflet JS
|
26
|
|
24 دقیقه
|
|
مباحثی که در این ویدیو به آن ها خواهیم پرداخت:
-- مکان فعلی کاربر در Leaflet JS
-- تغییر زبان نقشه ها Leaflet JS
سلام
میخواستم بدونم پیدا کردن مکان های نزدیک به مکان فعلی کاربر هم گفتع شده؟
سلام مدت زمان کامل این آموزش 9 ساعت هستش یا بیشتر هستش و فایل هایی که در بخش سرفصل هستش نمونه هستند یا فایل کگامل هر جلسه می باشد؟
پاسخ
سلام. بله 9 ساعت میباشد. فایل کامل هر جلسه میباشند. سورس پروژه را از سایت Github دانلود کنید. https://github.com/Darayas/Darayas.Map
پاسخ
تشکر از ویدوی آموزشی خوبتان . یک قسمت را توضیح نداید وقتی بین دو نقطه مسیر یابی را نشان می دهد و اگر بخواهیم نقطه مقصد را تغییر بدهیم همچنان نقطه قبلی مسیرش هست چطور می شود که هر دفعه با زدن نقطه مسیر های قبلی پاک بشه تشکر.
پاسخ
سلام دوست من. وقت بخیر. این کار را فکر کنم انجام دادیم. البته اگر هم انجام نشده میتونید خیلی راحت با توضیحاتی که دادیم نقاط را پاک و نقاط جدید را معرفی نمایید
پاسخ
سلام دوره خیلی خوبی بود و مفید میشه سورس پروژه رو هم قرار بدید
پاسخ
سلام. خوشحالم مفید بود. سورس در گیت هاب: https://github.com/Darayas/Darayas.Map و دموی پروژه: https://maps.demos.dotnetlearn.com/
پاسخ
سلام دوستان. می خواهم صفحه وب طراحی کنم که نقشه به صورت افلاین باشد یعنی مختصات یه مکان وارد کنم بدون اینکه به اینترنت وصل باشد مکان را برایم نمایش دهد. لطفا راهنمایی کنید
پاسخ
سلام دوست من. شما باید از Cached Tile Layer استفاده کنید. این لینک را ببینید. https://github.com/yagajs/leaflet-cached-tile-layer
پاسخ
تشکر از آموزش خوبتان مجدد می خواستم بدانم که آیا امکان اضافه کردن مسیریاب عابر پیاده روی نقشه با leaflet هست. چون در آموزش تنها مسیر یابی با ماشین را نمایش می دهد. من می خواستم مثل گوگل گزینه ای برای تعیین مسیر یابی برای عابر پیاده بین دو نقطه هم اضافه کنم ممنون می شوم اگر راهنمایی کنید چطور می توانم این گزینه را فعال کنم چون هرچی گشتم چیز خاصی پیدا نتوستم.
پاسخ
حقیقت هرچی میگردم بجر پلاگین های غیر رایگان برای Leaflet چیزی پیدا نمیکنم. بهترین کار این است که ابتدا فاصله ی بین دو نقطه را بدست اورید و بعدا برسی کنید یک نفر به طور معمول وقتی داره پیاده روی میکنه چند کیلومتر بر ساعت حرکت میکند. حالا با استفاده از جدول تناسب که در پنجم ابتدایی خوندیم (یادش بخیر چقدر سرش کتک خوردیم) تناسب بین مقدار مسافتی طی شده ی ماشین در یک ساعت و مسافت طی شده ی شخص در یک ساعت را بدست اورید. راه بی دردسر و بدون هزینه همینه که البته عیب این روش اینه فقط مسیر جاده ها و خیابان ها و کوچه های رسمی که ماشین رو هستند را نشان میدهد
پاسخ
http://project-osrm.org/ این پروژه را من توی اینرتت سرچ کردم پیدا کردم و از مسیریاب عابر پیاده و دوچرخه هم پشتیبانی می کند ولی متاسفانه نتونستم از این استفاده کنم می خواستم بدونم شما استفاده کردید
پاسخ
سلام. خیر متاسفانه. از این مورد استفاده نشده است. فقط برای حالت رانندگی استفاده کردیم...
پاسخ
آقای احمدی تشکر از آموزش شما می خواستم بدونم آیا امکان دانلود یک منطقه مثلا مپ یک شهر را دانلود کرد روی سرور خود گذاشت به خاطر اینکه منابع سخت افزاری کمتری استفاده کند و همچنین تمام سرویس های ما در این منطقه هست نیاز به کل استان و کشور دنیا نیست. آیا امکان استفاده اینطوری هست؟ ممنون می شوم راهنمایی کنید.
پاسخ
سلام و درود خدمت شما. بله. امکان پذیر هست. به ادرس https://protomaps.com/extracts مراجعه کنید البته با تحریم شکن. و اونجا نوشته چکاری انجام دهید. فقط راه اندازی سرورش کمی پیچیده س که البته در https://switch2osm.org/serving-tiles توضیحات لازمش را داده که چه کار انجام دهید
پاسخ
تشکر از پاسخ شما یک سوال دیگه هم داشتم. می خواستم بدونم که در بعضی مناطق شهری که بافت قدیمی دارند و از کوچه های غیر استاندارد درست شده است. آیا اضافه کردن مسیر در نقشه برای کسانی که پیاده راه می روند و تمامی مسیرها را بخواهیم نمایش بدهیم چطوری می شود که به نقشه راه اضافه کنیم بعد براورد کنیم که چند دقیقه می شود پیاده رسید.
پاسخ
تاجایی که در جریان باشم نمیتونید چون راه ها را با استفاده از پلاگین و از سرور خارجی میخوانیم. اگر بخواهید خودتان این کارو بکنید به صرفه نیست چون باید تک تک طول و عرض جغرافیای تمام راه ها را بدید که آنها با هوش مصنوعی این کارو میکنند
پاسخ
بسیار دوره ی مفیدی هست خیلی وقته دنبال آموزش لیفلت بودم خیلی ممنون استاد
پاسخ
اقای احمدی سلام. سرور دانلود هنوز مشکل داره ظاهرا . نمیشه دانلود کرد
پاسخ
سلام. بله در کانال تلگرامی هم اعلام کردم. متاسفانه از کم کاری پشتیبانی سرور دانلود هست. اعلام کردم و گفتند به زودی درست میگردد. با تشکر از صبر و شکیبایی شما
پاسخ
خیلی ممنون از استاد احمدی . دوره واقعا خوبیه استاد .من خودم با leaflet قبلا کار کرده بودم ولی خب یه سری امکاناتش رو فرصت نشد دنبالش برم . ان شا الله دوره خوبی رو داشته باشیم
پاسخ
