یک برنامه پیشرفته موبایل GIS-موسسه چشم انداز هزاره سوم ملل-آموزش کاربردی GIS و RS
در این بخش اپلیکیشنی با ابزارهای معروف و رایج میسازیم.
مطالب تحت پوشش این فصل:
1- اضافه کردن ابزارهای رایج
2- پاپآپهای عارضه
3- اضافه کردن راهنمای نقشه
4- پیداکردن عوارض
5- جستجوی آدرس
تصویر زیر انواع لایه در Arc Gis را نشان میدهد.
در این بخش روی لایههای feature متمرکز میشویم.
اضافه کردن ابزارهای رایج
در این بخش مهارتهایمان را با اضافه کردن ابزارهای معروف موبایل گسترش میدهیم. هر یک از نمونه کدها یک کد مبنا دارند.
Esri صدها نمونه از Arc Gis Javascript فراهم کرده است که منبع فوق العادهای برای توسعه دهندگان وب GIS است. مجموعه کاملی از این نمونهها را در لینک زیر ببینید:
https://developers.arcgis.com/javascript/jssamples/
کد کامل مربوط به اپلیکیشن این فصل در فایل MobileMapBase2.html موجود است.
پاپآپهای عارضه
لایههایی که روی نقشه قرار میگیرند و نقشه را پوشش میدهند، عوارض جغرافیایی هستند و غالباً به صورت نقطه، خط و پولیگون نمایش داده میشوند.
Esri اطلاعات عارضه انتخابی کاربر را در قالب یک پنجره پاپآپ نمایش میدهد. پاپآپ، پنجرهای با ابعاد کوچک است و برای نمایش فیلدهای یک عارضه، اطلاعات و نمودارها استفاده میشود. زمانیکه لایهها در Arc Gis به صورت یک سرویس نقشهای منتشر میشوند تا در یک اپلیکیشن موبایل استفاده شوند، باید دقت کنید اندازه هر سمبلی که برای هر لایه در نظر گرفته اید به اندازهای بزرگ باشد که با انگشت قابل انتخاب باشد. اندازه یک نقطه و یا پهنای یک خط نباید آنقدر کوچک باشد که برای انتخاب کاربر سخت باشد. معمولاً برای عارضههای نقطهای از قطر بالای 18 پیکسل برای نمایش سمبل استفاده میشود. و اندازه پهنای سمبل خط بیشتر از 3 پیکسل است. اگر از سرویس feature استفاده میکنید و سمبلها به اندازه کافی بزرگ نیستند تا با انگشت انتخاب شوند، بهتر است به جای استفاده از سمبلهای سرویس feature از Rendererها استفاده کنید.
در لینک زیر اطلاعات بیشتری در مورد Rendererها میبینید:
https://developers.arcgis.com/javascript/jshelp/ inside_renderers.html
در کد نمونهای که در ادامه میبینید از ویجت Dojo استفاده کردیم. از دو ویجت متفاوت دیگر نیز استفاده میکنیم.
1- ویجت PopupMobile: یک پنجره پاپآپ ایجاد میکند.
2- ویجت PopupTemplate: محتویات پنجره پاپآپ را تعیین میکند.
ویجت PopupMobile دو فایل CSS دارد که باید به این دو فایل در برنامه ارجاع داد.
<link rel=”stylesheet” type=’text/css’ href=’https://js.arcgis.com/3.11/esri/dijit/css/Popup.css’/>
<link rel=”stylesheet” type=’text/css’ href=’https://js.arcgis.com/3.11/esri/dijit/css/PopupMobile.css’/>
و برای استفاده از ویجتها و ماژولهای این ویجتها باید با تابع require آنها را اضافه کرد. پس کد زیر را هم نیاز داریم.
require([
“esri/map”, “esri/layers/FeatureLayer”, “esri/symbols/SimpleFillSymbol”, “esri/symbols/SimpleLineSymbol”,
“esri/dijit/PopupMobile”, “esri/dijit/PopupTemplate”, “esri/Color”,
“dojo/on”, “dojo/domReady!”],
function(
Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
PopupMobile, PopupTemplate, Color,
on
) {
دقت داشته باشید که علاوه بر ویجتهای PopupMobile و PopupTemplate ویجتهای SimpleFillSymbol, SimpleLineSymbol و color را هم اضافه کردیم. در ادامه میبینید که ویجتهای مذکور برای ایجاد شی PopupMobile ضروری اند.
لایه عارضه marathon یک لایهی پولیگونی است. وقتی کاربر یک عارضه پولیگونی را با انگشت ضربه میزند و انتخاب میکند، خط دور عارضه و هم چنین رنگ زمینه عارضه را به صورت روشن و انتخاب شده در میآوریم. برای این کار یک شی PopupMobile برای عارضه انتخاب شده، ایجاد میکنیم. پس کد زیر را لازم داریم:
var popup = new esri.dijit.PopupMobile({fillSymbol: new esri.symbol.
SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.
symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new
esri.Color([255,0,0]), 2), new esri.Color([255,255,0,0.25]))}, dojo.
create(“div”));
با SimpleLineSymbol خط دور عارضه انتخابی با رنگ قرمز (255, 0, 0)و با SimpleFillSymbol رنگ زمینه عارضه انتخابی با رنگ زرد(255, 255, 0) تنظیم میشود. سپس گزینه ی infoWindow نقشه باید با ویجت PopupMobile تنظیم می شود. پس کد زیر را هم نیاز داریم:
map = new Map(“map”, {center: [-118, 34.5], zoom: 7,
basemap: “streets”, infoWindow: popup});
همانطور که قبلاً هم ذکر کردیم، PopupTemplate محتویات پنجره PopupMobile را تنظیم میکند. PopupTemplateبرای نمایش محتویات ویژهای مانند اطلاعات فیلدهای عارضه، تصویر و نمودارها به کار میرود. فیلدهای یک عارضه همان مشخصات عارضه هستند. در کد زیر با استفاده از PopupTemplate یک عنوان، فیلد STATE_NAME و فیلد Percent_Fi را نمایش میدهیم.
var template = new esri.dijit.PopupTemplate({
title: “Boston Marathon 2013”,
description: “{STATE_NAME}: {Percent_Fi} of starters finished”
});
به نحوه نوشتن کد دقت کنید. نام هر فیلد را در یک{}قرار دادیم.
وقتی که لایههای Arc Gis را به صورت یک سرویس نقشهای در Arc Gis Server منتشر میکنیم، استفاده از سرویس REST بسیار مفید است. لینک زیر را در نوار آدرس مرورگر خود بنویسید و وارد لینک شوید.
https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0
وقتی وارد لینک شدید در پنجره ظاهر شده همه اطلاعات مربوط به سرویس REST را میبینید. این اطلاعات شامل نوع لایه، نام فیلدها، شماره لایه و … است. هر لایه یک شماره یا ID منحصر به فرد دارد که با صفر شروع میشود.
یک راه دیگر برای دیدن سرویس REST وجود دارد. وارد محیط Arc Gis Server manager شوید و روی نام سرویس خود که درArc Gis Server منتشر کردهاید، کلیک کنید سپس در سمت چپ پنجره روی Capabilities کلیک کنید. سپس بر روی لینک REST URL کلیک کنید. وارد سرویس REST میشوید.
تصویر زیر سرویس REST لایه Boston_Marathon را نشان میدهد:
در نهایت باید گزینه infoTemplate را با شیPopupTemplate تنظیم کنیم.
var marathon = new FeatureLayer(“https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0”,
{
mode: FeatureLayer.MODE_ONDEMAND,
outFields:[“*”],
infoTemplate: template
});
کد کامل برنامه در فایل MobileMapPopUp.html قرار دارد.
در تصویر زیر بعد از انتخاب عارضه مورد نظر، با استفاده از PopupMobile یک پاپآپ کوچک دریافت میکنید که با زدن روی فلش سفید رنگ موجود در دایره، یک صفحه جدید شامل توضیحات مربوط به عارضه انتخابی باز میشود.
میخواهیم گام بلندتری از این مثال برداریم. PopupTemplate انعطاف زیادی دارد مثلاً میتوان با استفاده از PopupTemplate به MobilePopUp نمودار اضافه کرد. تصویر زیر را ببینید:
در فایل MobilePopUpChart.htm کد مربوط به تصویر بالا قرار دارد.
اضافه کردن راهنمای نقشه
کاربر میتواند یک عارضه را با ضربه انگشت انتخاب کند و توضیحات مربوط به عارضه را در یک پاپآپ ببیند. این ویژگی به خوبی تفاوت بین نقشههای واکنشی و لایههای Feature را نشان میدهد. اضافه کردن راهنمای نقشه گزینه مناسبی است. برای نوشتن کد این برنامه از فایل MobileMapBase2.html استفاده کنید.
تصویر زیر خروجی برنامه موجود در فایل مذکور را نشان میدهد:
به سبک تصویر دقت کنید. صفحه به دو بخش نقشه و راهنمای نقشه تقسیم شده است. پس باید کد برنامه را که شامل این سبک است، به روزرسانی کنیم.
<style>
html, body, #map {
height: 100%;
width: 98%;
margin: 0;
padding: 0;
}
#rightPane {
width: 20%;
height: 100%;
background: White;
position: absolute;
top:1px;
right:1px;
z-index: 99;
overflow-x: hidden;
overflow-y: auto;
}
</style>
هم چنین باید دو کتابخانه جدید BorderContainer و ContentPane را به تابع require اضافه کنیم که نگاهدارندهی نقشه و راهنمای نقشه هستند.
require([“esri/map”, “esri/layers/FeatureLayer”,
“dijit/layout/BorderContainer”, “dijit/layout/ContentPane”,
“esri/dijit/Legend”,
“dojo/on”, “dojo/domReady!”],
function(
Map, FeatureLayer,
BorderContainer, ContentPane, Legend,
on
) {
BorderContainer یک ویجت نگاهدارنده است که راه آسانی برای طرح بندی عناصر صفحه است. ویجت ContentPane محتویات صفحات وبی که مدام در حال تغییر و تحول است را کنترل میکند. در برنامه مربوط به این سبک تگ <body> را به صورت زیر بنویسید:
<body>
<!– body content –>
<div id=”content”
data-dojo-type=”dijit/layout/BorderContainer”
data-dojo-props=”design:’headline’, gutters:true”
style=”width: 100%; height: 100%; margin: 0;”>
<!– Right side legend panel –>
<div id=”rightPane”
data-dojo-type=”dijit/layout/ContentPane”
data-dojo-props=”region:’right'”>
<div data-dojo-type=”dijit/layout/ContentPane”
data-dojo-props=”title:’Pane 2′”>
<div id=”legendDiv”></div>
</div>
</div>
<!– map –>
<div id=”map”
data-dojo-type=”dijit/layout/ContentPane”
data-dojo-props=”region:’center'”
style=”overflow:hidden;”>
</div>
</div>
</body>
در فایل MobileMapLegend1.htmlکد راهنمای نقشه فاز1 را میبینید.
حال باید ویجت راهنمای نقشه را به سمت راست اضافه کنیم. پس در تابع init() قطعه کد زیر را بگذارید:
//When layer loaded add legend to right pane
map.on(“layers-add-result”, function (evt) {
var layerInfo = dojo.map(evt.layers, function (layer,
index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new esri.dijit.Legend({
map: map,
layerInfos: layerInfo
}, “legendDiv”);
legendDijit.startup();
}
});
هنگامی که یک لایهی feature بارگذاری میشود و روی نقشه هم پوشانی میشود ( در این مثال فقط یک لایه feature وجود دارد)، layerinfo با لایه نقشه و لایه feature مقداردهی میشود. لایه feature بر اساس نوع لایه منتشر میشود، مثلاً یک نوع نقطهای میتواند سمبل بندیهای متفاوتی داشته باشد. بدین معنی که هر فیلد لایه نقطهای میتواند سمبل متفاوتی از دیگر فیلدها داشته باشد.
پس ما یک ویجت راهنمای نقشه به layerinfo میفرستیم و سپس آن را در تگ Div نمایش میدهیم. در نهایت ویجت راهنمای نقشه را با legendDijit. startup(); ایجاد میکنیم. ویجت راهنمای نقشه، سمبل همهی لایههای feature موجود در شیmap را در سمت راست نمایش میدهد. در فایل MobileMapLegend2.html کد راهنمای نقشه فاز 2 قرار دارد.
برگرفته از کتاب تولید وب اپلیکیشن های موبایل با ArcGIS
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک