Loading
Logo
بخش یکم- آموزش Leaflet JS در قالب سایت GoogleMap

بخش یکم- آموزش Leaflet JS در قالب سایت GoogleMap

  • اطلاعات کلی و هزینه ها
  • توضیحات
  • سرفصل ها و فایل ها
  • مجوز ها
  • قیمت دوره:
    ثبت نام غیرفعال میباشد
  • وضعیت دوره:
    منتشر شده
  • تعداد فایل:
    26 عدد
  • آخرین ویرایش:
    (15 مرداد 1399 ) 3 سال قبل
  • تعداد دانشجویان:
    (بزودی)
  • مدت زمان دوره:
    9 ساعت و 19 دقیقه

Leaflet JS چیست؟

Leaflet یک کتابخانه JavaScript بصورت منبع باز است که به طور گسترده مورد استفاده قرار می گیرد و برای ساخت نقشه ها در وب مورد استفاده قرار میگیرد. در سال 2011 معرفی شد و در اکثر مرورگرهای وب و موبایل پشتیبانی میشود. همراه با OpenLayers و Google Maps API ، یکی از محبوب ترین کتابخانه های کار با نقشه در جاوا اسکریپت است و توسط وب سایت هایی مانند FourSquare ، Pinterest و Flickr مورد استفاده قرار می گیرد. LeafletJS به کاربران اجازه میدهد تا بدون استفاده از GIS (سامانه اطلاعات جغرافیایی) به صورت خیلی ساده با استفاده از تصاویر که مانند کاشی کنار همدیگر قرار میگیرند نقشه ها را به نمایش درآورند.

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

در این دوره ی آموزشی ما به صورت کامل با نقشه های LeafletJS اشنا خواهیم شد و به صورت کاملا پروژه محور وبسایت قدرتمند Google Map را پیاده سازی خواهیم کرد. شما برای شرکت در این دوره باید با زبان برنامه نویسی C# اشنایی داشته باشید و همچنین بتوانید با Asp.net Core نیز کار بکنید. بانک اطلاعاتی که از آن استفاده میکنیم Sql Server میباشد و همچنین تسلط شما بر Html , Css , JavaScript میتواند بسیار سودمند باشد.

امکاناتی که در دوره ی آموزش Leaflet JS پیاده سازی میکنیم

  • نمایش نقشه ها و سوئیچ بین حالت های مختلف نقشه (ماهواره ای، عوارض و ...)

  • نمایش طول و عرض جغرافیایی مکان انتخاب شده

  • قابلیت جستوجوی مکان با آدرس و یا نام مکان

  • افزودن مکان جدید و عکس به نقشه و یافتن مکان های نزدیک (+ دسته بندی)

  • محاسبه ی فاصله بین دو نقطه

  • نمایش مسیر رانندگی بین دو نقطه روی نقشه

  • تغییر زبان نقشه

  • افزودن اشکال مختلف بر روی نقشه به صورتی شخصی و عمومی

  • قابلیت به اشتراک گذاری مکان

  • قابلیت نمایش موقعیت فعلی کاربر

  • قابلیت نمایش منطقه زمانی

  • قالبیت نمایش مرز شهرها، استان ها، کشور ها به صورت برنامه ریزی

  • قابلیت نمایش داده های کاربران به صورت عمومی در صورت تایید مدیریت

  • قابلیت تنظیم کنترول هایی مانند زوم و ...

  • و ده ها قابلیت دیگر که در این دوره ی آموزشی به آنها خواهیم پرداخت

دموی پروژه به صورت آنلاین

دموی دوره ی آموزش Leaflet JS را میتوانید به صورت کامل و آبدیت شده بعداز ضبط هر جلسه، در ادرس زیر مشاهده بفرمایید.

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

1
File Type
20 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- Leaflet JS چیست؟

-- Leaflet JS چگونه کار میکند؟

2
File Type
20 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- کانفیگ پروژه ی جدید Asp.net Core

-- کانفیگ و نمایش اولین نقشه با استفاده از Leaflet JS

3
File Type
17 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- Tiles چیست؟

-- افزودن Tile Layer های مختلف به Leaflet JS

-- سرور هایTiles Layer چگونه کار میکنند

4
File Type
18 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- تغییر لایه ی نقشه به صورت Live

5
File Type
18 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- نمایش Context Menu روی نقشه ی Leaflet JS

-- نمایش طول و عرض جغرافیایی یک نقطه (Longitude, latitude) در Leaflet JS

6
File Type
16 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- نمایش مشخصات (نام مکان+ نام استان + نام کشور + طول و عرض جغرافیایی) نقطه کلیک شده در Leaflet JS

7
File Type
22 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- شناسایی نقطه ی کلیک شده روی نقشه

-- افزودن مارکر به نقطه ی کلیک شده

-- حذف مارکر

8
File Type
19 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- تغییر Icon مارکر

-- متحرک کردن مارکر (Animate)

-- Context Menu روی مارکر

9
File Type
13 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- متحرک کردن مارکر (Animate) در Leaflet JS

10
File Type
15 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مسیریابی رانندگی در Leaflet JS

-- رسم مسیر رانندگی در Leaflet JS

11
File Type
20 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مسیریابی رانندگی در Leaflet JS (بخش دوم)

-- نمایش Popup روی مارکر

-- نمایش طول مسیر و زمان لازم در مارکر

12
File Type
23 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مسیریابی رانندگی در LeafletJS (بخش سوم)

-- تبدیل آدرس به طول و عرض جغرافی در Leaflet JS

-- تبدیل طول و عرض جغرافی به آدرس در Leaflet JS

13
File Type
31 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مسیریابی رانندگی در Leaflet JS (بخش چهارم)

-- تبدیل آدرس به طول و عرض جغرافی در Leaflet JS

-- تبدیل طول و عرض جغرافی به آدرس در Leaflet JS

14
File Type
25 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مسیریابی رانندگی در LeafletJS (بخش پنجم)

-- نمایش مسیر روی نقشه با استفاده از نقطه های انتخاب شده

15
File Type
25 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مسیریابی رانندگی در Leaflet JS (بخش ششم)

--نمایش نام مسیرها و جادها و مکان های پیش رو

16
File Type
15 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مسیریابی رانندگی در Leaflet JS (بخش هفتم)

--ریست کردن و لود مجدد نقشه های Leaflet JS

17
File Type
22 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- نمایش مکان های ثبت شده روی نقشه در Leaflet JS

18
File Type
17 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- کاربا رویدادهای Zoom و Move در Leaflet JS

-- نمایش مارکرها در زوم های مختلف در Leaflet JS

19
File Type
21 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- نمایش مارکرهای یک محدوده ی خاص در Leaflet JS

-- نمایش مارکرهای با جابجایی نقشه در Leaflet JS

20
File Type
15 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- شروع بخش جستوجوی مکان در Leaflet JS

21
File Type
20 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- ادامه ی بخش جستوجوی مکان در Leaflet JS

22
File Type
28 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- ادامه ی بخش جستوجوی مکان در Leaflet JS

-- نمایش مکان روی نقشه با جستوجو در Leaflet JS

23
File Type
23 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- نمایش اشکال مختلف مانند مربع و مستطیل و چندضلعی و ... در Leaflet JS

24
File Type
29 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- افزودن مکان به نقشه Leaflet JS

25
File Type
35 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- به اشتراک گذاری مکان در Leaflet JS

-- نمایش مناطق زمانی در Leaflet JS

26
File Type
24 دقیقه

مباحثی که در این ویدیو به آن ها خواهیم پرداخت:

-- مکان فعلی کاربر در Leaflet JS

-- تغییر زبان نقشه ها Leaflet JS

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

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

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

امیر مدیری

26 اسفند 1401

سلام و عرض ادب
استاد احمدی فقط در یک کلام
عالی و بی نظیر
سپاس از همه زحمات

پاسخ
ali ali

ali ali

07 مرداد 1400

سلام
میخواستم بدونم پیدا کردن مکان های نزدیک به مکان فعلی کاربر هم گفتع شده؟

پاسخ
محمدرضا احمدی

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

14 مرداد 1400

سلام. بله بحث شده درموردش

پاسخ
محمد رضا محمدی

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

03 بهمن 1399

سلام مدت زمان کامل این آموزش 9 ساعت هستش یا بیشتر هستش و فایل هایی که در بخش سرفصل هستش نمونه هستند یا فایل کگامل هر جلسه می باشد؟

پاسخ
محمدرضا احمدی

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

04 بهمن 1399

سلام. بله 9 ساعت میباشد. فایل کامل هر جلسه میباشند. سورس پروژه را از سایت Github دانلود کنید. https://github.com/Darayas/Darayas.Map

پاسخ
احمدی

احمدی

09 مهر 1399

تشکر از ویدوی آموزشی خوبتان . یک قسمت را توضیح نداید وقتی بین دو نقطه مسیر یابی را نشان می دهد و اگر بخواهیم نقطه مقصد را تغییر بدهیم همچنان نقطه قبلی مسیرش هست چطور می شود که هر دفعه با زدن نقطه مسیر های قبلی پاک بشه تشکر.

پاسخ
محمدرضا احمدی

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

09 مهر 1399

سلام دوست من. وقت بخیر. این کار را فکر کنم انجام دادیم. البته اگر هم انجام نشده میتونید خیلی راحت با توضیحاتی که دادیم نقاط را پاک و نقاط جدید را معرفی نمایید

پاسخ
مرتضی  سارانی محمدخانی

مرتضی سارانی محمدخانی

03 مهر 1399

سلام دوره خیلی خوبی بود و مفید میشه سورس پروژه رو هم قرار بدید

پاسخ
محمدرضا احمدی

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

03 مهر 1399

سلام. خوشحالم مفید بود. سورس در گیت هاب: https://github.com/Darayas/Darayas.Map و دموی پروژه: https://maps.demos.dotnetlearn.com/

پاسخ
rasoul

rasoul

22 شهریور 1399

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

پاسخ
محمدرضا احمدی

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

22 شهریور 1399

سلام دوست من. شما باید از Cached Tile Layer استفاده کنید. این لینک را ببینید. https://github.com/yagajs/leaflet-cached-tile-layer

پاسخ
قنبری

قنبری

19 شهریور 1399

تشکر از آموزش خوبتان مجدد می خواستم بدانم که آیا امکان اضافه کردن مسیریاب عابر پیاده روی نقشه با leaflet هست. چون در آموزش تنها مسیر یابی با ماشین را نمایش می دهد. من می خواستم مثل گوگل گزینه ای برای تعیین مسیر یابی برای عابر پیاده بین دو نقطه هم اضافه کنم ممنون می شوم اگر راهنمایی کنید چطور می توانم این گزینه را فعال کنم چون هرچی گشتم چیز خاصی پیدا نتوستم.

پاسخ
محمدرضا احمدی

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

20 شهریور 1399

حقیقت هرچی میگردم بجر پلاگین های غیر رایگان برای Leaflet چیزی پیدا نمیکنم. بهترین کار این است که ابتدا فاصله ی بین دو نقطه را بدست اورید و بعدا برسی کنید یک نفر به طور معمول وقتی داره پیاده روی میکنه چند کیلومتر بر ساعت حرکت میکند. حالا با استفاده از جدول تناسب که در پنجم ابتدایی خوندیم (یادش بخیر چقدر سرش کتک خوردیم) تناسب بین مقدار مسافتی طی شده ی ماشین در یک ساعت و مسافت طی شده ی شخص در یک ساعت را بدست اورید. راه بی دردسر و بدون هزینه همینه که البته عیب این روش اینه فقط مسیر جاده ها و خیابان ها و کوچه های رسمی که ماشین رو هستند را نشان میدهد

پاسخ
قنبری

قنبری

31 شهریور 1399

http://project-osrm.org/ این پروژه را من توی اینرتت سرچ کردم پیدا کردم و از مسیریاب عابر پیاده و دوچرخه هم پشتیبانی می کند ولی متاسفانه نتونستم از این استفاده کنم می خواستم بدونم شما استفاده کردید

پاسخ
محمدرضا احمدی

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

03 مهر 1399

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

پاسخ
قنبری

قنبری

16 شهریور 1399

آقای احمدی تشکر از آموزش شما می خواستم بدونم آیا امکان دانلود یک منطقه مثلا مپ یک شهر را دانلود کرد روی سرور خود گذاشت به خاطر اینکه منابع سخت افزاری کمتری استفاده کند و همچنین تمام سرویس های ما در این منطقه هست نیاز به کل استان و کشور دنیا نیست. آیا امکان استفاده اینطوری هست؟ ممنون می شوم راهنمایی کنید.

پاسخ
محمدرضا احمدی

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

17 شهریور 1399

سلام و درود خدمت شما. بله. امکان پذیر هست. به ادرس https://protomaps.com/extracts مراجعه کنید البته با تحریم شکن. و اونجا نوشته چکاری انجام دهید. فقط راه اندازی سرورش کمی پیچیده س که البته در https://switch2osm.org/serving-tiles توضیحات لازمش را داده که چه کار انجام دهید

پاسخ
قنبری

قنبری

17 شهریور 1399

تشکر از پاسخ شما یک سوال دیگه هم داشتم. می خواستم بدونم که در بعضی مناطق شهری که بافت قدیمی دارند و از کوچه های غیر استاندارد درست شده است. آیا اضافه کردن مسیر در نقشه برای کسانی که پیاده راه می روند و تمامی مسیرها را بخواهیم نمایش بدهیم چطوری می شود که به نقشه راه اضافه کنیم بعد براورد کنیم که چند دقیقه می شود پیاده رسید.

پاسخ
محمدرضا احمدی

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

20 شهریور 1399

تاجایی که در جریان باشم نمیتونید چون راه ها را با استفاده از پلاگین و از سرور خارجی میخوانیم. اگر بخواهید خودتان این کارو بکنید به صرفه نیست چون باید تک تک طول و عرض جغرافیای تمام راه ها را بدید که آنها با هوش مصنوعی این کارو میکنند

پاسخ
hossein montaseri

hossein montaseri

09 مرداد 1399

بسیار عالی و مسلط هستید استاد ارزوی موفقیت بیشتر برای شما دارم

پاسخ
محمدرضا احمدی

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

10 مرداد 1399

متشکرم. خوش حالم راضی هستید

پاسخ
amirhossein

amirhossein

23 تیر 1399

بسیار دوره ی مفیدی هست خیلی وقته دنبال آموزش لیفلت بودم خیلی ممنون استاد

پاسخ
محمدرضا احمدی

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

23 تیر 1399

خواهش میکنم. خوشحالم راضی هستید

پاسخ
reza abolhasanzadeh

reza abolhasanzadeh

15 تیر 1399

ممنون . الان سرعت خیلی خوب شده

پاسخ
reza abolhasanzadeh

reza abolhasanzadeh

14 تیر 1399

اقای احمدی سلام. سرور دانلود هنوز مشکل داره ظاهرا . نمیشه دانلود کرد

پاسخ
محمدرضا احمدی

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

15 تیر 1399

سلام. بله در کانال تلگرامی هم اعلام کردم. متاسفانه از کم کاری پشتیبانی سرور دانلود هست. اعلام کردم و گفتند به زودی درست میگردد. با تشکر از صبر و شکیبایی شما

پاسخ
reza abolhasanzadeh

reza abolhasanzadeh

13 تیر 1399

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

پاسخ
محمدرضا احمدی

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

13 تیر 1399

خیلی ممنون و متشکرم. نظر شما باعث دلگرمیست

پاسخ