ویجت BasemapGallery-موسسه چشم انداز-آموزش کاربردی GIS و RS
این ویجت مجموعه‌ای از نقشه‌های مبنای موجود در سایت ArcGIS.com را نشان می‌دهد. هم چنین این ویجت نقشه‌های مشخص شده‌ی کاربر را نشان می‌دهد. زمانی که یک نقشه‌ی مبنا از مجموعه انتخاب می‌شود؛ نقشه مبنای فعلی در حال نمایش، حذف می‌شود و نقشه مبنای انتخابی، نمایش داده می‌شود.
هنگامی که نقشه‌های سفارشی را به گالری نقشه اضافه می‌کنید، این نقشه‌ها باید spatial reference مشابهی با دیگر نقشه‌ها و لایه‌های موجود در گالری داشته باشد. در واقع باید ارجاع مکانی و سیستم مختصات یکسانی داشته باشند. لایه‌های موجود در ArcGIS.com با سیستم ارجاع Web Mercator با wkidهای 102100, 102113 یا 3857 هستند. Wkid ها، شناسه‌های منحصربفردی هستند که در سیستم تصویر Web Mercator استفاده می‌شوند. سیستم تصویر Web Mercator برای هر زون جغرافیایی و سیستم مختصات جغرافیایی، wkid مخصوص و منحصر بفردی قرار داده است. برای بهبود کارائی و عملکرد، همه‌ی نقشه‌های مبنا را از نوع لایه‌ی tiled انتخاب کنید.
هنگامی که ویجت BasemapGallery ایجاد می‌شود، تعدادی پارامتر وجود دارد که در سازنده قابل تنظیم و مقدار دهی هستند. این پارامترها برای نحوه ی نمایش نقشه‌ی مبنا، تعیین یک یا چند نقشه مبنای سفارشی برای اضافه کردن در گالری، تهیه‌ی کلید برای نقشه‌های Bing، ارجاع به گالری که نقشه درآنجا قرار دارد و موارد دیگر، تنظیم و مقداردهی می‌شوند.
بعد از ایجاد ویجت BasemapGallery، باید متد startup() را صدا بزنید تا نقشه‌ی مبنا برای تعامل و محاوره با کاربر آماده شود.
به قطعه کد زیر دقت کنید:
require([“esri/dijit/Basemap”, …
], function(Basemap, … ) {
var basemaps = [];
var waterBasemap = new Basemap({
layers: [waterTemplateLayer],
title: “Water Template”,
thumbnailUrl: “images/waterThumb.png”
});
basemaps.push(waterBasemap);
…
});
در کد بالا، یک شی Basemap به همراه یک عنوان برای این شی، یک تصویر بندانگشتی و آرایه‌ای شامل یک لایه ایجاد می‌شوند.
تصویر بند انگشتی تصویری با ابعاد کوچکتر از ابعاد واقعی تصویر است که در اکثر مواقع با کلیک بر روی این تصویر بندانگشتی، تصویر در اندازه‌ی واقعی خود نمایش داده می‌شود. تصاویر بندانگشتی به دلیل ابعاد کوچک و حجم کوچکی که دارند برای استفاده در صفحات وب مناسب هستند. شی Basemap درون آرایه‌ی نقشه‌های مبنا قرار گرفته و سپس این آرایه به ویجت اضافه می‌شود.
ویجت Bookmarks
این ویجت شامل مجموعه‌ای از محدوده‌های جغرافیایی است که به کاربر نمایش داده می‌شود. در واقع این ویجت برای نمایش مجموعه‌ای از extentها است که هر کدام نامی دارند و به هر کدام از آن‌ها Bookmark گفته می‌شود. با کلیک روی نام Bookmark، نقشه با extent موجود در Bookmark تنظیم می‌شود. با استفاده از این ویجت، می‌توانید Bookmarkهای جدیدی اضافه، حذف و یا ویرایش کنید. Bookmark ها، کدهای جاوااسکریپتی از پیش تعریف شده و اشیاء JSON هستند که شامل ویژگی‌های نام، extent و مختصات چهار گوشه‌ی محدوده هستند.
برای اضافه کردن Bookmark به ویجت از کد Bookmark.addBookmark() استفاده کنید.
تصویر زیر اضافه کردن محدوده‌ی ایالت پنسیلوانیای مرکزی را به نقشه نشان می‌دهد که با کلیک بر روی Add Bookmark این محدوده به نقشه اعمال می‌شود و نقشه روی این ایالت زوم می‌شود.
به قطعه کد زیر دقت کنید:
require([
“esri/map”, “esri/dijit/Bookmarks”, “dojo/dom”, …
], function(Map, Bookmarks, dom, … ) {
var map = new Map( … );
var bookmarks = new Bookmarks({
map: map,
bookmarks: bookmarks
}, dom.byId(‘bookmarks’));
…
});
در قطعه کد قبلی یک شی Bookmarks ایجاد شده و به نقشه اضافه می‌شود و لیستی از Bookmarkها به فرمت JSON ایجاد می‌شوند.
ویجت Print
این ویجت یکی از ابزارهای بسیار کاربردی است. این ویجت نقشه‌های موجود در اپلیکیشن را چاپ می‌کند. این ویجت یک سبک پیش فرض دارد. هم چنین می‌تواند از سبک سفارشی کاربر استفاده کند. این ویجت از ArcGIS Server 10.1 یا نسخه‌ی بالاتر استفاده می‌کند. به تصویر زیر دقت کنید:
به قطعه کد زیر دقت کنید:
require([
“esri/map”, “esri/dijit/Print”, “dojo/dom”…
], function(Map, Print, dom, … ) {
var map = new Map( … );
var printer = new Print({
map: map,
url: ” http://servicesbeta4.esri.com/arcgis/rest/services/
Utilities/ExportWebMap/GPServer/Export%20Web%20Map%20Task”
}, dom.byId(“printButton”));
…
});
در کد بالا ابتدا یک ویجت print ایجاد می‌شود. ویژگی URL برای اشاره به ویجت جهت انجام عمل پرینت می‌باشد. سپس این ویجت به یک عنصر HTML که ID آن printButton است، ضمیمه می‌شود.
ویجت Geocoder
این ویجت برای اضافه کردن توابع geocoding به اپلیکیشن استفاده می‌شود. این ویجت یک textbox دارد و هنگامی که کاربر آدرس را درون این textbox تایپ می‌کند آدرس‌های مرتبط با آدرس تایپی به صورت خودکار در جعبه‌ی متنی ظاهر می‌شوند. این ویژگی اصطلاحاً Autocompletion نامیده می‌شود. برای استفاده از این ویژگی کافی است که ویژگی autoComplete را به مقدار true تنظیم کنید.
ویجت Geocoder به صورت پیش فرض از سرویس موقعیت‌یاب جهانی Esri استفاده می‌کند. می‌توانید با تنظیم ویژگی geocoder به سرویس مورد نظرتان، نوع این سرویس را تغییر دهید. در تصویر زیر از ویژگی autoComplete استفاده شده است.
شما می‌توانید مقادیری را تعیین کنید که به صورت خودکار به هر آدرسی که کاربر وارد می‌کند، اضافه شوند. به طور مثال ممکن است بخواهید شهر یا ایالت خاصی به هر آدرسی که کاربر وارد می‌کند، اضافه شود. برای این کار از ویژگی suffix استفاده کنید. برای اینکه مکان آدرس ورودی کاربر روی نقشه نمایش داده شود، ویژگی autoNavigate را به مقدار true تنظیم کنید. وقتی شی Locator یک آدرس را برمی‌گرداند این ویژگی می‌تواند بیشتر از یک مکان را مطابق با آدرس برگشتی بر روی نقشه نمایش دهد. در واقع وقتی کاربر یک آدرس را تایپ می‌کند ممکن است چندین مکان مطابق با آدرس بر روی نقشه وجود داشته باشد. می‌توانید حداکثر تعداد مکان‌هایی که منطبق با آدرس ورودی هستند را با ویژگی maxLocations تنظیم کنید.
در تمرین بخش بعدی یک ویجت Geocoder به اپلیکیشن اضافه می‌کنیم.
کار با ویجت Geocoder
1- ابتدا Sandbox مربوط به JavaScript API را در لینک زیر باز کنید:
http://developers.arcgis.com/en/javascript/sandbox/sandbox.html
2- یک تگ <style> به صورت زیر بنویسید:
<style>
html, body, #mapDiv {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:”Trebuchet MS”;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 75px;
}
</style>
3- محتویات تگ <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>
4- از قبل یک تگ <div> برای نگهداری نقشه وجود دارد. در این مرحله یک تگ <div> دیگر برای نگهداری ویجت Geocoding اضافه می‌کنیم. پس خطوط کد زیر را اضافه کنید:
<body class=”tundra”>
<div id=”search”></div>
<div id=”mapDiv”></div>
</body>
5- در تگ <script> متغیرهایی برای نگهداری map و شی geocoder تعریف می‌کنیم:
<script>
var map, geocoder;
</script>
6- در تگ <script> تابع require() را اضافه کنید و یک شی Map مطابق زیر ایجاد کنید:
<script>
var map, geocoder;
require([
“esri/map”, “esri/dijit/Geocoder”, “dojo/domReady!”
], function(Map, Geocoder) {
map = new Map(“mapDiv”,{
basemap: “streets”,
center:[-98.496,29.430], //long, lat
zoom: 13
});
});
</script>
7- ویجت geocoding را مطابق زیر اضافه کنید:
require([
“esri/map”, “esri/dijit/Geocoder”, “dojo/domReady!”
], function(Map, Geocoder) {
map = new Map(“map”,{
basemap: “streets”,
center:[-98.496,29.430], //long, lat
zoom: 13
});
var geocoder = new Geocoder({
map: map,
autoComplete: true,
arcgisGeocoder: {
name: “Esri World Geocoder”,
suffix: ” San Antonio, TX”
}
},”search”);
geocoder.startup();
});
در نهایت کد باید به صورت زیر نوشته شده باشد:
<!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,
maximum-scale=1,user-scalable=no”/>
<title>Geocoding Widget API for JavaScript | Simple Geocoding
</title>
<link rel=”stylesheet” href=”http://js.arcgis.com/3.7/js/esri/css/esri.css”>
<style>
html, body, #mapDiv {
height:100%;
width:100%;
margin:0;
padding:0;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script src=”http://js.arcgis.com/3.7/”></script>
<script>
var map, geocoder;
require([
“esri/map”, “esri/dijit/Geocoder”, “dojo/
domReady!”
], function(Map, Geocoder) {
map = new Map(“mapDiv”,{
basemap: “streets”,
center:[-98.496,29.430], //long, lat
zoom: 13
});
var geocoder = new Geocoder({
map: map,
autoComplete: true,
arcgisGeocoder: {
name: “Esri World Geocoder”,
suffix: ” San Antonio, TX”
}
},”search”);
geocoder.startup();
});
</script>
</head>
<body>
<div id=”search”></div>
<div id=”mapDiv”></div>
</body>
</html>
8- دکمه‌ی Run را بزنید تا کد اجرا شود. مطابق تصویر زیر ویجت Geocoder را می‌بینید:
9- آدرس 1202 Sand Wedge را به عنوان مثال در کادر متنی آدرس وارد کنید. ویژگی Autocompletion به طور خودکار آدرس مورد نظر ما را تکمیل می‌کند. هنگامی که آدرس‌ها در لیست ظاهر می‌شوند، آدرس مورد نظرتان را انتخاب کنید. ویجت آدرس را مکان یابی می‌کند و نقشه در مکان‌های متناظر با آدرس زوم می‌شود. مطابق تصویر زیر نقشه بر روی خیابان‌های با نام Sand Wedge زوم شده است:
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک
51 نظرات