در این آموزش شما را با یک نقشه تحت وب ساده آشنا می کنیم. برای آن که امکانات پیشرفته کار با نقشه ها را به سایت خود اضافه کنید می بایست به سمت برنامه نویسی Web GIS حرکت کنید. در یک سامانه GIS، امکانات پیشرفته برای کار با نقشه ها وجود دارد و اگر این امکانات را تحت وب پیاده سازی کنیم، به یک سامانه Web GIS دست پیدا کرده ایم. چیزی که در این آموزش به شما یاد می دهیم، نحوه ساخت یک Web GIS ساده می باشد.
گام اول: طراحی یک وب سایت
ما می خواهیم یک وب سایت بسازیم و در آن نقشه ای را اضافه نماییم. لذا در این آموزش، در اولین گام یک وب سایت به شکل زیر تولید می کنیم.
گام دوم: افزودن نقشه به وب سایت
نقشه ها ویژگی های زیادی دارند. نقشه ها زبان گویا در انتقال مفاهیم و اطلاعات هستند. آنها به ما کمک می کنند که دنیای اطراف خود را بهتر بشناسیم و تصمیمات درست تری را بگیریم. امروزه نقشه ها از حالت کاغذی به حالت دیجیتالی تبدیل شده اند و قابلیت تعامل با استفاده کنندگان از نقشه را پیدا کرده اند. شما هم به دلایل مختلفی می خواهید وب سایتی که ساختید را به نقشه مجهز نمایید و در این آموزش، مراحل ساخت نقشه تحت وب را دنبال می کنید. به صورت تخصصی، به نمایش نقشه تحت وب، Web Mapping گفته می شود. نقشه های تحت وب امروزه بسیار گسترده شده اند و کاربردهای فراوانی دارند. اگرچه در این آموزش شما یاد می گیرید به سادگی یک نقشه تحت وب بسازید اما بدانید که نقشه تحت وب به صورت پیشرفته تر، یک سامانه اطلاعات مکانی تحت وب یا Web GIS نامیده می شود.
سامانه اطلاعات مکانی تحت وب یا Web GIS
توسط سامانه Web GIS، نقشه ها آنلاین می شوند و می توان روی آن ها قابلیت هایی مانند جستجو، نمایش مکان روی نقشه، مسیریابی روی نقشه، علامت گذاری روی نقشه، تحلیل اطلاعات مکانی و ... را تنها از طریق مرورگر های وب در دسترس کاربر قرار داد.
امروزه برای ساخت نقشه تحت وب، ابزارهای زیادی وجود دارد. ما در این آموزش از کتابخانه جاوااسکریپتی OpenLayers استفاده می کنیم. ایجاد نقشه تحت وب با OpenLayers کار ساده ای می باشد. در نوشته های آموزش OpenLayers که پیش تر در سایت GISPlus منتشر کردیم، به معرفی OpenLayers پرداختیم و نمایش نقشه با OpenLayers را آموزش دادیم. در این آموزش یک ساعته ساخت نقشه تحت وب، می خواهیم با استفاده از کتابخانه OpenLayers، وب سایت خودمان را به نقشه Bing و نیز نقشه OpenStreetMap، مجهز نماییم به نحوی که کاربر بتواند به دلخواه خود، هریک از این نقشه ها را روشن یا خاموش نماید.
گام سوم: اضافه کردن قابلیت های نقشه تحت وب
همان طور که در گام دوم گفتیم، نقشه های تحت وب امروزه بسیار گسترده شده اند و قابلیت های GIS را نیز وارد وب کرده اند و مفهوم جدیدی به نام Web GIS را ایجاد کرده اند. ما در این آموزش علاوه بر این که به شما ساخت نقشه تحت وب را آموزش می دهیم، شروع پیاده سازی قابلیت های GIS در وب را نیز خواهیم داشت. یک Web GIS می تواند دارای قابلیت های بسیاری باشد.قابلیت هایی نظیر نمایش نقشه های عمومی مثل نقشه گوگل، نقشه Bing، نقشه OSM و…، نمایش نقشه اختصاصی (از فایل های AutoCad یا Shapefile)، نمایش تصاویر ماهواره ای یا هوایی، بزرگ نمایی و کوچک نمایی نقشه، روشن و خاموش کردن لایه های نقشه و… از جمله قابلیت های Web GIS می باشند. اگر با امکانات یک سامانه Web GIS آشنا نیستید، می توانید به نوشته پیاده سازی قابلیت های وب GIS مراجعه نمایید. ما در این آموزش، اقدام به پیاده سازی قابلیت های Web GIS می کنیم و قابلیت های زیر را به وب سایت نقشه ای خود، اضافه می کنیم:
امکان روشن و خاموش کردن لایه های نقشه
امکان بزرگ نمایی و کوچک نمایی نقشه
امکان ترسیم اشکال هندسی بر روی نقشه
پیش نیازهای این آموزش
برای ساخت نقشه تحت وب نیازمند طراحی یک وب سایت هستید. اگر طراحی وب سایت را بلد نیستید، بهتر است کمی با مفاهیم اولیه طراحی صفحات وب، آشنا شوید و بر HTML، CSS و JavaScript یک تسلط نسبی داشته باشید. زبان HTML برای ساخت ساختار و ایجاد بخش های یک صفحه وب استفاده می شود. همچنین CSS به منظور ایجاد استایل و شکل و رنگ مناسب برای اجزای وب سایت، استفاده می شود و زبان برنامه نویسی JavaScript، یک صفحه وب را پویا تر کرده و قابلیت هایی نظیر ایجاد انیمیشن، ایجاد نقشه، مدیریت رویداد و… را به وب سایت اضافه می کند.
ما ویدیوهای آموزش رایگان HTML، CSS، JavaScript و jQuery را در بخش آکادمی Web GIS قرار داده ایم که می توانید به رایگان آنها را دانلود کرده و یک وب سایت را طراحی کنید.
آکادمی GISPlus دپارتمان آموزش GIS و مشاوره GIS شرکت بهین رایانش آزاد می باشد.
ما سه کار می کنیم: آموزش GIS، مشاوره GIS، اجرای پروژه های GIS سازمانی
اگر مدیر یا کارشناس یک سازمان یا کسب و کار هستید و یا اگر علاقمند GIS هستید، پس ما می توانیم به شما کمک کنیم.
14 thoughts on “ساخت نقشه تحت وب در یک ساعت”
مریم میگوید:
سلام… ممنون از اموزش مفید و البته رایگان شما … در بخش هایی از پروزه رفرنس هایی اضافه میشه که گفته نمیشه از کجا باید دانلود و به پروژه اضافه شن و بخشی از کد هم نشون داده نمیشه… اگر امکانش هست سورس کد مربوط به این فیلم را نیز انتشار دهید. ممنون از وبسایت بسیار مفید جی ای اس پلاس
درود بر شما که به دنبال یادگیری و افزایش مهارت های خود هستید. تمامی رفرنس ها در سورس کد وب سایت تولید شده موجود هستند. می توانید سورس کد این آموزش را از مسیر https://gisplus.ir/p1 تهیه نمایید.
در این آموزش، تلاش این بوده که مباحث برنامه نویسی تا حد ممکن بزرگ جلوه داده نشوند. اینکه می گویید یکسری از کدها را معلوم نیست و یا رفرنس ها ذکر نشده است به همین علت می باشد. زیرا در پایشی که روی مخاطبین سایت انجام دادیم، بسیاری از آنها ترس از برنامه نویسی داشته اند و به سمت اینکه خودشان یک سامانه را بسازند حرکت نمی کرده اند.
سلام دوست عزیز
شما می توانید فیلم آموزش ساخت نقشه تحت وب در یک ساعت را به صورت کاملا رایگان بدون این که بهایی برای ان پرداخت کنید مشاهده کنید. اگر هم سوروس کدش را خواستید سورس کد آن داخل بسته ی دیگری به اسم آموزش برنامه نویسی Web GIS فقط در یک ساعت موجود هست
ادرس این صفحه https://gisplus.ir/p1
سلام دوست عزیز
شما می توانید فیلم آموزش ساخت نقشه تحت وب در یک ساعت را به صورت کاملا رایگان بدون این که بهایی برای ان پرداخت کنید مشاهده کنید. اگر هم سوروس کدش را خواستید سورس کد آن داخل بسته ی دیگری به اسم آموزش برنامه نویسی Web GIS فقط در یک ساعت موجود هست.
ادرس این صفحه https://gisplus.ir/p1
با سلام
شما می توانید برای تمرین بیشتر و دریافت فایل های مورد نیاز این اموزش از بسته ی این اموزش 1 ساعته استفاده کنید که ادرس این بسته در زیر اورده شده است. https://gisplus.ir/p1
با سلام دوست عزیز
تابع getLayersByNameیکی از توابع مربوط به کتاب خانه OpenLayers 2 است و علتی که ان را به عنوان تابع در debugger chrome نمی شناسد این است که شاید این کتابخانه به درستی نصب نشده است
موفق و پیروز باشید
با سلام بله امکان انجام این کار هست فقط باید در نظر داشته باشید که فعال کردن این قابلیت ها کمی پیچیده هست و قبل از انجام این کار شما باید سامانه WebGIS ای با قابلیت پایه را راه اندازی کرده باشید
با سلام بله امکان انجام این کار هست فقط باید در نظر داشته باشید که فعال کردن این قابلیت ها کمی پیچیده هست و قبل از انجام این کار شما باید سامانه WebGIS ای با قابلیت پایه را راه اندازی کرده باشید.
موفق و پیروز باشید
سلام، خسته نباشید. من یک صفحه WebGIS رو با استفاده از HTML، CSS پیاده کرده و قابلیتهای سمت کلاینت رو با استفاده از OpenLayers پیاده سازی کردم. یکسری قابلیتهای خاص میخوام ایجاد کنم که قبلاً اونها رو با زبان C# داخل ArcGIS نوشته و استفاده می کردم. حالا میخوام اون قابلیتها رو روی صفحه وب هم ایجاد کنم. برای اینکار باید حتماً از ArcGIS Server استفاده کنم؟؟
نکته: حجم داده هام بالاست، تصویر ماهواره ای و شیپ فایل مورد استفاده است.
ممنون میشم راهنمایی کنید.
با تشکر.
سلام… ممنون از اموزش مفید و البته رایگان شما … در بخش هایی از پروزه رفرنس هایی اضافه میشه که گفته نمیشه از کجا باید دانلود و به پروژه اضافه شن و بخشی از کد هم نشون داده نمیشه… اگر امکانش هست سورس کد مربوط به این فیلم را نیز انتشار دهید. ممنون از وبسایت بسیار مفید جی ای اس پلاس
درود بر شما که به دنبال یادگیری و افزایش مهارت های خود هستید. تمامی رفرنس ها در سورس کد وب سایت تولید شده موجود هستند. می توانید سورس کد این آموزش را از مسیر https://gisplus.ir/p1 تهیه نمایید.
در این آموزش، تلاش این بوده که مباحث برنامه نویسی تا حد ممکن بزرگ جلوه داده نشوند. اینکه می گویید یکسری از کدها را معلوم نیست و یا رفرنس ها ذکر نشده است به همین علت می باشد. زیرا در پایشی که روی مخاطبین سایت انجام دادیم، بسیاری از آنها ترس از برنامه نویسی داشته اند و به سمت اینکه خودشان یک سامانه را بسازند حرکت نمی کرده اند.
با توجه به توضیحات فوق عملا آموزش رایگان نیست و لفظ رایگان صرفا جنبه تبلیغاتی دارد!
سلام دوست عزیز
شما می توانید فیلم آموزش ساخت نقشه تحت وب در یک ساعت را به صورت کاملا رایگان بدون این که بهایی برای ان پرداخت کنید مشاهده کنید. اگر هم سوروس کدش را خواستید سورس کد آن داخل بسته ی دیگری به اسم آموزش برنامه نویسی Web GIS فقط در یک ساعت موجود هست
ادرس این صفحه
https://gisplus.ir/p1
سلام دوست عزیز
شما می توانید فیلم آموزش ساخت نقشه تحت وب در یک ساعت را به صورت کاملا رایگان بدون این که بهایی برای ان پرداخت کنید مشاهده کنید. اگر هم سوروس کدش را خواستید سورس کد آن داخل بسته ی دیگری به اسم آموزش برنامه نویسی Web GIS فقط در یک ساعت موجود هست.
ادرس این صفحه
https://gisplus.ir/p1
با تشکر از زحماتتون ولی بدون فایل تمرین و فایل های مورد استفاده در ویدئو عملا کارایی ویدئو بسیار کاهش می یابد.
با سلام
شما می توانید برای تمرین بیشتر و دریافت فایل های مورد نیاز این اموزش از بسته ی این اموزش 1 ساعته استفاده کنید که ادرس این بسته در زیر اورده شده است.
https://gisplus.ir/p1
با سلام. لطفا درمورد متد getLayersByName توضیح دهید. چون debugger chrome آن را به عنوان function نمیشناسد
با سلام دوست عزیز
تابع getLayersByNameیکی از توابع مربوط به کتاب خانه OpenLayers 2 است و علتی که ان را به عنوان تابع در debugger chrome نمی شناسد این است که شاید این کتابخانه به درستی نصب نشده است
موفق و پیروز باشید
سلام خسته نباشید من می خوام چندین دپو را داخل نقشه نشان بدهم و قابلیت سرچ و ترسیم و به صورت وب و اندوروید باشه آیا امکان داره
با سلام بله امکان انجام این کار هست فقط باید در نظر داشته باشید که فعال کردن این قابلیت ها کمی پیچیده هست و قبل از انجام این کار شما باید سامانه WebGIS ای با قابلیت پایه را راه اندازی کرده باشید
با سلام بله امکان انجام این کار هست فقط باید در نظر داشته باشید که فعال کردن این قابلیت ها کمی پیچیده هست و قبل از انجام این کار شما باید سامانه WebGIS ای با قابلیت پایه را راه اندازی کرده باشید.
موفق و پیروز باشید
سلام، خسته نباشید. من یک صفحه WebGIS رو با استفاده از HTML، CSS پیاده کرده و قابلیتهای سمت کلاینت رو با استفاده از OpenLayers پیاده سازی کردم. یکسری قابلیتهای خاص میخوام ایجاد کنم که قبلاً اونها رو با زبان C# داخل ArcGIS نوشته و استفاده می کردم. حالا میخوام اون قابلیتها رو روی صفحه وب هم ایجاد کنم. برای اینکار باید حتماً از ArcGIS Server استفاده کنم؟؟
نکته: حجم داده هام بالاست، تصویر ماهواره ای و شیپ فایل مورد استفاده است.
ممنون میشم راهنمایی کنید.
با تشکر.
با سلام اگر حجم دیتاهای شما زیاد باشد Arcgis Server جواب گو نیست و شما باید تحت وب با #C یک سامانه WebGIS طراحی کنید