ایجاد نقشه و اضافه کردن لایهها به نقشه-موسسه چشم انداز-آموزش کاربردی GIS و RS
زمان ایجاد یک اپلیکیشن وب GIS اساسی رسیده است. هدف اصلی این بخش آشنا کردن شما با مفاهیم بنیادی است تا نقشه ایجاد کنید و اطلاعاتی در قالب لایه به نقشه اضافه کنید.
در این بخش مطالب زیر را پوشش میدهیم.
1- ArcGIS JavaScript API Sandbox
2- ایجاد اپلیکیشن وب GIS با استفاده از ArcGIS JavaScript API.
3- اطلاعات بیشتر در مورد نقشه
4- کارکردن با لایههای سرویس نقشه
4-1- لایههای سرویس Tiled
4-2- لایههای سرویس Dynamic
5- پیمایش نقشه
6- کار با محدودهی قابل نمایش نقشه (extent)
در این بخش اپلیکیشنی ساده و اساسی ایجاد میکنیم و این اپلیکیشن اساس و بنیاد تمام اپلیکیشنهای بعدی و پیشرفته است.
ArcGIS JavaScript API Sandbox
از Sandbox برای ارزیابی و بررسی کد استفاده میکنیم. Sandbox را در لینک زیر ببینید:
http://developers.arcgis.com/en/javascript/sandbox/sandbox.html
در تصویر زیر Sandbox را میبینید که کد در سمت چپ قرار دارد. دکمهی Run را بزنید تا نتیجهی کد را در سمت راست ببینید.
ایجاد اپلیکیشن وب GIS با استفاده از ArcGIS JavaScript API
برای ایجاد اپلیکیشن چند مرحله را باید انجام دهیم. این مراحل در صورت وجود نقشه در اپلیکیشن باید انجام شوند. تصور یک اپلیکیشن وب GIS بدون نقشه سخت است.
مراحل زیر را دنبال کنید:
1- ایجاد کد HTML برای صفحهی وب.
2- ارجاع به کتابخانههای جاوااسکریپتی ArcGIS API و فایلهای CSS.
3- بارگذاری ماژولها
4- اطمینان از در دسترس بودن DOM
5- ایجاد نقشه
6- تعیین محتویات صفحهی وب
7- سبک صفحهی وب
ایجاد کد HTML برای صفحهی وب
ابتدا باید یک صفحهی وب ساده ایجاد کنیم. از تگهای HTML مثل div برای نگه داشتن نقشه استفاده میکنیم. اگر از Sandbox استفاده میکنید این مرحله قبلاً در Sandbox انجام شده است و کد مربوطه وجود دارد. ولی برای اینکه شما فهم خوبی از مفاهیم HTML داشته باشید، این مراحل را به صورت کدنویسی با هم انجام میدهیم. در قسمت سمت چپ Sandbox کدی که به صورت سیاه توپر در زیر نشان داده شده است، کدهای ایجاد یک صفحهی وب ساده هستند. در مورد خطوط کدی که توضیح داده نشدهاند، طی این بخش و بخشهای بعدی توضیح داده خواهد شد.
<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”viewport” content=”initial-scale=1, maximumscale=1,user-scalable=no”>
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/dojo/dijit/
themes/claro/claro.css”>
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/esri/css/
esri.css”>
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src=”http://js.arcgis.com/3.7/”></script>
<script>
dojo.require(“esri.map”);
function init(){
var map = new esri.Map(“mapDiv”, {
center: [-56.049, 38.485],
zoom: 3,
basemap: “streets”
});
}
dojo.ready(init);
</script>
</head>
<body class=”claro”>
<div id=”mapDiv”></div>
</body>
</html>
ارجاع به کتابخانههای جاوااسکریپتی ArcGIS API و فایلهای CSS
برای شروع به کار با کتابخانه جاوااسکریپتی ArcGIS باید به فایلهای جاوااسکریپتی و فایل های CSS ارجاع دهیم. کد زیر ارجاع به فایلهای مذکور را نشان میدهد. در Sandbox میبینید که خط کد زیر برای ارجاع به فایل CSS است.
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/esri/css/esri.css”>
ارجاع به API جاوااسکریپتی Arc GIS نیز به صورت زیر انجام میشود.
<script src=”http://js.arcgis.com/3.7/”></script>
در هنگام نوشتن این کتاب آخرین نسخهی Javascript شرکت Esri نسخهی 3.7 میباشد. اگر نسخهی API مورد استفادهی شما متفاوت است، به صورت دستی نسخه را در کد تغییر دهید. تگ <link> فایل css را بارگذاری میکند. فایل esri.css یکی از سبکهای از پیش تعریف شدهی ویجتهای Esri است.
API JavaScript ArcGIS بر روی فریم ورک Dojo ساخته شده است. Dojo چهار سبک از پیش تعریف شده دارد که ویجتهای رابط کاربری را کنترل میکنند.
در زیر به یکی از این سبکهای از پیش تعریف شده ارجاع دادهایم.
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css”>
اگر بخواهید یک سبک رابط کاربری Dojo را اضافه کنید باید به یکی از فایلهای CSS ارجاع دهید.
در زیر به چند فایل CSS ارجاع داده شده است:
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css”>
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/dojo/dijit/themes/nihilo/nihilo.css”>
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/dojo/dijit/themes/soria/soria.css”>
وب سایت www.dojotoolkit.org نحوهی نمایش هر کدام از سبکها را بر روی رابط کاربری نشان میدهد. تصویر زیر یک سبک Dijit برای رابط کاربری را نشان میدهد.
بارگذاری ماژول ها
قبل از ایجاد یک نمونه از شی map باید به منابعی ارجاع دهیم تا شی نقشه را فراهم کنند. ارجاع منابع با استفاده از تابع require امکان پذیر است.
ارث بری یا AMD Dojo؟
Dojo در نسخهی 1.7 خود، (Asynchronous Model Definition (AMD را معرفی کرده است. 3.4 Javascript API اولین نسخهای بود که در آن همهی ماژولها با استفاده از AMD جدید، بازنویسی مجدد شدند که بهتر است اپلیکیشن را با استفاده از سبک AMD جدید ایجاد کنیم.
تابع require برای وارد کردن منابع به صفحهی وب استفاده میشود. قبل از ایجاد شی نقشه، عملیات هندسی، گرافیک و سمبلها باید منابع را به اپلیکیشن اضافه کرد.
برای ایجاد شی Map مراحل زیر را دنبال کنید:
1- قبل از اینکه به Sandbox کد اضافه کنید، خطوط سیاه توپر در کد زیر را از Sandbox پاک کنید. میخواهیم از سبک AMD جدید استفاده کنیم. البته در نسخههای بعدی Sandbox ممکن است که نیازی به حذف خطوط کد زیر نباشد و خطوط کد موجود در sandbox به سبک AMD جدید نوشته شده باشند. ولی در Sandbox نسخهای که در اینجا استفاده میکنیم الزاماً باید خطوط کدی که در زیر مشخص شدهاند پاک شوند.
<script>
dojo.require(“esri.map”);
function init(){
var map = new esri.Map(“mapDiv”, {
center: [-56.049, 38.485],
zoom: 3,
basemap: “streets”
});
}
dojo.ready(init);
</script>
2- منابعی که باید اضافه شوند، به یک تگ جدید <script> نیاز دارند. خطوط کد سیاه پررنگ زیر را در Sandbox در یک تگ <script> اضافه کنید. نام آرگومانهایی که درون تابع require استفاده میشوند میتوانند نام دلخواه شما باشند؛ اما Esri و Dojo لیستی از آرگومانهای از پیش تعریف شده فراهم کرده اند؛ و این آرگومانها به تابع require فرستاده میشوند. ترجیحاً از آرگومانهای از پیش تعریف شده استفاده کنید. به عنوان مثال در قطعه کد زیر ارجاعی به منبع esri/map ایجاد کردیم و درون تابع نام مستعار esri/map را قرار دادیم یعنی از آرگومان از پیش تعریف شدهی esri/map استفاده کردیم. در تابع require به هر منبعی که ارجاع میدهید، یک آرگومان مربوط به منبع دارد که قلابی به شی آن منبع ایجاد میکند.
<script>
require([“esri/map”, “dojo/domReady!”], function(Map) {
});
</script>
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک
بدون دیدگاه