یکپارچگی با ArcGIS Online

یکپارچگی با ArcGIS Online-موسسه چشم انداز-آموزش کاربردی GIS و RS

ArcGIS Online وب سایتی برای کار با نقشه‌ها و دیگر اطلاعات جغرافیایی است. در این سایت برنامه‌هایی برای ایجاد و به اشتراک گذاری نقشه‌ها وجود دارد. نقشه‌های مبنا، داده‌ها، برنامه‌ها و ابزارهای سودمند قابل استفاده‌ای در این سایت وجود دارند. می‌توانید محتویات ArcGIS Online را که نقشه، داده و دیگر ابزارها است، با استفاده از ArcGIS Server API for JavaScript درون برنامه خود ضمیمه کنید. در این بخش چگونگی اضافه کردن نقشه‌های ArcGIS Online به اپلیکیشن را یاد می‌گیرید.

مطالب تحت پوشش این فصل عبارتند از:

1- اضافه کردن نقشه‌های ArcGIS Online به اپلیکیشن با استفاده از ID نقشه مبنا

2- اضافه کردن نقشه‌های ArcGIS Online به اپلیکیشن با استفاده از JSON

3- پرداختن به ArcGIS Online

اضافه کردن نقشه‌های ArcGIS Online به اپلیکیشن با استفاده از ID نقشه مبنا

ArcGIS Server API for JavaScript برای کار با نقشه‌های ArcGIS Online از دو متد استفاده می‌کند که در esri/arcgis/utils قرار دارند. متد createMap() یک نقشه‌ی ArcGIS Online را به اپلیکیشن اضافه می‌کند. هر نقشه‌ی ArcGIS Online یک ID منحصر بفرد دارد. اگر می‌خواهید در اپلیکیشن از نقشه‌های مبنای موجود در این سایت استفاده کنید، ID نقشه‌ی مبنا مهم است. برای به دست آوردن ID نقشه مورد نظرتان ابتدا به لینک www.arcgis.com/home/webmap بروید و نقشه‌ی مبنای مورد نظر خود را پیدا کنید و هنگامی که نقشه بارگذاری شد روی نقشه کلیک کنید. سپس در نوار آدرس ID نقشه را خواهید دید.

پس از تهیه‌ی ID نقشه‌ی مبنا باید متد getItem() را صدا بزنید و ID نقشه‌ی مبنا را به این متد بفرستید. متد getItem() یک شی dojo/Deferred برمی‌گرداند. شی Deferred خاص وظایف و کارهائی است که ممکن است بلافاصله اجرا و کامل نشوند. با استفاده از این شی، می‌توانید تابع بازخوردی موفقیت و تابع بازخوردی شکست تعریف کنید. پس از اجرای کامل متد getItem()، این توابع را می‌توانید استفاده کنید. این متد ممکن است بارگذاری نقشه را با موفقیت یا شکست انجام دهد. پس می‌توانیم خروجی متد getItem() را با توابع بازخوردی شکست و موفقیت بررسی کنیم. وقتی متد getItem() با موفقیت انجام شود و نقشه بارگذاری شود یک شی itemInfo به تابع بازخوردی موفقیت خواهد فرستاد.

کد زیر را ببینید:

var agoId = “fc160a96a98d4052ae191cc486961b61”;
var itemDeferred = arcgisUtils.getItem(agoId);
itemDeferred.addCallback(function(itemInfo) {
var mapDeferred = arcgisUtils.createMap(itemInfo, “map”, {
mapOptions: {
slider: true

},
geometryServiceURL: “https://sampleserver3.arcgisonline.com/ArcGIS/
rest/
services/Geometry/GeometryServer”
});
mapDeferred.addCallback(function(response) {
map = response.map;
map.on(“resize”, resizeMap);
});
mapDeferred.addErrback(function(error) {
console.log(“Map creation failed: ” , json.stringify(error));
});
itemDeferred.addErrback(function(error) {
console.log(“getItem failed: “, json.stringify(error));
});
}

این تابع را در دو نمونه‌ی مجزا پوشش خواهیم داد. خطوط کدی که به صورت پررنگ در کد بالا مشخص شده اند، برای بررسی اجرای موفق و یا ناموفق متد getItem نوشته شده اند. در اولین خط کد، یک متغیر با نام agoId ایجاد کردیم که ID نقشه‌ی مبنا را درون آن قرار دادیم. سپس متد getItem() را صدا زدیم و متغیر agoId را به این متد فرستادیم. این متد یک شی جدید dojo/Deferred ایجاد می‌کند. یک متغیر به نام itemDeferred ایجاد کردیم و مقدار شی dojo/Deferred را درون آن قرار دادیم. با استفاده از متغیر itemDeferred می‌توانیم توابع بازخوردی شکست و موفقیت را ایجاد کنیم. در صورت بروز خطا، تابع addErrback صدا زده می‌شود.

حال ببینیم که نقشه چطور ایجاد می‌شود. خطوط پررنگ در کد زیر نقشه را ایجاد می‌کنند.

var agoId = “fc160a96a98d4052ae191cc486961b61”;
var itemDeferred = arcgisUtils.getItem(agoId);
itemDeferred.addCallback(function(itemInfo) {
var mapDeferred = arcgisUtils.createMap(itemInfo, “map”, {
mapOptions: {
slider: true
},
geometryServiceURL: “https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer”
});
mapDeferred.addCallback(function(response) {
map = response.map;
map.on(“resize”, resizeMap);

});
mapDeferred.addErrback(function(error) {
console.log(“Map creation failed: ” , json.stringify(error));
});
itemDeferred.addErrback(function(error) {
console.log(“getItem failed: “, json.stringify(error));
});
}

متد createMap() یک نمونه از شی itemInfo را می‌گیرد. itemInfo از اجرای موفقیت آمیز متد getItem() به دست آمده است. متد createMap()نیز یک شی dojo/Deferred برمی‌گرداند. برای این متد نیز می‌توانید توابع بازخوردی شکست و موفقیت تعریف کنید. تابع بازخوردی موفقیت، شی response را می‌پذیرد. شی response شامل ویژگی map است که برای بازیابی نقشه استفاده می‌شود.

اضافه کردن نقشه‌های ArcGIS Online به اپلیکیشن با استفاده از JSON

به جای استفاده از ID نقشه مبنا می‌توان از شی JSON استفاده کرد تا یک نقشه‌ی مبنای وبی را به اپلیکیشن اضافه کرد. این شی در مواردی کاربرد دارد که برنامه به ArcGIS Online دسترسی ندارد. به کد زیر دقت کنید:

var webmap = {};
webmap.item = {
“title”:”Census Map of USA”,
“snippet”: “Detailed description of data”,
“extent”: [[-139.4916, 10.7191],[-52.392, 59.5199]]
};

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

webmap.itemData = {
“operationalLayers”: [{
“url”: ” https://sampleserver1.arcgisonline.com/ArcGIS/rest/
services/Demographics/ESRI_Census_USA/MapServer”,
“visibility”: true,
“opacity”: 0.75,
“title”: “US Census Map”,
“itemId”: “204d94c9b1374de9a21574c9efa31164”
}],
“baseMap”: {
“baseMapLayers”: [{
“opacity”: 1,
“visibility”: true,
“url”: “https://services.arcgisonline.com/ArcGIS/rest/services/
World_Terrain_Base/MapServer”
},{
“isReference”: true,
“opacity”: 1,
“visibility”: true,
“url”: “https://services.arcgisonline.com/ArcGIS/rest/services/
Reference/World_Reference_Overlay/MapServer”
}],
“title”: “World_Terrain_Base”
},
“version”: “1.1”
};

وقتی نقشه‌ی مبنا به همراه تمام لایه‌های اطلاعاتی تعریف شد، متد createMap() را برای ایجاد نقشه صدا بزنید.

var mapDeferred = arcgisUtils.createMap(webmap, “map”, {
mapOptions: {
slider: true
}
});

ایجاد اپلیکیشن با ArcGIS Online

در این تمرین نقشه‌های ArcGIS Online را به اپلیکیشن اضافه و ادغام می‌کنید. در زیر نقشه‌ی سوپرمارکت‌های قابل دسترس در ایالت متحده آمریکا را نشان می‌دهد.

نقاط سبز جمعیتی را نشان می‌دهد که در فاصله‌ی کمتر از یک مایلی یک سوپرمارکت هستند. نقاط قرمز جمعیتی را نشان می‌دهد که در فاصله‌ی بیشتر از یک مایلی یک سوپرمارکت هستند و در حدود 10 دقیقه رانندگی با یک سوپرمارکت فاصله دارند. فرض می‌کنیم که آن جمعیت به ماشین دسترسی دارند. نقاط خاکستری نشان‌دهنده‌ی کل جمعیت در منطقه است.

مراحل زیر را انجام دهید:

1- قبل از آنکه شروع به کدنویسی کنیم، بیائید در ArcGIS Online بگردیم و نقشه هایمان را پیدا کنیم و شناسه‌ی منحصربفرد هر نقشه را به‌دست آوریم. مرورگر را باز کنید و به سایت https://arcgis.com بروید.

2- مطابق تصویر زیر در جعبه‌ی متنی عبارت Supermarket را تایپ کنید.

3- چند نتیجه برگردانده می‌شود. می‌خواهیم از بین این نتایج، نقشه‌ی Supermarket Access Map را به اپلیکیشن اضافه کنیم.

4- بر روی Open که در زیر تصویر بندانگشتی نقشه قرار دارد، کلیک کنید.

5- این نقشه در نمایشگر ArcGIS Online ظاهر می‌شود. شماره‌ی نقشه در انتهای URL و با رنگ زرد مشخص شده را در جایی کپی کنید. این شماره، ID منحصربفرد نقشه است.

6- Sandbox موجود در لینک زیر را باز کنید:

https://developers.arcgis.com/en/ javascript/sandbox/sandbox.html

7- محتویات تگ <script> را پاک کنید:

8- منابعی که برای نوشتن این اپلیکیشن نیاز داریم را اضافه کنید:

<script>
require([
“dojo/parser”,
“dojo/ready”,
“dojo/dom”,
“esri/map”,
“esri/arcgis/utils”,
“esri/dijit/Scalebar”,
“dojo/domReady!”
], function(
parser,ready,dom,Map,arcgisUtils,Scalebar) {
});
</script>

9- در تابع require() یک متغیر جدید به نام agoId ایجاد کنید و ID نقشه را که کپی کردید درون این متغیر بگذارید:

<script>
require([
“dojo/parser”,
“dojo/ready”,
“dojo/dom”,
“esri/map”,
“esri/arcgis/utils”,
“esri/dijit/Scalebar”,
“dojo/domReady!”
], function(
parser,ready,dom,Map,arcgisUtils,Scalebar) { var agoId = “153c17de00914039bb28f6f6efe6d322”;
});
</script>

10- در اینجا با متدهای arcgisUtils. getItem() و arcgisUtils.createMap() سر و کار خواهیم داشت. هر دوی این متدها شی Dojo/Deferred را برمی‌گردانند. بهتر است شما با شی Dojo/Deferred بیشتر آشنا شوید. این شی مخصوص عملیاتی است که ممکن است فوری کامل نشوند. در این نوع کارها، توابع بازخوردی شکست و موفقیت را ایجاد می‌کنیم. این توابع پس از اجرای کامل عملیات اجرا می‌شوند. متد Deferred.addCallback() تابع بازخوردی موفقیت و متد Deferred.errCallback() تابع بازخوردی شکست را صدا می‌زند. در حالت اجرای موفقیت آمیز، شی itemInfo به تابع بازخوردی موفقیت فرستاده می‌شود. شی itemInfo برای اضافه کردن نقشه‌ی ArcGIS Online به اپلیکیشن استفاده می‌شود. کد زیر را اضافه کنید. توضیحات بیشتری در ادامه آمده است:

<script>
require([
“dojo/parser”,
“dojo/ready”,
“dojo/dom”,
“esri/map”,
“esri/arcgis/utils”,
“esri/dijit/Scalebar”,
“dojo/domReady!”
], function(
parser,ready,dom,Map,arcgisUtils,Scalebar) {
var agoId = “153c17de00914039bb28f6f6efe6d322”;
var itemDeferred = arcgisUtils.getItem(agoId);
itemDeferred.addCallback(function(itemInfo) {
var mapDeferred = arcgisUtils.createMap(itemInfo,
“mapDiv”, {
mapOptions: {
slider: true,
nav:true
} });
});
itemDeferred.addErrback(function(error) {
console.log(“getItem failed: “,
json.stringify(error));
});
});
</script>

در اولین خط کد بالا، تابع getItem() را صدا زدیم و متغیر agoId را به این تابع فرستادیم. این متغیر به نقشه‌ی Supermarket Access Map ارجاع می‌کند. تابع getItem() یک شی Dojo/Deferred برمی‌گرداند. این شی در متغیری به نام itemDeferred ذخیره می‌شود. فرض کنید که اجرای تابع getItem() موفقیت آمیز بوده است پس شی خروجی این تابع به تابع addCallback() فرستاده می‌شود. درون تابع addCallback() متد getMap() را صدا می‌زنیم. پارامترهای ورودی متد getMap() عبارتند از 1- شی itemInfo 2- ارجاعی به نگهدارنده‌ی نقشه (تگ <div>).

در این مثال پارامترهای نقشه، دکمه‌‌های پیمایش هستند. متد getMap() یک شی Dojo/Deferred دیگری می‌فرستد. این شی در متغیر mapDeferred قرار می‌گیرد.

11- شي­ای که به تابع mapDeferred.addCallback() فرستاده می‌شود، به صورت زیر است:

{
Map: <esri/Map>,
itemInfo: {
item: <Object>,
itemData: <Object>
}
}

12- کد زیر را اضافه کنید:

<script>
require([
“dojo/parser”,
“dojo/ready”,
“dojo/dom”,
“esri/map”,
“esri/arcgis/utils”,
“esri/dijit/Scalebar”,
“dojo/domReady!”
], function(
parser,ready,dom,Map,arcgisUtils,Scalebar) {
var agoId = “153c17de00914039bb28f6f6efe6d322”;
var itemDeferred = arcgisUtils.getItem(agoId);
itemDeferred.addCallback(function(itemInfo) {
var mapDeferred = arcgisUtils.createMap(itemInfo,
“mapDiv”, {
mapOptions: {
slider: true,
nav:true
}
});
mapDeferred.addCallback(function(response) {
map = response.map;
});
mapDeferred.addErrback(function(error) {
console.log(“Map creation failed: “, json.
stringify(error));
});
});
itemDeferred.addErrback(function(error) {
console.log(“getItem failed: “,
json.stringify(error));
});
});
</script>

تابع mapDeferred.addCallback نقشه را درون یک نگهدارنده قرار می‌دهد.

13- می‌توانید از فایل arcgisdotcom.html موجود در پوشه‌ی موجود در DVD ضمیمه ی کتاب برای صحت کدی که نوشته اید، استفاده کنید.

14- با زدن دکمه‌ی Run تصویر زیر را خواهید دید:

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

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

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