ویجت Guage-موسسه چشم انداز هزاره سوم ملل-آموزش کاربردی GIS و RS
این ویجت داده‌های عددی را از لایه‌هایی مانند FeatureLayer و لایه‌ی گرافیکی می‌گیرد و در یک رابط نمایشگر نشان می‌دهد. می‌توانید رنگ نمایشگر و فیلدی که حاوی داده‌های عددی است را تعیین کنید. هم چنین برچسب فیلد، مقدار ماکزیمم، عنوان و موارد دیگر نیز قابل تنظیم است.
به قطعه کد زیر دقت کنید:
require([
“esri/dijit/Gauge”, …
], function(Gauge, … ) {
var gaugeParams = {
“caption”: “Hurricane windspeed.”,
“color”: “#c0c”,
“dataField”: “WINDSPEED”,
“dataFormat”: “value”,
“dataLabelField”: “EVENTID”,
“layer”: fl, //fl previously defined as FeatureLayer
“maxDataValue”: 120,
“noFeatureLabel”: “No name”,
“title”: “Atlantic Hurricanes(2000)”,
“unitLabel”: “MPH”
};
var gauge = new Gauge(gaugeParams, “gaugeDiv”);
…
});
در کد بالا یک ویجت Gauge ایجاد می‌شود و تعدادی پارامتر مانند 1- Caption که مانند یک برچسب عمل می‌کند 2- فیلد داده 3- لایه 4- مقدار ماکزیمم و موارد دیگر برای اعمال تنظیمات به این ویجت ایجاد و مقداردهی می‌شوند.
ویجت Measurement
این ویجت سه ابزار را فراهم می‌کند که با توجه به مختصاتی که ماوس در آنجا قرار دارد، طول یک خط یا مساحت یک محدوده را اندازه گیری می‌کند.
با ویجت Measurement می‌توانید واحد اندازه گیری را بر اساس (مایل، متر، اینچ، سانتیمتر و…) تغییر دهید.
var measurement = new Measurement({
map: map
}, dom.byId(“measurementDiv”));
measurement.startup();
ویجت Popup
این ویجت برای نمایش اطلاعات توصیفی عوارض و گرافیک‌ها درون یک پنجره استفاده می‌شود. این ویجت در API نسخه ی 3.4 به بعد قرار دارد که در حال حاضر جایگزین پارامتر infoWindow برای نمایش اطلاعات توصیفی است. این ویجت قابلیت‌هایی مانند زوم و مشخص کردن عوارض، نمایش چندین انتخاب و دکمه‌ی بزرگ کردن پنجره‌ی اطلاعاتی را دارد. برای طرح بندی این پنجره می‌توانیم از کدهای CSS استفاده کنیم. در تصویر زیر اطلاعات توصیفی که در یک پنجره‌ی Popup قرار دارد را نشان می‌دهد.
در نسخه‌ی 4.3 API به بعد، قابلیت ارائه‌ی متن از راست به چپ (RTL) برای زبان‌های عربی و فارسی در این ویجت اضافه شده است. با استفاده از ویژگی dir می‌توانید جهت نمایش متن را به RTL و یا LTR تنظیم کنید. به طور پیش فرض مقدار این ویژگی LTR است.
//define custom popup options
var popupOptions = {
markerSymbol: new SimpleMarkerSymbol(“circle”, 32, null, new
Color([0, 0, 0, 0.25])),
marginLeft: “20”,
marginTop: “20”
};
//create a popup to replace the map’s info window
var popup = new Popup(popupOptions, dojo.create(“div”));
map = new Map(“map”, {
basemap: “topo”,
center: [-122.448, 37.788],
zoom: 17,
infoWindow: popup
});
در کد بالا شی popupOptions ایجاد شده و برای پنجره پاپ‌آپ، margin و symbol را تنظیم می‌کند. شی popupOptions به شی Popup فرستاده می‌شود و در نهایت شی Popup به پارامتر infoWindow فرستاده می‌شود و شی Popup همانند یک info window استفاده می‌شود.
ویجت Legend
این ویجت یک برچسب و یک سمبل برای همه یا تعدادی از لایه‌های موجود در نقشه نشان می‌دهد. این ویجت لایه‌ی سرویس Dynamic، لایه‌ی سرویس نقشه Tiled و FeatureLayer را پشتیبانی می‌کند.
وقتی نمونه‌ای از ویجت Legend را ایجاد می‌کنید، می‌توانید برای تعیین محتویات و ویژگی‌های نمایشی این ویجت از پارامترهایی استفاده کنید. پارامتر arrangement برای تعیین موقعیت عنصر راهنمای نقشه استفاده می‌شود که با مقدار left و یا right تنظیم می‌شود. ویژگی autoUpdate با مقدار true یا false تنظیم می‌شود که اگر با مقدار true تنظیم شود، پارامترهای راهنمای نقشه متناظر با تغییرات مقیاس نقشه و یا حذف لایه و یا اضافه کردن لایه‌ی جدید به نقشه، به روزرسانی می‌شوند. پارامتر layerInfos زیرمجموعه‌ای از لایه‌ها را برای استفاده در راهنمای نقشه تعیین می‌کند. در نهایت شما باید متد startup() را صدا بزنید تا راهنمای نقشه‌ای که جدیداً ایجاد شده، نمایش داده شود.
var layerInfo = dojo.map(results, function(layer,index){
return {
layer: layer.layer,
title: layer.layer.name
};
});
if(layerInfo.length > 0){
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
},”legendDiv”);
legendDijit.startup();
}
کد بالا یک ویجت راهنمای نقشه ایجاد می‌کند و ویجت را به اپلیکیشن اضافه می‌کند.
ویجت OverviewMap
این ویجت برای نمایش extent فعلی نقشه‌ی اصلی استفاده می‌شود. هر بار که محدوده‌ی قابل نمایش نقشه تغییر می‌کند، این ویجت نیز به روزرسانی می‌شود. extent نقشه‌ی اصلی در نتیجه‌ی یک مستطیلی که ترسیم می‌شود، نمایش داده می‌شود. این مستطیل extent را دراگ می‌کنیم تا extent نقشه در محدوده‌ی این مستطیل نمایش داده شود.
محدوده‌ی نمایشی فعلی نقشه می‌تواند در قالب یک مستطیل کوچک در گوشه‌ای از نقشه‌ی اصلی نمایش داده شود. این مستطیل را می‌توانید در یک تگ <div> دیگر جدای از تگ <div> نقشه قرار دهید. در تصویر زیر مستطیل مورد بحث را به رنگ خاکستری می‌بینید:
ویجت OverviewMap پارامترهایی برای تعیین محل شی OverviewMap در نقشه‌ی اصلی، نقشه مبنای مورد استفاده توسط این ویجت، رنگ پس زمینه‌ی مستطیل، نمایش دکمه‌ی ماکزیمم و نمایش اولیه‌ی شی OverviewMap دارد. در کد زیر یک شی از ویجت OverviewMap ایجاد می‌شود.
var overviewMapDijit = new OverviewMap({map:map, visible:true});
overviewMapDijit.startup();
ویجت scalebar
این ویجت یک میله مقیاس به نقشه اضافه می‌کند. واحدهای میله مقیاس می‌تواند هم با مقدار متریک و هم با مقدار انگلیسی باشد. در نسخه‌ی 4.3 API به بعد با تنظیم ویژگی scalebarUnits به dual به طور همزمان مقادیر متریک و انگلیسی در میله مقیاس نمایش داده می‌شوند. پارامتر attachTo برای تعیین محل میله مقیاس استفاده می‌شود. میله مقیاس به طور پیش فرض در گوشه‌ی پایین سمت چپ نقشه قرار می‌گیرد.
در قطعه کد زیر یک شی ویجت sclaebar ایجاد می‌شود و واحد میله مقیاس را انگلیسی تعیین می‌کند.
var scalebar = new esri.dijit.Scalebar({map:map,
scalebarUnit:’english’});
ویجت directions
این ویجت جهت محاسبه‌ی جهت بین دو یا چند موقعیت ورودی استفاده می‌شود. نتایج جهت‌ها مطابق تصویر زیر نمایش داده می‌شوند. قدم به قدم دستورالعمل‌ها و توضیحاتی در مورد نتیجه‌ی جهت‌ها نمایش داده می‌شود. اگر یک نقشه با ویجت ادغام شده است، مسیر جهت‌ها و ایستگاه‌ها بر روی نقشه نمایش داده می‌شوند. اگر بر روی ایستگاه کلیک کنید، توضیحاتی در مورد ایستگاه در یک پنجره‌ی پاپ‌آپ ظاهر می‌شود. می‌توانید ایستگاه را انتخاب کرده و در مکان دیگری دراگ کنید و بیاندازید تا مسیر مجدداً محاسبه شود.
در قطعه کد زیر یک شی Directions ایجاد می‌شود.
var directions = new Directions({
map: map
},”dir”);
directions.startup();
ویجیت HistogramTimeSlider
این دیجیت یک نمودار هیستوگرام ارائه می‌دهد. این دیجیت برای نمایش لایه‌هایی است که حاوی داده‌های زمانی هستند. با استفاده از رابط کاربری، کاربران می‌توانند با ویجت TimeSlider، نمایش داده را کنترل کنند.
به قطعه کد زیر دقت کنید:
require([“esri/dijit/HistogramTimeSlider”, … ],
function(HistogramTimeSlider, … ){
var slider = new HistogramTimeSlider({
dateFormat: “DateFormat(selector: ‘date’, fullYear: true)”,
layers : [ layer ],
mode: “show_all”,
timeInterval: “esriTimeUnitsYears”
},
dojo.byId(“histogram”));
map.setTimeSlider(slider);
});
در کد بالا یک شی HistogramTimeSlider ایجاد و سپس با نقشه ادغام می‌شود.
ویجت HomeButton
این ویجت یک دکمه بر روی نقشه قرار می‌دهد. با کلیک این دکمه، نقشه با extent اولیه‌ی خود نمایش داده می‌شود.
require([
“esri/map”,
“esri/dijit/HomeButton”,
“dojo/domReady!”
], function(
Map, HomeButton
) {
var map = new Map(“map”, {
center: [-56.049, 38.485],
zoom: 3,
basemap: “streets”
});
var home = new HomeButton({
map: map
}, “HomeButton”);
home.startup();
});
در قطعه کد بالا یک ویجت HomeButton ایجاد می‌شود.
ویجت LocateButton
این ویجت می‌تواند برای پیدا کردن و زوم کردن بر روی موقعیت فعلی کاربر بر روی نقشه استفاده می‌شود. این ویجت از Geolocation API برای پیدا کردن موقعیت فعلی کاربر استفاده می‌کند. وقتی موقعیت پیدا شد، نقشه بر روی آن موقعیت زوم می‌شود.
موارد زیر با این ویجت قابل تعیین هستند:
1- Geolocation API موجود در HTML5 از گزینه‌های maximumAge و timeout برای پیدا کردن یک موقعیت استفاده می‌کند. ویژگی timeout حداکثر زمان مورد نیاز برای تعیین موقعیت فعلی کاربر را نشان می‌دهد.
2- نمادی سفارشی برای تعیین موقعیت فعلی کاربر بر روی نقشه تنظیم می‌کند.
3- هنگامی که موقعیت فعلی کاربر شناسایی شد، سطح بزرگ نمائی نقشه برای مشاهده‌ی موقعیت فعلی کاربر، قابل تعیین است.
در قطعه کد زیر یک نمونه ویجت LocateButton ایجاد می‌کند و به نقشه اضافه می‌کند.
geoLocate = new LocateButton({
map: map,
highlightLocation: false
}, “LocateButton”);
geoLocate.startup();
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک
بدون دیدگاه