در صورتی که نیاز دارید نقشه های خود را با دیگران به اشتراک بگذارید و می خواهید از پیچیدگی نرم افزار های کار با نقشه در امان بمانید، بهتر است از یک سامانه Web GIS استفاده کنید. توسط سامانه وب GIS، می توان داده و نقشه های GIS را به همراه امکاناتی نظیر جستجو، نمایش مکان ها، مسیریابی و یا تحلیل و… در اختیار کاربران قرار داد به شکلی که کاربران کمترین دانش GIS بتوانند از قابلیت های Web GIS استفاده نمایند و نیازمندی های خود را برطرف سازند.

در نوشته های پیشین برنامه نویسی Web GIS، با ساختار یک سامانه Web GIS و ابزارهای مورد نیاز برای راه اندازی و پیاده سازی Web GIS متن باز آشنا شدید و نحوه کار با برخی از آن ها را یاد گرفتید و در نهایت یک نقشه تحت وب را با استفاده از کتابخانه OpenLayers راه اندازی کردید.

در نوشته پیشین شما را با قابلیت های Web GIS آشنا کردیم و گفتیم که یک سامانه وب GIS با قابلیت های پایه GIS چه امکاناتی را باید داشته باشد.

در این نوشته و نوشته های آتی قصد داریم تا به آموزش نحوه پیاده سازی قابلیت های Web GIS بپردازیم و به مرور به شما یاد دهیم که چطور یک سامانه وب GIS با قابلیت های پایه GIS را پیاده سازی نمایید.

همچنین این نوشته از مجموعه آموزش های آکادمی WEB GIS است. برای مشاهده آموزش های پیشین و دانلود فیلم و PDF آن ها، می توانید به صفحه آکادمی WEB GIS مراجعه نمایید.

قابلیت های Web GIS را بشناسید

در این آموزش کمی تخصصی تر وارد برنامه نویسی وب GIS می شویم و نقشه تحت وب که در آموزش قبل ایجاد کردیم را توسعه می دهیم و یک قابلیت جذاب و مهم یعنی امکان ترسیم عوارض مختلف مثل نقطه، خط، چند ضلعی را به نقشه Web خود اضافه می کنیم. این می تواند مقدمه ای بر پیاده سازی قابلیت تخصصی Editing بر روی Web GIS باشد که با استفاده از آن می توانیم نقشه های جدید مانند نقشه معابر شهر، اماکن و املاک و… را ایجاد و ویرایش نماییم. البته این کا نیاز به حرفه ای شدن در زمینه برنامه نویسی Web GIS دارد.

اگر می خواهید نحوه انجام این کار را یاد بگیرید در این آموزش با ما همراه باشید…

پیش از خواندن این آموزش باید ابتدا آموزش های زیر را مشاهده نمایید:

• آموزش OpenLayers برای نمایش نقشه ها در وب
• ایجاد نقشه وب با استفاده از OpenLayers

در اولین آموزش OpenLayers که پیش تر به شما ارایه شد، نقشه گوگل را با کتابخانه OpenLayers به سایت خود اضافه کردیم و توانستیم قابلیت های پایه یک نقشه تحت وب را پیاده سازی کنیم. این قابلیت های پایه عبارتند از:

• قابلیت نمایش نقشه
• قابلیت بزرگ نمایی (Zoom In) و کوچک نمایی (Zoom Out)
• قابلیت جابجایی نقشه

و سپس قابلیت های جدیدی را برای ایجاد نقشه تحت وب حرفه ای تر، اضافه کردیم. این قابلیت ها عبارت است از:

• نمایش نقشه OSM با OpenLayers
• روشن و خاموش کردن لایه ها
• اضافه کردن علامت (مارکر) بر روی مختصات جغرافیایی مورد نظر
• نمایش پیام، هنگام کلیک بر روی مارکر

در این آموزش به پیاده سازی قابلیت های وب GIS به صورت حرفه ای تر می پردازیم و قابلیت جدیدی را برای ایجاد نقشه تحت وب حرفه ای تر، اضافه می کنیم. قابلیت هایی که در این آموزش اضافه می کنیم شامل موارد زیر هستند:

در این آموزش به پیاده سازی قابلیت های وب GIS به صورت حرفه ای تر می پردازیم و قابلیت جدیدی را برای ایجاد نقشه تحت وب حرفه ای تر، اضافه می کنیم. قابلیت هایی که در این آموزش اضافه می کنیم شامل موارد زیر هستند:

• ترسیم انواع عوارض نقطه ای (به انگلیسی Point)، خطی (به انگلیسی Line) و چندضلعی (انگلیسی Polygon ) بر روی نقشه
• حذف ترسیمات از روی نقشه

ترسیم انواع عوارض نقشه ای با OpenLayers

در یک نقشه تحت وب ممکن است بخواهید مکان ها یا محدوده هایی از نقشه (مثلا محدوده پارک های شهر یا معابر) را برای کاربردهای خاصی مشخص کنید و یا یک لایه خاص خودتان بر روی نقشه وب ایجاد نمایید. برای این کار نیاز است تا امکان ترسیم عوارض را به نقشه وب اضافه کنید.

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

گام 1: اضافه کردن لایه vector به نقشه 

برای اضافه کردن لایه Vector به نقشه باید چند خط کد را به کدهای موجود در فایل map.jsاضافه کنیم.

[alert type=”success”]نکته:این فایل را در آموزش ایجاد نقشه تحت وب تولید کردیم که اگر فیلم آموزشی آن را دانلود کرده باشید، به سورس کد آن دسترسی دارید. همچنین سورس کد کلیه آموزش های پیشین به همراه فایل فیلم این آموزش نیز از انتهای همین نوشته قابل دانلود می باشند. [/alert]

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

به این منظور در ابتدای فایل map.js متغیرهای زیر را به صورت سراسری تعریف می کنیم:

• drawControls : برای اضافه کردن قابلیت ترسیمات و مشخص کردن نوع ترسیم و لایه مربوط به آن
• pointLayer : لایه نقطه برای ترسم نقاط مانند مکان های گردشگری
• متغیر lineLayer : لایه خط برای ترسیم خطوط مانند خیابان ها
• polygonLayer : لایه چندضلعی برای ترسیم محدوده ها مانند محدوده فضا سبز

JavaScript5 lines

12345/  ;var drawControls, pointLayer, lineLayer, polygonLayer/

پس از آن، متد ()add_drawing را برای اضافه کردن سه لایه point، Line و Polygon به صورت برداری (به انگلیسی Vector) بر روی نقشه، اضافه می کنیم.

در ابتدای متد، متغیر های  pointLayer، lineLayer و polygonLayer را به صورت زیر مقدار دهی می کنیم.

function add_drawing() {
pointLayer = new OpenLayers.Layer.Vector("نقطه");
lineLayer = new OpenLayers.Layer.Vector("خط");
polygonLayer = new OpenLayers.Layer.Vector("چندضلعی");

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

لایه هایی از جمله OSM که در جلسه پیش ( نوشته آموزش ایجاد نقشه تحت وب) اضافه کردیم لایه های پایه یا در اصطلاح Basemap بودند. لایه های Vector را می توانیم در کنار لایه های پایه داشته باشیم. یعنی در حالی که یکی از لایه های پایه روشن است، لایه های دیگر بر روی لایه پایه نمایش داده شوند.JavaScript6 lines

123456/    map.addLayers([pointLayer, lineLayer, polygonLayer]);/

گام 2: اضافه کردن کنترل ترسیمات OpenLayers

پس از اضافه کردن لایه های Vector، متغیر drawControls را که برای اضافه کردن کنترل ترسیمات بر روی نقشه تعریف شده است را به صورت زیر مقدار دهی می کنیم.

برای اضافه کردن قابلیت ترسیم عوارض بر روی نقشه با استفاده از کتابخانه OpenLayers باید چند گام را طی کنیم. این گام ها عبارتند از:JavaScript12 lines

123456789101112/  drawControls = {        point: new OpenLayers.Control.DrawFeature(pointLayer,            OpenLayers.Handler.Point),        line: new OpenLayers.Control.DrawFeature(lineLayer,            OpenLayers.Handler.Path),        polygon: new OpenLayers.Control.DrawFeature(polygonLayer,            OpenLayers.Handler.Polygon)    };    /

همان طور که در شکل می بینید سه کنترل point، line و polygon به ترتیب برای ترسیم نقطه، خط و چند ضلعی تعریف شده و برای هر یک، لایه متناظر مشخص شده است. به طور مثال مشخص شده کنترل ترسیم نقطه بر روی لایه pointLayer فعال گردد و اگر کاربر، متد ترسیم برای عارضه نقطه ای را فراخوانی کرد، بتواند نقاطی را بر روی لایه pointLayer ترسیم نماید.

در انتهای متد، در یک حلقه for، همه مقادیر متغیر drawControls که همان انواع ترسیمات می باشد را به کنترل های نقشه اضافه می کنیم. کد نهایی این متد به صورت زیر است:JavaScript22 lines

12345678910111213141516171819202122/var drawControls, pointLayer, lineLayer, polygonLayer;function add_drawing() {    pointLayer = new OpenLayers.Layer.Vector("نقطه");    lineLayer = new OpenLayers.Layer.Vector("خط");    polygonLayer = new OpenLayers.Layer.Vector("چندضلعی");    map.addLayers([pointLayer, lineLayer, polygonLayer]);    drawControls = {        point: new OpenLayers.Control.DrawFeature(pointLayer,            OpenLayers.Handler.Point),        line: new OpenLayers.Control.DrawFeature(lineLayer,            OpenLayers.Handler.Path),        polygon: new OpenLayers.Control.DrawFeature(polygonLayer,            OpenLayers.Handler.Polygon)    };    for (var key in drawControls) {        map.addControl(drawControls[key]);    }    /

حال برای اضافه شدن لایه های تعریف شده، متد add_drawing() را در تابع init() فراخوانی می کنیم.

به صورت پیش فرض، کنترل های اضافه شده بر روی نقشه، غیرفعال هستند و برای فعال کردن کنترل های مدنظر باید یک متد جدید با نام toggleControl را به صورت زیر پیاده سازی کنیم.

پارامتر ورودی element برای مشخص کردن نوع ترسیم مد نظر و فعال سازی آن استفاده می شود.JavaScript14 lines

1234567891011121314/function toggleControl(element) {    for (key in drawControls) {        var control = drawControls[key];        if (element == key) {            control.activate();        } else {            control.deactivate();        }    }}/

گام 3: فعال کردن ترسیمات بر روی نقشه OpenLayers

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

برای تست و فراخوانی متدهای فوق می توانیم با انتخاب کلید F12 و باز کردن Inspector مرورگر، در تب Console توابع نوشته شده را فراخوانی کنیم.

به طور مثال با فراخوانی متد (‘toggleControl(‘line به صورت زیر، ترسیم خط فعال می شود.

به طور مثال با فراخوانی متد  (‘toggleControl(‘line  به صورت زیر، ترسیم خط فعال می شود.

و یا با فراخوانی متد (‘toggleControl (‘polygon به صورت زیر، ترسیم polygon فعال می شود.

و با فراخوانی متد (‘toggleControl(‘point به صورت زیر، ترسیم نقطه فعال می شود.

همچنین برای غیر فعال کردن ترسیمات می توانید پارامتر ورودی را برابر با ‘none’ قرار دهید:

;(‘toggleControl(‘none

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

[alert type=”success”]نکته:نحوه طراحی واسط کاربری برای فعال سازی قابلیت ترسیمات بر روی نقشه و فراخوانی نوع ترسیم، در ویدیوی مربوط به همین نوشته به همراه سورس کد آن، در انتهای همین نوشته قابل دانلود می باشد. [/alert]

حذف ترسیمات از روی نقشه

123456789/function delete_drawing() {    pointLayer.removeAllFeatures();    lineLayer.removeAllFeatures();    polygonLayer.removeAllFeatures();}/

یقینا وقتی قابلیت ترسیم عوارض و نقشه ها را بر روی سامانه Web GIS داریم، باید بتوانیم ترسیمات انجام شده را ویرایش یا حذف نماییم. برای حذف عوارض ترسیم شده از روی نقشه باید متدی با نام delete_drawing() در فایل map.js اضافه کنیم. تصویر زیر نحوه پیاده سازی این متد را نشان می دهد.

تنها کافی است پس از ترسیم بر روی نقشه، متد delete_drawing() را فراخوانی کنید تا ببینید که ترسیمات انجام شده به طور کامل حذف خواهند شد.

اکنون می توانیم ترسیمات رسم شده بر روی نقشه را با فراخوانی متد delete_drawing حذف کنیم.

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

[alert type=”success”]نکته:نحوه طراحی واسط کاربری برای فعال سازی قابلیت حذف ترسیمات از روی نقشه در ویدیوی مربوط به همین نوشته به همراه سورس کد آن، در انتهای همین نوشته قابل دانلود می باشد.[/alert]

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

فیلم آموزش پیاده سازی قابلیت های Web GIS 

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

در کنار این فیلم آموزشی، سورس کد مربوطه نیز قرار داده شده است.

به شما پیشنهاد می کنیم فیلم آموزش پیاده سازی قابلیت های Web GIS را تهیه نمایید. ما در این فیلم تمامی مراحل این آموزش را با جزئیات بیشتر و به صورت کاملا عملی به شما نشان می دهیم.

 

سخن پایانی 

امیدوارم از این آموزش لذت برده باشید. در آموزش های پیشین از سلسله نوشته های آموزش OpenLayers،نمایش نقشه OSM با OpenLayers و علامت گذاری نقشه و نیز افزودن اولین قابلیت تعاملی با نقشه را به شما یاد دادیم و سپس شما را با قابلیت های Web GIS آشنا کردیم. در این آموزش به شما یاد دادیم که چطور قابلیت ترسیمات بر روی نقشه را به نقشه وب خود اضافه کنید و در واقع یک گام جدید در تکمیل قابلیت های Web GIS برداشتیم.

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

در آموزش های آتی آکادمی Web GIS با ما همراه باشید تا قابلیت های Web GIS را به مرور به سامانه خود اضافه کنید.