طراحی اپلیکیشن با الگوهای ArcGIS و Dojo

 طراحی اپلیکیشن با الگوهای ArcGIS و Dojo


اضافه کردن گرافیک‌ها به نقشه-موسسه چشم انداز-آموزش کاربردی GIS و RS

گرافیک‌ها، نقاط و خطوط و پولیگون‌هایی هستند که در یک لایه ترسیم می‌شوند. گرافیک‌ها بسته به اینکه چه لایه‌ای با نقشه نمایش داده می‌شود، می‌توانند خطی، نقطه‌ای یا پولیگونی باشند. بیشتر افراد گرافیک را با سمبل یکی می‌دانند؛ اما در واقع گرافیک نمادی است که به صورت موقت بر روی عارضه قرار می‌گیرد. مثلاً در نتیجه‌ی جستجو و پیدا کردن عارضه‌ی مورد جستجو، روی عارضه‌ی مورد نظر، گرافیکی موقتی قرار می‌گیرد تا این عارضه قابل شناسایی باشد؛ اما سمبل، شکل ظاهری یک عارضه‌ی نقطه‌ای، خطی و پولیگونی است. مثلاً سمبل یک عارضه‌ی نقطه‌ای می‌تواند یک دایره، مربع، لوزی و هر شکل دیگری باشد که آن عارضه را نشان می‌دهد و دائمی است. هر گرافیک در Arc GIS Server شامل 4 شی است: 1- هندسه‌ی گرافیک 2- نماد وابسته به گرافیک 3- ویژگی‌های توصیف گرافیک 4- الگوی پنجره‌ای که اطلاعات مربوط به گرافیک انتخاب شده را درون خود نمایش می‌دهد. هرچند نیازی به تنظیم این 4 شی نیست و بسته به اپلیکیشنی که می‌سازید می‌توانید از اشیاء مذکور استفاده کنید. مثلاً برای اپلیکیشنی که مختصات جغرافیایی یک نقطه را روی یک نقشه نشان می‌دهد شی ویژگی یا شی پنجره‌ی اطلاعات اکتفاء می‌کند؛ اما در بیشتر مواقع از شی هندسه‌ی گرافیک و شی نماد گرافیک استفاده می‌شود. گرافیک‌ها اشیاء موقتی هستند که در یک لایه مجزا ذخیره می‌شوند. این لایه ­ی مجزا لایه ­ی گرافیک‌ها نامیده می‌شود. لایه‌ی گرافیکی از کلاس Layer ارث بری می‌کند؛ بنابراین همه‌ی ویژگی‌ها، متدها و رویدادهای کلاس Layer در این لایه نیز قابل استفاده خواهند بود. گرافیک‌ها در اپلیکیشن در بالای تمام لایه‌ها نمایش داده می‌شوند. نمونه‌ای از گرافیک نقطه‌ای و خطی در تصویر زیر نمایش داده شده است. این گرافیک‌ها می‌توانند هم توسط کاربر و هم توسط اپلیکیشن ایجاد شوند. برای مثال در اپلیکیشن زیر برای تجزیه و تحلیل تجارت ابزاری فراهم شده که کاربر با آن ابزار می‌تواند به صورت دستی پولیگون‌هایی بر روی لایه برای نمایش مناطق مستعد تجارت و کسب و کاربکشد. در تصویر زیر مناطق مستعد کسب و کار به صورت گرافیک پولیگونی نمایش داده شده است.

ArcGIS Server نتایج را در قالب گرافیک‌ها بر می‌گرداند. شی QueryTask می‌تواند جستجوهای فیلدی (اطلاعاتی) و مکانی (هندسی) را انجام دهد. نتایج این شی در قالب یک شی FeatureSet به اپلیکیشن برگردانده می‌شوند. شی FeatureSet آرایه‌ای از عوارض است که به هر یک از این عوارض توسط یک گرافیک دسترسی خواهید داشت. می‌توانید عوارض موجود در آرایه را با استفاده از ساختار حلقه روی نقشه نشان دهید. مثلاً می‌خواهیم همه‌ی مناطقی که با دشت‌های طغیان سال 100 تداخل دارند را استخراج کنیم. 100 در اینجا شماره‌ی سال است که ظاهراً عدد معقولی نیست و این یک مثال غیر واقعی است. شی QueryTask چه نوع جستجویی را در این مثال انجام می‌دهد؟ جستجوی مکانی؛ زیرا باید یک عمل Geoprocessing انجام شود. این شی پس از انجام جستجوی مکانی نتایج را به اپلیکیشن برمی‌گرداند. نتایج به صورت گرافیک‌های پولیگونی نمایش داده می‌شوند.

در این بخش مطالب زیر را پوشش می‌دهیم:

1- چهار قسمت یک گرافیک

2- ایجاد شکل هندسی گرافیک

3- گرافیک‌های نمادین

4- تخصیص ویژگی به گرافیک

5- نمایش ویژگی‌های گرافیک در یک پنجره‌ی اطلاعاتی

6- ایجاد گرافیک­ها

7- اضافه کردن گرافیک‌ها به لایه‌ی گرافیک

چهار قسمت یک گرافیک

گرافیک از 4 بخش تشکیل شده است. هندسه، نماد، ویژگی و الگوی اطلاعاتی که در نمودار زیر می‌بینید:

هندسه مکانی است که گرافیک در آن مکان نمایش داده می‌شود. ویژگی هندسه به همراه ویژگی نماد برای تعیین نحوه‌ی نمایش گرافیک هستند. یک گرافیک ‌هم‌چنین ویژگی هایی دارد که اطلاعاتی در مورد آن گرافیک ارائه می‌دهند. مثلاً گرافیک مربوط به منطقه‌‌ی آتش سوزی می‌تواند یک زوج مقدار/ عدد را نشان دهد. مقدار، نام منطقه‌ی آتش سوزی و عدد، مساحت آتش سوزی را نشان می‌دهد؛ و برای تعیین ویژگی‌های گرافیک برای قرار گرفتن در پنجره‌ی اطلاعاتی از الگوی اطلاعاتی استفاده می‌کنیم. قبل از اینکه گرافیک‌ها بر روی نقشه بیایند، اشیاء گرافیک‌ها باید در یک شی لایه‌ی گرافیکی ذخیره شوند. همه‌ی بخش‌های گرافیک، اختیاری هستند. اکثر اوقات، قسمت‌های هندسه و نماد گرافیک استفاده می‌شوند. بدون این دو بخش هیچ چیزی بر روی نقشه نخواهید دید. تصویر زیر از 3 بخش گرافیک استفاده کرده است. توجه داشته باشید که در این تصویر از بخش الگوی اطلاعاتی استفاده نکرده ­ایم.

ایجاد شکل هندسه‌ی گرافیک‌

گرافیک‌ها همیشه یک بخش هندسی دارند که برای موقعیت آن‌ها بر روی نقشه ضروری است. این اشیاء هندسی می‌توانند نقطه، چندنقطه، خط، چندخط، پولیگون و یا چند محدوده باشند. این اشیاء هندسی می‌توانند در نتیجه‌ی اجرای یک جستجو ایجاد شوند. قبل از ایجاد نوع هندسه باید منبع هندسی esri/geometry اضافه شود. این منبع هندسی شامل کلاس‌های Geometry، Point، Multipoint، Polyline، Polygon و Extent است. کلاس Geometry یک کلاس پایه است که کلاس‌های Point, MultiPoint, Polyline, Polygon و Extent از آن ارث بری می‌کنند. همانطور که در کد زیر می‌بینید کلاس point برای تعیین موقعیتی است که دارای طول و عرض جغرافیایی است.

new Point(-118.15, 33.80);

گرافیک‌های نمادین

هر کدام از گرافیک‌هایی که بر روی نقشه ایجاد می‌کنید می‌تواند توسط یکی از کلاس‌های گرافیکی موجود در API نمادگذاری شود. گرافیک‌های نقطه‌ای توسط کلاس SimpleMarkerSymbol نمادگذاری می‌شوند که می‌تواند دایره، لوزی، مربع، بیضی و دیگر اشکال نقطه‌ای باشد؛ که باید ویژگی‌هایی مانند طرح، اندازه، رنگ، حاشیه و سایه را تنظیم کنید. هم چنین می‌توانید نقاط را با کلاس PictureMarkerSymbol نمادگذاری کنید. این کلاس از یک تصویر برای نشان دادن گرافیک استفاده می‌کند. عوارض خطی با کلاس SimpleLineSymbol نمادگذاری می‌شوند که می‌تواند شامل خطوط ممتد، خط چین، نقطه‌ای و یا ترکیبی از این‌ها باشد. پولیگون‌ها توسط کلاس SimpleFillSymbol نمادگذاری می‌شوند و می‌تواند رنگی، توخالی و یا با وضوح قابل تنظیم، تعیین شود. می‌توانید از یک الگوی خاص استفاده کنید و برای گرافیک پولیگونی این الگو را تکرار کنید تا پولیگون را پوشش دهد.

پس اگر می‌خواهید از تکنیک تکرار الگو استفاده کنید، کلاس PictureFillSymbol را به کار ببرید. هم چنین می‌توانید به لایه‌ی گرافیکی متن اضافه کنید. این کار با کلاس TextSymbol قابل انجام است. ویژگی طرح با متد SimpleMarkerSymbol.setStyle() تنظیم می‌شود. این متد فقط یکی از مقادیر ثابت زیر را می‌پذیرد.

  • STYLE_CIRCLE
  • STYLE_CROSS
  • STYLE_DIAMOND
  • STYLE_PATH
  • STYLE_SQUARE
  • STYLE_X

گرافیک‌های نقطه‌ای می‌توانند یک خط حاشیه هم در محیط خود داشته باشند که با استفاده از کلاس SimpleLineSymbol قابل تنظیم است. اندازه و رنگ آن‌ها توسط کلاس‌های موجود در کد زیر قابل تنظیم است:

var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
markerSymbol.setSize(12);
markerSymbol.setColor(new Color([255,0,0,0.5]));

خروجی کد بالا هندسه‌ی گرافیکی به شکل زیر خواهد بود.

عوارض خطی توسط کلاس SimpleLineSymbol نمادگذاری می‌شوند. رنگ این گونه عوارض با کلاس dojo/Color و ضخامت خط با ویژگی setWidth تنظیم می‌شود.

نمونه کد زیر توضیحات ما را بیان می‌کند.

var polyline = new Polyline(msr);
//a path is an array of points
var path = [new Point(-123.123, 45.45, msr),….];
polyline.addPath(path);
var lineSymbol = new SimpleLineSymbol().setWidth(5);
//create polyline graphic using polyline and line symbol
var polylineGraphic = new Graphic(polyline, lineSymbol);
map.graphics.add(polylineGraphic);

تصویر زیر حاصل اجرای کد بالا است.

پولیگون‌ها نیز توسط کلاس SimpleFillSymbol نمادگذاری می‌شوند. خط دور گرافیک پولیگونی با شی SimpleLineSymbol تنظیم می‌شود. به خطوط کد زیر دقت کنید:

var polygon = new Polygon(msr);
//a polygon is composed of rings
var ring = [[-122.98, 45.55], [-122.21, 45.21], [-122.13, 45.53],……];
polygon.addRing(ring);
var fillSymbol = new SimpleFillSymbol().setColor(new
Color([255,0,0,0.25]));
//create polygon graphic using polygon and fill symbol
var polygonGraphic = new Graphic(polygon, fillSymbol);
//add graphics to map’s graphics layer
map.graphics.add(polygonGraphic);

تصویر زیر حاصل اجرای کد بالا است:

برگرفته از کتاب تولید و طراحی اپلیکیشن‌ های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript

نویسنده: دکتر محمد بافقی زاده

نشر: انتشارات اکادمیک