لایه ی Feature-موسسه چشم انداز هزاره سوم ملل-آموزش کاربردی GIS و RS
ArcGIS API for JavaScript برای کار با عوارض گرافیکی، Feature Laye را ارائه کرده است. شی FeatureLayer از شی لایه‌ی گرافیکی ارث بری می‌کند. با این لایه می‌توان عبارات جستجو و انتخاب، ایجاد و اجرا کرد. عبارات جستجو را در بخش قبلی در لایه‌ی گرافیک دیدید. لایه ی Feature برای انجام تغییرات تحت وب به کار می‌رود. لایه ی Feature از لایه‌ی سرویس نقشه dynamic و Tiled متفاوت است.
لایه ی Feature اطلاعات هندسی عارضه را از ArcGIS Server می‌گیرد و به مرورگر انتقال می‌دهد و سپس عوارض با استفاده از این اطلاعات هندسی بر روی نقشه ترسیم می‌شوند. این اطلاعات هندسی ممکن است در یک جدول غیر مکانی و غیر هندسی مانند جداول dbf باشند. کاربر اپلیکیشن، عوارض مورد نیازش را درخواست می‌کند و عملیات انتخاب و جستجو را بر روی آن عوارض انجام می‌دهد و نیازی ندارد که اطلاعات بیشتری را از سرور درخواست کند. شی FeatureLayer برای لایه‌هایی مناسب است که به کلیک‌های ماوس یا حرکت ماوس کاربر واکنش نشان می‌دهند. اگر با یک FeatureLayer که عارضه‌های زیادی دارد کار می‌کنید انتقال عوارض از سرور به اپلیکیشن زمانبر است. FeatureLayer چند حالت نمایش دارد که مشکل طولانی بودن زمان بارگذاری لایه را حل می‌کند که در این بخش توضیح خواهیم داد. یک FeatureLayer می‌تواند عبارات تعریف، تنظیمات مقیاس و دیگر تنظیمات پیکربندی روی لایه در سرویس نقشه را فراهم کند. با FeatureLayer دسترسی به جدول‌های مربوطه، انجام جستجو و نمایش قطعات زمانی قابل انجام است. با این نوع لایه می‌توانید با ضمیمه‌های عارضه کار کنید و کاربردهای مهم دیگری انجام دهید.
در این بخش مطالب زیر را پوشش می‌دهیم:
1- ایجاد شی FeatureLayer
2- تعیین حالت نمایش
3- تنظیم عبارت تعریف
4- انتخاب عوارض
5- ارائه و اجرای FeatureLayer
6- تمرین و کار با FeatureLayer
ایجاد شی FeatureLayer
یک FeatureLayer به لایه‌ی موجود در سرویس نقشه و یا لایه‌ی موجود در سرویس feature ارجاع می‌کند. وقتی می‌خواهید اطلاعات توصیفی و هندسی را از سرور بازیابی کنید و آن‌ها را خودتان نمادگذاری کنید، از سرویس نقشه استفاده کنید و اگر می‌خواهید از نمادهای موجود در فایل سرویس نقشه استفاده کنید و لایه ی Feature را ویرایش کنید از سرویس feature استفاده کنید. لایه ی Feature همهی الگوهای ویرایشی را فراهم می‌کند. این الگوهای ویرایشی در همان سند ماژول ArcMap با پسوند.mxd وجود دارند که این سند را در ArcGIS Server منتشر کرده اید.
در قطعه کد زیر اطلاعاتی در مورد چگونگی ایجاد یک شی FeatureLayer به دست می‌آورید. ابتدا با لایه‌های dynamic و Tiled اشاره گری به سرویس rest فراهم می‌کنید، اما در FeatureLayer باید به یک لایه‌ی خاص در سرویس نقشه اشاره کنید. در کد زیر از اولین لایه‌ی موجود در سرویس نقشه، یک شی FeatureLayer ایجاد می‌کند که با شماره‌ی 0 مشخص شده است. سازنده شی FeatureLayer پارامترهایی مانند حالت نمایش، فیلدهای خروجی و الگوی اطلاعاتی را می‌گیرد.
درکد زیر حالت نمایش را بر روی SNAPSHOT تنظیم کرده ایم. انواع حالت‌های نمایش را در بخش بعدی توضیح خواهیم داد.
var earthquakes = new FeatureLayer(“http://servicesbeta.esri.com/
ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0”,{ mode:
FeatureLayer.MODE_SNAPSHOT, outFields: [“Magnitude”]});
تنظیم پارامترهای سازنده
وقتی یک شی FeatureLayer ایجاد می‌کنید می‌توانید از شی JSON به عنوان اولین پارامتر استفاده کنید که قبلاً درون این شی، تمام پارامترهای مورد نیاز سازنده شی FeatureLayer را قرار داده اید. پارامترهای زیادی در سازنده‌ی این شی وجود دارد؛ اما پارامترهای مهم و رایج را تنظیم می‌کنیم.
ویژگی outFields فیلدها را محدود کرده و برای تعیین فیلدهایی است که با شی FeatureLayer برگردانده می‌شوند. بهتر است فیلدهای ضروری و مورد نیاز اپلیکیشن را با این پارامتر تعیین کنید. اگر برای این پارامتر مقداری تعیین نشود، به صورت پیش فرض همهی فیلدها را بر می‌گرداند.
با محدودکردن فیلدها مطمئن باشید که اپلیکیشن شما عملکرد بهتری دارد. در کد زیر فیلدهای Date و Magnitude را با شی برگرداندیم.
پس از اعمال تغییرات و عملیاتی که روی هر لایه انجام میشود نیاز به بازسازی وجود دارد تا عملیات ویرایشی و تغییر بر روی لایه اعمال شود و لایه با آخرین تغییرات بازسازی شود. به این عمل refresh می‌گویند که اصطلاحاً معادل تازه سازی است.
پارامتر refreshInterval در کد زیر مدت زمان بازسازی لایه را روی 5 دقیقه تنظیم می‌کند.
var earthquakes = new FeatureLayer(“http://servicesbeta.esri.com/
ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0”,{ mode:
FeatureLayer.MODE_SNAPSHOT, outFields: [“Magnitude”], refreshInterval: 5});
هنگامی که روی عارضه کلیک می‌کنیم، پنجره‌ی اطلاعاتی عارضه نمایش داده میشود. برای تعیین طرح‌بندی و ویژگی‌هایی که در این پنجره نمایش داده می‌شوند از ویژگی infoTemplate برای این کار استفاده میشود.
function initOperationalLayer() {
var infoTemplate = new InfoTemplate(“${state_name}”, “Population
(2000): ${pop2000:NumberFormat}”);
var featureLayer = new FeatureLayer(“http://sampleserver6.
arcgisonline.com/arcgis/rest/services/USA/MapServer/2”,{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: [“*”],
infoTemplate: infoTemplate
});
map.addLayer(featureLayer);
map.infoWindow.resize(155,75);
}
باید تنظیمات ویژگی displayOnPan را نیز در نظر بگیرید. اگر مرورگر internet explorer مرورگر اولیه‌ی اپلیکیشن شما می‌باشد، مقدار این ویژگی را به false تنظیم کنید. به طور پیش فرض مقدار این ویژگی true است؛ اما اگر به false تنظیم کنید در طول عملیات پیمایش نقشه، گرافیک‌ها خاموش شده و نمایش داده نمی‌شوند و برای بهبود عملکرد اپلیکیشن در مرورگر internet explorer است.
var earthquakes = new FeatureLayer(“http://servicesbeta.esri.com/
ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0”,{ mode:
FeatureLayer.MODE_SNAPSHOT, outFields: [“Magnitude”], displayOnPan:
false});
حالت نمایش با پارامتر mode تنظیم میشود که مهمترین پارامتر شی FeatureLayer است. با این ویژگی در بخش بعد آشنا خواهید شد.
تعیین حالت‌های نمایش
زمانی که یک شی FeatureLayer ایجاد می‌کنید، باید حالت نمایش عوارض بازیابی شده را مشخص کنید. پارامتر mode زمان و چگونگی آوردن عوارض از سرور به مشتری (اپلیکیشن) را تعیین می‌کند.
انواع حالت‌های نمایش را در نمودار زیر می‌بینید:
حالت Snapshot
این حالت تمام عوارض و جریانات مربوط به آن‌ها را از لایه بازیابی می‌کند و این عوارض به نقشه اضافه می‌شوند؛ بنابراین در این حالت نمایشی باید به حجم لایه توجه داشته باشید. پس در مواقعی که دیتاست کوچک است از این حالت استفاده کنید. دیتاست‌های بزرگ در مد Snapshot کارآئی اپلیکیشن را کاهش می‌دهند. مزیت این حالت در این است که نیازی نیست تا اطلاعات بیشتر و اضافه تری در مورد لایه‌ی مورد نظر به سرور فرستاده شود. تمام عوارض لایه از سرور بازیابی می‌شوند و فقط درخواست لایه به سرور فرستاده میشود و کارآئی اپلیکیشن بالا می‌رود. ArcGIS در هر زمان حداکثر 1000 عارضه را از سرور بازیابی می‌کند. البته این عدد با تنظیمات موجود در ArcGIS Server manager قابل تنظیم است.
زمانی که دیتاست شما کوچک است، از مد snapshot استفاده کنید.
var earthquakes = new FeatureLayer(“http://servicesbeta.esri.com/
ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0”,{ mode:
FeatureLayer.MODE_SNAPSHOT, outFields: [“Magnitude”]});
حالت نمایش on-demand
در این حالت تنها عوارضی بازیابی می‌شوند که در نتیجه‌ی جستجو یا مورد نیاز هستند. تعداد این عوارض برابر با تعداد عوارضی است که در محدودهی قابل نمایش فعلی نقشه (extent) قابل دیدن باشند. در واقع عوارضی را برمی‌گرداند که در محدودهی نمای فعلی نقشه قرار دارند و هر بار که عمل زوم یا پیمایش بر روی نقشه صورت گیرد عوارض متناسب با محدودهی فعلی نقشه از سرور به درون نقشه بازیابی می‌شوند. این نوع نمایش برای دیتاست‌های بزرگ مناسب است و هر زمان که extent نقشه تغییر می‌کند عوارض متناسب با آن extent از سرور واکشی و بازیابی می‌شوند.
var earthquakes = new FeatureLayer(“http://servicesbeta.esri.com/
ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0”,{ mode:
FeatureLayer.MODE_ONDEMAND, outFields: [“Magnitude”]});
حالت نمایش selection-only
در این حالت، در ابتدا عوارض را درخواست نمی‌کنیم. در عوض عوارضی برگردانده می‌شوند که یک عمل انتخاب در اپلیکیشن انجام شده و عوارض انتخاب شده از سرور به یکباره و مستقل از محدودهی فعلی نقشه به اپلیکیشن (مشتری) فرستاده می‌شوند.
var earthquakes = new FeatureLayer(“http://servicesbeta.esri.com/
ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0”,{ mode:
FeatureLayer.MODE_SELECTION, outFields: [“Magnitude”]});
تنظیم عبارت تعریف
عبارات تعریف برای محدود کردن عوارضی است که از سرور به اپلیکیشن فرستاده می‌شوند. فیلدها را بر اساس شرط مورد نظر فیلتر می‌کنیم و تنها آن عوارضی برگردانده می‌شوند که با شرط تعیین شده منطبق باشند. با متد setDefinitionExpression() عبارت تعریف ایجاد می‌کنیم و همهی عوارضی که با این عبارت منطبق شوند درون نقشه نمایش داده می‌شوند. عبارات جستجوی SQL بر روی داده‌ها شرط اعمال می‌کنند؛ و عوارض منطبق با آن شرط نمایش داده می‌شوند. مثلاً در خط کد زیر عوارضی که فیلد PROD_GAS آن‌ها برابر با مقدار Yes می‌باشد، انتخاب می‌شوند و در واقع عوارض بر اساس فیلد PROD_GAS فیلتر می‌شوند.
FeatureLayer.setDefinitionExpression(“PROD_GAS=’Yes'”);
هم‌چنین می‌توانید عبارت تعریفی که اخیراً ایجاد کردید را با استفاده از متد FeatureLayer. getDefinitionExpression() بازیابی کنید.
انتخاب عوارض
FeatureLayer زیرمجموعه‌ای از عوارض لایه را انتخاب می‌کند و سپس عوارض انتخابی را به عنوان ورودی عملیات عوارض دیگر استفاده کرد. عوارض می‌توانند به مجموعه عوارض انتخابی اضافه یا از آن حذف شوند. هم‌چنین می‌توانند با یک نماد متفاوت از دیگر نماد عوارض انتخاب نشده‌ی لایه، ظاهر شوند. متد selectFeatures(query) روی FeatureLayer اجرا میشود و با استفاده از شی Query که پارامتر ورودی این متد است، عوارض را انتخاب می‌کند.
var selectQuery = new Query();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,FeatureLayer.SELECTION_NEW);
فعلاً در مورد شی Query توضیح نمی‌دهیم؛ اما توضیح مختصر اینکه: این شی پارامترهای ورودی جهت جستجوی مکانی و توصیفی (بر اساس فیلد) را ایجاد می‌کند. در شکل زیر یک جستجوی مکانی انجام شده است و عارضه‌ی انتخاب شده با نمادی متفاوت مشخص شده است (خط دور عارضه‌ی مورد جستجو، خط چین شده است).
هر عبارت تعریف یا روی لایه‌ی موجود در اپلیکیشن یا روی یک لایه‌ی موجود در فایل ماژول Arcmap با پسوند.mxd اعمال میشود.
حال چطور به یک عارضه‌ی انتخاب شده، نماد اعمال کنیم؟ برای این کار از متد setSelectionSymbol() بر روی شی FeatureLayer استفاده می‌کنیم که نماد را به عارضه‌ی انتخابی اعمال می‌کند و به طور خودکار این نماد به عوارضی که انتخاب می‌شوند اعمال میشود. می‌توانید یک مجموعه عوارض جدید را انتخاب و یا به مجموعه عوارض انتخاب شده‌ی قبلی اضافه کنید؛ و یا حتی عوارضی را از مجموعه پاک کنید. از ویژگی‌های SELECTION_NEW،SELECTION_ADD و SUBTRACT SELECTION_ برای ایجاد، اضافه کردن و حذف عوارض انتخابی استفاده می‌کنیم. کد زیر یک مجموعه جدید از عوارض را انتخاب می‌کند.
featureLayer.selectFeatures(selectQuery,FeatureLayer.SELECTION_NEW);
علاوه بر این می‌توانید از توابع callback و errback برای پردازش نتایج و مدیریت خطاها استفاده کنید.
ارائه و اجرای لایه ی Feature
می توان از یک ارائه دهنده برای تعیین نماد در لایه ی Feature استفاده کرد. این نماد‌ها، رنگ‌ها و اندازه‌های متفاوتی دارند که براساس اطلاعات توصیفی (فیلد) می‌باشند. در ArcGIS Server JavaScript API پنج نوع ارائه دهنده‌ی SimpleRenderer, ClassBreaksRenderer, UniqueValueRenderer,، DotDensityRenderer و TemporalRenderer وجود دارد. هر کدام از این ارائه دهنده‌ها را توضیح خواهیم داد.
فرآیند ارائه، علیرغم نوع ارائه دهنده‌ای که استفاده می‌کنید، یکسان است. ابتدا یک نمونه از ارائه دهنده ایجاد و برای ارائه دهنده نماد تعیین کنید و سرانجام ارائه دهنده را به لایه ی Feature اعمال کنید.
در کد زیر ایجاد و اعمال ارائه دهنده بر روی لایه ی Feature را انجام دادهایم.
var renderer = new ClassBreaksRenderer(symbol, “POPSQMI”);
renderer.addBreak(0, 5, new SimpleFillSymbol().setColor(new
Color([255, 0, 0, 0.5])));
renderer.addBreak(5.01, 10, new SimpleFillSymbol().setColor(new
Color([255, 255, 0, 0.5])));
renderer.addBreak(10.01, 25, new SimpleFillSymbol().setColor(new
Color([0, 255, 0, 0.5])));
renderer.addBreak(25.01, Infinity, new SimpleFillSymbol().setColor(new
Color([255, 128, 0, 0.5])));
featureLayer.setRenderer(renderer);
ساده ترین نوع ارائه دهنده SimpleRenderer است که برای همهی گرافیک‌ها یک نماد اعمال می‌کند.
ارائه دهنده‌ی UniqueValueRenderer معمولاً بر اساس فیلدی با محتویات متنی صورت می‌گیرد. تصویر زیر بر اساس فیلد نام شهرستان که فیلدی با محتویات متنی است نمادگذاری شده است که شهرستان‌های هر ایالت رنگ مخصوص خود را دارند.
مثلاً لایه‌ای از ایالت‌ها دارید و می‌خواهید هر عارضه (شهرستان) را بر اساس نام ایالتی که در آن قرار دارد، نمادگذاری کنید. هر شهرستان یک نماد متفاوت دارد. کد زیر یک ارائه دهنده‌ی UniqueValueRenderer ایجاد کرده و مقادیر و نماد‌ها را اضافه می‌کند.
var renderer = new UniqueValueRenderer(defaultSymbol, “REGIONNAME”);
renderer.addValue(“West”, new SimpleLineSymbol().setColor(new
Color([255, 255, 0, 0.5])));
renderer.addValue(“South”, new SimpleLineSymbol().setColor(new
Color([128, 0, 128, 0.5])));
renderer.addValue(“Mountain”, new SimpleLineSymbol().setColor(new
Color([255, 0, 0, 0.5])));
یک ارائه دهنده‌ی ClassBreaks با فیلدی که حاوی مقادیر عددی است کار می‌کند و هر عارضه بر اساس مقدار فیلد نمادگذاری میشود.
اگر بخواهید پارسل‌ها بر اساس مقادیر فیلد PROPERTYVALUE نماد گذاری شوند، از ارائه دهنده‌ی ClassBreaks استفاده می‌کنیم. این ارائه دهنده برای فیلدهای دارای محدوده استفاده میشود. هر فیلد دارای یک بازه‌ای از اعداد است که هر بازه حد پایین و حد بالا دارد. مقادیر Infinity و –Infinity برای حد پایین و حد بالای داده‌ها استفاده میشود. در خط آخر کد زیر کلمهی کلیدی Infinity دلالت بر مقادیر بیشتر از 250000 دارد.
var renderer = new ClassBreaksRenderer(symbol, “PROPERTYVALUE”);
renderer.addBreak(0, 50000, new SimpleFillSymbol().setColor(new
Color([255, 0, 0, 0.5])));
renderer.addBreak(50001, 100000, new SimpleFillSymbol().setColor(new
Color([255, 255, 0, 0.5])));
renderer.addBreak(100001, 250000, 50000, new SimpleFillSymbol().
setColor(new Color([0, 255, 0, 0.5])));
renderer.addBreak(250001, Infinity, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
ارائه دهنده‌ی Temporal برای استفاده در عوارض زمان مبنا و نمایش اطلاعات زمانی به کار می‌رود.
قطعه کد زیر با استفاده از ارائه دهنده‌ی ClassBreaks یک ارائه دهنده‌ی Temporal ایجاد و به شی featureLayer اعمال می‌کند. ارائه دهنده‌ی ClassBreaks فیلدها را بر اساس اهمیت و اولویتی که دارند نمادگذاری می‌کند و هر چه اولویت بیشتر باشد، نماد بزرگتر میشود.
// temporal renderer
var observationRenderer = new ClassBreaksRenderer(new
SimpleMarkerSymbol(), “magnitude”);
observationRenderer.addBreak(7, 12, new SimpleMarkerSymbol(S
impleMarkerSymbol.STYLE_SQUARE, 24, new SimpleLineSymbol().
setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new
Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(6, 7, new SimpleMarkerSymbol(S
impleMarkerSymbol.STYLE_SQUARE, 21, new SimpleLineSymbol().
setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new
Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(5, 6, new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_SQUARE, 18,new SimpleLineSymbol().
setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new
Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(4, 5, new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_SQUARE, 15,new SimpleLineSymbol().
setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new
Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(3, 4, new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_SQUARE, 12,new SimpleLineSymbol().
setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new
Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(2, 3, new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_SQUARE, 9,new SimpleLineSymbol().
setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new
Color([100,100,100])),new Color([0,0,0,0])));
observationRenderer.addBreak(0, 2, new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_SQUARE, 6,new SimpleLineSymbol().
setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new
Color([100,100,100])),new Color([0,0,0,0])));
var infos = [
{ minAge: 0, maxAge: 1, color: new Color([255,0,0])},
{ minAge: 1, maxAge: 24, color: new Color([49,154,255])},
{ minAge: 24, maxAge: Infinity, color: new Color([255,255,8])}
];
var ager = new TimeClassBreaksAger(infos, TimeClassBreaksAger.UNIT_
HOURS);
var renderer = new TemporalRenderer(observationRenderer, null, null,
ager);
featureLayer.setRenderer(renderer);
نماد ager موجود در کد بالا برای تعیین چگونگی تغییر نماد عارضه در نتیجه‌ی دوره‌های زمانی است.
آخرین ارائه دهنده که توضیح خواهیم داد، DotDensity است.
تصویر زیر نقشه‌ای را نشان می‌دهد که با استفاده از ارائه دهنده‌ی DotDensity نمادگذاری شده است.
این نوع ارائه دهنده یک تراکم نقطه‌ای را به تصویر می‌کشد و تراکم و چگالی نقاط را بر اساس فیلد مورد نظر نشان می‌دهد؛ مثلا بر اساس فیلد تراکم جمعیت، نقاط تراکم جمعیت را نشان می‌دهد. جاهایی که نقاط فشرده تر هستند تراکم بالای جمعیت را نشان می‌دهد.
نمونه کد زیر یک ارائه دهنده‌ی DotDensity را بر اساس فیلد pop ایجاد می‌کند؛ که هر نقطه برای نمایش 1000 نفر و اندازه‌ی هر نقطه 2 پیکسل می‌باشد.
var dotDensityRenderer = new DotDensityRenderer({
fields: [{
name: “pop”,
color: new Color([52, 114, 53])
}],
dotValue: 1000,
dotSize: 2
});
layer.setRenderer(dotDensityRenderer);
تمرین و کار با FeatureLayer
در این تمرین یک شی FeatureLayer ایجاد و یک عبارت تعریف روی لایه با استفاده از این شی ایجاد می‌کنیم. سپس روی عوارضی که با این عبارت تعریف منطبق هستند، گرافیک ترسیم می‌کنیم.
برای این تمرین مراحل زیر را دنبال کنید:
1- Sandbox را در لینک http://developers.arcgis.com/en/ javascript/sandbox/sandbox.html باز کنید.
2- محتویات تگ <script> را پاک کنید.
3- درون تگ <script> متغیر سراسری map را تعریف کنید.
<script>
var map;
</script>
4- از تابع require برای تعریف منابع مورد استفاده‌ی اپلیکیشن استفاده می‌کنیم.
<script type=”text/javascript” language=”Javascript”>
var map;
require([“esri/map”, “esri/layers/FeatureLayer”, “esri/
symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/renderers/SimpleRenderer”,
“esri/InfoTemplate”, “esri/graphic”, “dojo/on”,
“dojo/_base/Color”, “dojo/domReady!”],
function(Map,FeatureLayer, SimpleFillSymbol,
SimpleLineSymbol, SimpleRenderer, InfoTemplate, Graphic,
on, Color) {
});
</script>
5- در مرورگر به لینک http://sampleserver1.arcgisonline. com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/ MapServer/5 بروید. در این تمرین از لایه‌ی states که شامل ایالت‌هایی با میانگین سنی بالای 36 سال است، استفاده می‌کنیم. این ایالت‌ها در قالب گرافیک بر روی نقشه نمایش داده می‌شوند و هنگامی که کاربر با ماوس بر روی عارضه ی گرافیکی قرار می‌گیرد، پنجره‌ی اطلاعاتی شامل نام ایالت، میانگین سنی، میانگین سنی مردان و میانگین سنی زنان آن ایالت نمایش داده میشود. فیلدهای مورد استفاده در این لایه شامل STATE_NAME, MED_AGE, MED_AGE_M و MED_AGE_F هستند.
6- شی map را ایجاد می‌کنیم.
<script type=”text/javascript” language=”Javascript”>
var map;
require([“esri/map”, “esri/layers/FeatureLayer”, “esri/
symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/renderers/
SimpleRenderer”, “esri/InfoTemplate”, “esri/graphic”, “dojo/on”,
“dojo/_base/Color”, “dojo/domReady!”],
function(Map,FeatureLayer, SimpleFillSymbol,
SimpleLineSymbol, SimpleRenderer, InfoTemplate,
Graphic, on, Color) {
map = new Map(“mapDiv”, {
basemap: “streets”,
center: [-96.095,39.726], // long, lat
zoom: 4,
sliderStyle: “small”
});
});
</script>
7- هنگام بارگذاری نقشه، رویدادی اضافه می‌کنیم که در زمان بارگذاری نقشه، همهی گرافیک‌ها و پنجره‌ی اطلاعاتی حاصل از اجرای قبلی اپلیکیشن پاک می‌شوند.
map = new Map(“map”, {
basemap: “streets”,
center: [-96.095,39.726], // long, lat
zoom: 4,
sliderStyle: “small”
});
map.on(“load”, function() {
map.graphics.on(“mouse-out”, function(evt) {
map.graphics.clear();
map.infoWindow.hide();
});
});
8- یک شی FeatureLayer برای اشاره به لایه‌ی states ایجاد کنید. از مد SNAPSHOT برای برگرداندن عوارض استفاده می‌کنیم. فیلدهای خروجی و یک عبارت تعریف تعیین می‌کنیم. برای این اهداف کد زیر را اضافه کنید:
map.on(“load”, function() {
map.graphics.on(“mouse-out”, function(evt) {
map.graphics.clear();
map.infoWindow.hide();
});
});
var olderStates = new FeatureLayer(“http://sampleserver1.
arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_
USA/MapServer/5″, {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: [“STATE_NAME”, “MED_AGE”, “MED_AGE_M”, “MED_AGE_F”]
});
olderStates.setDefinitionExpression(“MED_AGE > 36″);
از کلمهی کلیدی new برای تعریف یک نمونه‌ی جدید از FeatureLayer استفاده کردیم که به لایه‌ی states اشاره می‌کند. در هنگام ایجاد نمونه از ویژگی‌های mode و outFields استفاده کردیم. از آن جا که لایه‌ی states عوارض نسبتاً کمی دارد از مد نمایشی snapshot استفاده می‌کنیم. این مد تمام عوارض لایه‌ای که به نقشه اضافه شده است را بازیابی می‌کند؛ بنابراین برای عوارض بیشتر از لایه، درخواستی به سرور نمی فرستد. از ویژگی outFields برای برگرداندن آرایه‌ای از فیلدها استفاده کردیم که این فیلدها را در پنجره‌ی اطلاعاتی نمایش خواهیم داد.
سرانجام عبارت تعریفی را تنظیم می‌کنیم.” ایالاتی که میانگین سنی ساکنان آن ایالت بیشتر از 36 سال است “.
9- به ارائه دهنده یک نماد اعمال می‌کنیم. ارائه دهنده بر روی عوارض منطبق شده با عبارت تعریفی اجرا میشود و FeatureLayer را به نقشه اضافه می‌کنیم.
var olderStates = new FeatureLayer(“http://sampleserver1.
arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_
USA/MapServer/5”, {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: [“STATE_NAME”, “MED_AGE”, “MED_AGE_M”, “MED_AGE_F”]
});
olderStates.setDefinitionExpression(“MED_AGE > 36”);
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_
SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new
Color([255,255,255,0.35]), 1),new Color([125,125,125,0.35]));
olderStates.setRenderer(new
SimpleRenderer(symbol));
map.addLayer(olderStates);
10- یک شی InfoTemplate ایجاد و خطوط کد زیر را درست در زیر خطوط کدی که در مرحله‌ی 9 درج کردیم، اضافه می‌کنیم. توجه داشته باشید که برای فیلدهایی که درون پنجره‌ی اطلاعاتی قرار می‌گیرند یک علامت $ قبل از نام فیلد می‌آوریم و نام فیلد درون کروشه‌ی باز و بسته قرار می‌گیرد.
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle(“${STATE_NAME}”);
infoTemplate.setContent(“<b>Median Age: </b>${MED_AGE_M}<br/>”
+ “<b>Median Age – Male: </b>${MED_AGE_M}<br/>”
+ “<b>Median Age – Female: </b>${MED_AGE_F}”);
map.infoWindow.resize(245,125);
11- خطوط کد زیر برای ایجاد گرافیک است. هنگامی که ماوس بر روی عارضه می‌رود این گرافیک به عارضه اعمال میشود.
var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_
SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), new Color([125,125,125,0.35])));
12- در آخرین مرحله، گرافیک و پنجره‌ی اطلاعاتی را نمایش می‌دهیم. هر بار که کاربر روی عارضه‌ی منطبق شده با عبارت تعریفی قرار می‌گیرد گرافیک اعمال میشود و پنجره‌ی اطلاعاتی مربوط به آن عارضه نمایش داده میشود. خطوط کد زیر را درست در زیر خطوط کد مرحله‌ی 11 قرار دهید. از متد on() برای نوشتن رخداد حرکت ماوس (mouse over) و فرستادن این رخداد به تابع استفاده می‌کنیم. این تابع هر بار که رخداد حرکت ماوس رخ می‌دهد، به این رخداد پاسخ می‌دهد. هر بار که رخداد mouse-over روی می‌دهد؛ تابع، همهی گرافیک‌های موجود در شی لایه‌ی گرافیکی را پاک می‌کند و پنجره‌ی اطلاعاتی مربوط به عارضه‌ی جاری (عارضه‌ای که ماوس بر روی آن قرار دارد) را ایجاد و یک نماد جدید برای عارضه‌ی جاری ایجاد می‌کند. این نماد به شی لایه‌ی گرافیکی اضافه میشود. در نهایت شی InfoWindow نمایش داده میشود. پس خطوط کد زیر را اضافه کنید:
olderStates.on(“mouse-over”, function(evt) {
map.graphics.clear();
evt.graphic.setInfoTemplate(infoTemplate);
var content = evt.graphic.getContent();
map.infoWindow.setContent(content);
var title = evt.graphic.getTitle();
map.infoWindow.setTitle(title);
var highlightGraphic = new Graphic(evt.graphic.
geometry,highlightSymbol);
map.graphics.add(highlightGraphic);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.
screenPoint));
});
کد به صورت کامل در فایل featurelayer.html در پوشه‌ی موجود در DVD ضمیمه ی کتاب وجود دارد.
پس از زدن دکمه‌ی run خروجی را مطابق تصویر زیر خواهید دید. ابتدا ایالات با میانگین سنی بالاتر از 36 سال به صورت خاکستری روشن در آمده اند. سپس با حرکت ماوس بر روی این ایالات پنجره‌ی اطلاعاتی مربوطه نمایش داده میشود.
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک
بدون دیدگاه