اطمینان از دسترس بودن DOM-موسسه چشم انداز-آموزش کاربردی GIS و RS
موقعی که یک صفحه‌ی وب بارگذاری می‌شود، همه‌ی عناصر html موجود در فایل html بارگذاری و تفسیر می‌شوند. این موضوع تحت عنوان DOM مطرح شده است. تا زمانی که تمام عناصر صفحه بارگذاری نشدهاند، کد جاوااسکریپت موجود در فایل html نباید به عناصر دسترسی داشته باشد. بدیهی است که اگر کد جاوااسکریپت بخواهد به عناصر قبل از بارگذاری آن‌ها دستیابی داشته باشد، خطا رخ می‌دهد. برای مدیریت و کنترل این خطا از تابع ready استفاده می‌شود که می‌تواند درون تابع require قرار بگیرد و زمانی که تمام عناصر HTML و ماژول‌ها بارگذاری شدند این تابع اجرا می‌شود. هم‌چنین می‌توانید از پلاگین dojo/domReady! استفاده کنید که بارگذاری تمام عناصر HTML را تضمین می‌کند.
نکته: می‌توان کد جاوااسکریپت را مستقیماً درون فایل HTML اضافه کرد و یا اینکه کدها را درون یک فایل جداگانه جاوااسکریپتی با پسوند.js قرار داد. در این کتاب کدهای جاوااسکریپتی را درون فایل HTML قرار دادیم. در اپلیکیشن‌های پیچیده کدهایتان را درون یک فایل جاوااسکریپتی جداگانه قرار دهید.
ایجاد نقشه
قبلاً با ارجاع به کلاس map موجود در ماژول esri/map، یک نقشه‌ی جدید ایجاد کردیم. درون تابع require یک نمونه‌ی جدید از شی map با استفاده از سازنده ایجاد می‌کنیم. این سازنده برای شی map دو پارامتر می‌پذیرد که یکی از پارامترها برای ارجاع به تگ div است. این تگ وظیفه‌ی نگه داشتن نقشه را به عهده دارد و پارامتر دیگر که options نام دارد، برای نمایش نقشه گزینه‌های مختلفی را ارائه می‌دهد. options در نتیجه‌ی شی JSON ایجاد می‌شود. شی JSON مجموعهی “کلید/مقدار ” است. با گزینه‌ی basemap می‌توانید یک نوع نقشه‌ی مبنا مانند: streets، satellite، hybrid topo، gray، oceans، national-geographic یا osm از سایت آنلاین ArcGIS.com را انتخاب کنید و در صفحه‌ی وب خود نمایش دهید. گزینه‌ی zoom برای تعیین سطح زوم اولیه‌ی نقشه استفاده می‌شود. موقعی که صفحه بارگذاری می‌شود، نقشه با بزرگنمایی که در گزینه‌ی zoom تعیین شده، به نمایش در می‌آید. گزینه‌های minZoom و maxZoom به ترتیب برای تعیین کمترین سطح زوم و بیشترین سطح زوم استفاده می‌شوند. گزینه‌ی center نقطه‌ی مرکزی نقشه را هنگام بارگذاری اولیه‌ی نقشه تعیین می‌کند و از شی point که شامل مختصات طول و عرض جغرافیایی است استفاده می‌کند. گزینه‌های بیشتری وجود دارد که می‌توانید به عنوان پارامتر به سازنده شی map بفرستید.
در ابتدا یک متغیر سراسری map تعریف می‌کنیم. وقتی یک متغیر به صورت سراسری تعریف می‌شود در تمام توابع و متدها و رخدادهای آن تگ قابل دسترس و استفاده خواهد بود. هم چنین یک تابع require() اضافه می‌کنیم.
<script>
var map;
require([“esri/map”, “dojo/domReady!”], function(Map) {
});
</script>
حال در قطعه کد زیر خطوط سیاه توپر را به تابع require اضافه کنید. در خط اول، سازنده یک نمونه از شی map می‌سازد. پارامتر اولی که به سازنده فرستاده می‌شود ID تگ div است که نقشه را در خود نگه می‌دارد. در مرحله‌ی بعدی تگ div را ایجاد می‌کنیم. پارامتر دومی که به سازنده فرستاده می‌شود، شی JSON است. این شی شامل کلیدهایی مانند مختصات جغرافیایی مرکز نقشه، سطح زوم و نقشه‌ی مبنای topo است که هر کدام مقدار مخصوص به خود دارند. همانطور که قبلاً گفتیم شی JSON مجموعهی ” کلید/مقدار ” است.
basemap.require([“esri/map”, “dojo/domReady!”], function(Map) {
map = new Map(“mapDiv”, {
basemap: “topo”,
center: [-122.45,37.75], // long, lat
zoom: 13,
sliderStyle: “small”
});
});
ایجاد محتویات صفحه
ایجاد تگ div یا همان نگه دارنده‌ی نقشه از آخرین مراحل است. یک ID منحصربفرد به تگ div بدهید تا کد جاوااسکریپت به آن ارجاع داده شود. تگ div با id منحصربفرد mapDiv ایجاد شده است. هم چنین باید ویژگی class را برای تگ <body> تعیین کنید که به فایل CSS کتابخانه Dojo که قبلاً به آن ارجاع دادید، ارجاع کند. در کد زیر تگ <body> در Sandbox قبلاً ایجاد شده است.
<body class=”claro”>
<div id=”mapDiv”></div>
</body>
سبک صفحه
برای سبک صفحه تگ <style> را درون تگ <head> قرار دهید. تگ <style> و خطوط کد موجود در این تگ قبلاً ایجاد شده اند. با تگ <style> زیر، نقشه کل صفحه‌ی مرورگر را پر می‌کند.
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
</style>
کد نهایی برای ایجاد یک اپلیکیشن مبنا به صورت زیر است:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=9,
IE=10″>
<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.7/js/esri/css/esri.css”>
<link rel=”stylesheet” href=”https://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css”>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src=”https://js.arcgis.com/3.7/”></script>
<script>
var map;
require([“esri/map”, “dojo/domReady!”], function(Map) {
map = new Map(“map”, {
basemap: “topo”,
center: [-122.45,37.75], // long, lat
zoom: 13,
sliderStyle: “small”
});
});
</script>
</head>
<body class=”claro”>
<div id=”map”></div>
</body>
</html>
کد با زدن دکمه‌ی Run اجرا می‌شود و نقشه‌ی مبنای street به صورت زیر کل صفحه‌ی مرورگر را پر می‌کند.
اطلاعات بیشتر در مورد نقشه
فرآیندی که پیش‌تر بیان شد برای ایجاد هر اپلیکیشنی که با ArcGIS API for JavaScript ساخته می‌شود، ضروری است. در واقع فرآیند مبنا و پایه‌ای است که حتماً باید انجام شود. در برنامه نویسی شی گرا اغلب با استفاده از سازنده یک نمونه از کلاس ساخته می‌شود. یک سازنده تابعی است که یک شی جدید را مقداردهی اولیه می‌کند. در نمونه‌ای که با هم انجام دادیم، با استفاده از سازنده یک نمونه شی map ایجاد کردیم. سازنده‌ها یک یا چند پارامتر را می‌گیرند و حالت اولیه‌ی یک شی را تنظیم می‌کنند. در مثال قبلی، سازنده حالت اولیه‌ی شی نقشه را تنظیم می‌کند.
پارامتر دوم سازنده که همان پارامتر Options است، سطح زوم اولیه‌ی نقشه، مرکز نقشه و نقشه‌ی مبنا را در هنگام بارگذاری اولیه تنظیم کرد. این پارامتر با علامت} شروع می‌شود و با { پایان می‌یابد. درون این {} محتویات شی JSON قرار می‌گیرد. در این محتویات هر گزینه یک نام مخصوص دارد. بعد از نام، علامت: قرار می‌گیرد و سپس مقدار گزینه را قرار می‌دهیم. هر گزینه به وسیله‌ی، از گزینه‌ی دیگر متمایز می‌شود. قطعه کد زیر سازنده و پارامترهایش را نشان می‌دهد.
var map = new Map(“mapDiv”, {
center: [-56.049, 38.485],
zoom: 3,
basemap: “streets”
});
کار کردن با لایه‌های سرویس نقشه
یک نقشه بدون لایه‌های داده شبیه یک نقاش با بوم سفید است. لایه‌ی داده به نقشه معنا می‌دهد و نقشه را وارد مرحله‌ی تجزیه و تحلیل می‌کند. این لایه‌ها مانند یک سرویس برای نقشه هستند و خدمات و سرویس‌هایی را برای نقشه ارائه می‌دهند. به همین دلیل به لایه‌های سرویس نقشه معروف هستند. دو نوع لایه‌ی سرویس نقشه می‌توان به نقشه اضافه کرد.
1- لایه‌های سرویس نقشه dynamic
2- لایه‌های سرویس نقشه Tiled
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک