The ArcGIS API for JavaScript-موسسه چشم انداز-آموزش کاربردی GIS و RS
محبوبیت روزافزون JavaScript باعث شد تا تیم توسعه دهنده شرکت Esri روی Arc Gis JavaScript API متمرکز شوند و مجموعه باارزشی از کلاس‌ها را در قالب ماژول‌ها عرضه کردند. همه اسناد مرتبط باArcGIS JavaScript API مانند مثال‌ها، مطالب آموزشی و … در لینک زیر قرار دارند.
https://developers.arcgis.com/javascript/
توسعه دهندگان Arc Gis شرکتEsri ، ساخت فشرده (compact build) جدیدی منتشر کرده‌اند که کوچکتر از ساخت استاندارد است و برای توسعه دهندگان موبایل و کسانی که مایلند از کتابخانه‌های جاوااسکریپتی دیگری به جز Dojo استفاده کنند، گزینه‌ی تمام عیاری است.
توسعه دهندگان با استفاده از این ساخت، برنامه‌های خود را سفارشی می‌کنند و اندازه کتابخانه‌های مورد استفاده شان را به طور قابل ملاحظه‌ای کاهش می‌دهند. برنامه‌های ایجاد شده با این ساخت، فایل واحدی را درست می‌کنند تا میزبان محلی یک دستگاه باشند. برای اطلاعات بیشتر لینک https://jso.arcgis.com/ را ببینید.
برای دیدن نمونه کدها و ارجاع به نمونه‌های compact build لینک زیر را ببینید:
https://js.arcgis.com/3.11compact
ساخت فشرده به دو دلیل کوچکتر از ساخت استاندارد است:
- ویجت‌ها، Dojo و Dijitها به طور خودکار بارگذاری نمی‌شوند. تعدادی از ویجت‌ها در اپلیکیشن وب استاندارد، لازم و در اپلیکیشن‌های موبایل غیر ضروری اند. API compact build فقط اشیاء مورد نیاز اپلیکیشن موبایل را بارگذاری می‌کند. به عنوان مثال اگر ویجت تقویم را نمی‌خواهید این ویجت به اپلیکیشن بارگذاری نمی‌شود.
- فقط 32 ماژول از 80 ماژول استاندارد بارگذاری می‌شوند. توسعه دهندگان موبایل جهت استفاده از ماژول‌های مورد نظرشان باید از تابع Require استفاده کنند.
استفاده از compact build به سادگی اضافه کردن کلمه compact در آخر ارجاع به API است. یک نمونه در ادامه آمده است. استفاده از API در اپلیکیشن‌های موبایل هیچ تفاوتی با تکنیک‌هایی که برای ایجاد اپلیکیشن‌های وب یاد گرفتید ندارد. بنابراین فقط کافی است تکنیک‌های بیشتری برای رابط کاربری در اپلیکیشن‌های موبایل یاد بگیرید. تعدادی فریم ورک جاوااسکریپتی خاص موبایل مانند dojox و jQuery برای ایجاد رابط کاربری اپلیکیشن موبایل وجود دارند. فریم ورک‌های موبایل محتویات برنامه را با سبک خاصی نشان می‌دهند تا برنامه شبیه یک اپلیکیشن موبایل ظاهر شود. مرورگر safari شبیه یک اپلیکیشن iPhone است و مرورگرهای اندروید شبیه اپلیکیشن اندروید هستند.
برای دسترسی به API ساخت فشرده دو خط کد زیر را به برنامه خود اضافه کنید:
<link rel=”stylesheet” href=”https://js.arcgis.com/3.11/esri/css/esri. css”>
<script src=”https://js.arcgis.com/3.11compact/”></script>
خط1 در کد بالا ارجاع به یک فایل CSS است که شامل طرح بندی ویجت‌های مختلف و نقشه است. خط کد 2 برای بارگذاری یک ساخت فشرده است.
ArcGIS JavaScript API بسیاری از زبان‌های برنامه نویسی را پشتیبانی می‌کند. لینک زیر را برای توضیحات بیشتر مطالعه کنید:
https://developers.arcgis.com/javascript/jshelp/localization.html
حالا زمان نوشتن کد رسیده است.
IDE موردنظرتان یا ++Notepad را باز کنید.
حال با یک سبک HTML شروع می‌کنیم و ارجاعی به CSS ، Viewport و Compact build خواهیم داشت. خطوط کد زیر را به ++Notepad اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
<meta name=”viewport” content=”initial-scale=1, maximumscale=1,user-scalable=no”/>
<title>Simple Map</title>
<link rel=”stylesheet” href=”https://js.arcgis.com/3.11/esri/css/esri.css”>
<script src=”https://js.arcgis.com/3.11compact/”></script>
</head>
<body>
<div id=”map”></div>
</body>
</html>
از تگ Div برای نگه داری نقشه‌ای که ایجاد خواهیم کرد، استفاده می‌کنیم.
در گام بعدی ماژول نقشه‌ای Dojo را با استفاده از تابع require() بارگذاری می‌کنیم.
<script>
require([“esri/map”, “dojo/domReady!”],
function(Map){
});
});
</script>
حالا باید یک شی نقشه ایجاد کنیم و سپس مرکز نقشه، سطح زوم و نقشه مبنا را معرفی کنیم. شی نقشه را می‌توان با Dataframe که در toc ماژول Arcmap وجود دارد، یکی دانست. زیرا شی نقشه همانند Dataframe شامل لایه‌های برداری و رستری و انواع لایه دیگر، سیستم مختصات، Extent، سطح زوم اولیه و … است.
<script>
require([“esri/map”, “dojo/domReady!”], function(Map) {
var map = new Map(“map”, {
center: [-118, 34.5],
zoom: 7,
basemap: “streets”
});
});
</script>
پلاگین dojo/domReady! برای بارگذاری همه عناصر HTML می‌باشد.
کد کامل شده در نهایت باید به صورت زیر دیده می‌شود:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
<meta name=”viewport” content=”initial-scale=1, maximumscale=1,user-scalable=no”/>
<title>Simple Map</title>
<link rel=”stylesheet” href=”https://js.arcgis.com/3.11/esri/css/esri.css”>
<script src=”https://js.arcgis.com/3.11compact/”></script>
<script>
require([“esri/map”, “dojo/domReady!”], function(Map) {
var map = new Map(“map”, {
center: [-118, 34.5],
zoom: 7,
basemap: “topo”
});
});
</script>
</head>
<body>
<div id=”map”></div>
</body>
</html>
در تگ div کد بالا ، idآن با مقدار map مشخص شده است همین مقدارid باید در هنگام ایجاد شی map استفاده شود. در خطوط کد بالا به صورت سیاه توپر مشخص شده است.
حال کد بالا را در فایلی با نام firstMobileMap.html ذخیره کنید و فایل را در مسیر c:\webroot\htdocs کپی کنید. مرورگر google chrome را باز کنید و در نوار آدرس https://localhost/firstMobileMap.html را تایپ کنید. می‌توانید به جای تایپ، فایل firstMobileMap.html را با مرورگر google chrome باز کنید.
حال می‌توانیم نقشه را زوم و پیمایش کنیم.
در تصویر بالا، نقشه فقط نصف صفحه را پر کرده است. با ارجاعی که به فایل Esri.css داشتیم، طرح بندی نقشه را تغییر می‌دهیم. برای از بین بردن این فضای خالی تگ زیر را به خط بعد از ارجاع به فایل Esri.css اضافه می‌کنیم.
<link rel=”stylesheet” href=”https://js.arcgis.com/3.11/esri/css/esri.css”>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
پس از اعمال تگ style نقشه به صورت زیر ظاهر می‌شود:
فایل esri.css برای سبک اپلیکیشن موبایل، بسیار کاربردی است. در اینجا عرض و ارتفاع نقشه را 100% در نظر گرفتیم.
لایه‌های نقشه‌ای Arc Gis
لایه‌های نقشه‌ای محتوای اصلی همه‌‌ی اپلیکیشن‌های موبایل و پایه‌ی تجزیه و تحلیل‌های بیشتر هستند. نقشه‌ها از انواع مختلف داده به‌دست می‌آیند. و این داده در وب سرویس‌های مکانی به کار می‌رود. در Arc Gis لایه‌های نقشه‌ای در حقیقت وب سرویس‌های RESTful هستند. وب سرویس لایه‌ی marathon را در تصویر زیر می‌بینید:
کار کردن با لایه‌های سرویس نقشه
یک نقشه بدون لایه‌های داده شبیه یک نقاش با بوم سفید است. لایه‌ی داده به نقشه معنا می‌دهد و نقشه را وارد مرحله‌ی تجزیه و تحلیل می‌کند. این لایه‌ها برای نقشه،حکم یک سرویس را دارند و خدمات و سرویس‌هایی را به نقشه ارائه می‌دهند. به همین دلیل، لایه‌های سرویس نقشه نامیده می‌شوند.
سه نوع لایه‌ی سرویس نقشه وجود دارد که می‌توانند به نقشه اضافه شوند.
- لایه‌های Dynamicسرویس
- لایه‌های Tileسرویس
- لایه هایfeature سرویس
لایه‌های Dynamic سرویس
لایه‌ی Dynamic سرویس، داده‌های برداری را به صورت پویا ایجاد می‌کند. لایه‌ی marathon یک لایه feature سرویس است و لایه‌ی داده‌ای خام است که برای نمایش به مرورگر دستگاه موبایل فرستاده می‌شود. عوارض این نوع لایه قابل جستجو و قابل ویرایش هستند و نوع پیشرفته‌تری از لایه‌ی گرافیک‌ها است. اگر یک لایه‌ی feature قابلیت ویرایش داشته باشد، می‌توانید عوارض را به لایه اضافه، حذف و ویرایش کنید. این عوارض می‌توانند از نوع نقطه، خط و پولیگون باشند. این نوع لایه، از لایه سرویس نقشه Tiled متنوع‌تر است. در سرویس نقشه dynamic قابلیت دیدن لایه‌های موجود در سرویس را کنترل می‌کنید.نمایش و عدم نمایش لایه‌ی بخصوص، اضافه کردن مقداری اطلاعات موقتی به هر لایه و اضافه کردن ویژگی‌ها برای نمایش معانی و مفاهیم یک لایه از قابلیت‌های این نوع لایه است. به عنوان مثال در سرویس نقشه‌ی demographics که در تصویر بالا می‌بینید، می‌توانید لایه‌ی Census Block Group را برای نمایش در اپلیکیشن انتخاب کنید و دیگر لایه‌ها را نمایش ندهید. این امکان را سرویس نقشه‌ی Tiled ندارد.
لایه‌های Tile سرویس
در این سرویس، نقشه به صورت چند کاشی تقسیم بندی می‌شود. و مجموع این کاشی‌ها که کنار هم قرار می‌گیرند، نقشه را تشکیل می‌دهند. یک سرویس Tile شامل کاشی‌های تصویر است که قبلا درون حافظه اصلی سیستم تولید و بارگذاری شده اند.موقعی که تصویر برای نمایش بارگذاری می‌شود ابتدا کاشی اول سپس کاشی دوم تا آخرین کاشی بارگذاری می‌شوند تا اینکه تصویر به طور کامل نمایش داده شود. Demo لایه‌های Tile و Dynamic را با هم ترکیب می‌کند. لایه‌های سرویس نقشه Tiled به کاشی‌های یک تصویر که از قبل تعریف شده اند ارجاع دارد. برای فهم این سرویس یک شبکه را در نظر بگیرید که روی سطح نقشه قرار گرفته است. این شبکه از تعدادی سطر و ستون تشکیل شده که سلولهای شبکه اندازه ی یکسانی دارند. و هر سلول مقداری از نقشه را دربر دارد. و مقدار نقشه‌ای که در هر سلول قرار می‌گیرد را یک tile می‌گوئیم. هر کدام از این tileها به عنوان یک فایل تصویر روی سرور ذخیره می‌شوند و در صورت نیاز بازیابی می‌شوند. تعداد کاشی‌ها یا همان tileها وابسته به مقیاس نقشه و محدوده قابل نمایش نقشه (extent) است. نتیجه‌ی نهایی مجموعه‌ای از tileها است. زمانی که نقشه در اپلیکیشن نمایش داده می‌شود بصورت یکپارچه ظاهر می‌شود در حالیکه از تعداد زیادی tile تشکیل شده است.
این کاشی‌ها یا همان لایه‌ی نقشه کاشی شده اغلب به عنوان نقشه‌ی مبنا استفاده می‌شوند که شامل نقشه‌های imagery، street و topographicاست. هم چنین برای لایه‌های داده‌ای که اغلب تغییری نمی کنند نیز قابل استفاده هستند. لایه‌های عملیاتی روی نقشه مبنای tiled پوشش داده می‌شوند. اغلب این لایه‌های عملیاتی لایه‌های dynamic هستند.
برگرفته از کتاب تولید وب اپلیکیشن های موبایل با ArcGIS
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک