گرفتن نتایج جستجو

گرفتن نتایج جستجو-موسسه چشم انداز هزاره سوم ملل-آموزش کاربردی GIS و RS

نتایج جستجو در شی FeatureSet به صورت آرایه‌ای از گرافیک‌ها ذخیره می‌شود و می‌توانید گرافیک‌های آرایه را روی نقشه ترسیم می‌کنید.

هر عارضه (گرافیک) موجود در آرایه شامل هندسه، فیلدها، نماد و InfoTemplate می‌‌باشد. این عوارض به صورت گرافیک بر روی نقشه ترسیم می‌شوند. کد زیر تابع بازخوردی addPolysToMap را نشان می‌دهد. پس از آن که جستجو به صورت کامل و موفق اجرا شد، تابع بازخوردی addPolysToMap نیز اجرا می‌شود. این تابع همانند تابع showResults موجود در کد بالا عمل می‌کند. شی FeatureSet به تابع addPolysToMap فرستاده می‌شود و گرافیک‌ها بر روی نقشه ترسیم می‌شوند.

function addPolysToMap(featureSet) {
var features = featureSet.features;
var feature;
for (i=0, il=features.length; i<il; i++) {
feature = features[i];
attributes = feature.attributes;
pop = attributes.POP90_SQMI;
map.graphics.add(features[i].setSymbol(sym));
}
}

پرداختن به جستجوهای مکانی

در این قسمت با اشیاء Query، QueryTask و FeatureSet یک جستجوی مکانی انجام می‌دهیم. با لایه‌ای از شهر Portland، رکوردهای پارسل را جستجو می‌کنیم و نتایج جستجو را بر روی نقشه نمایش می‌دهیم.

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

1- Sandbox را در لینک https://developers.arcgis.com/en/javascript/ sandbox/sandbox.html باز کنید.

2- همه‌ی محتویات تگ <script> را پاک کنید.

3- متغیرهای زیر را در تگ <script> تعریف کنید:

<script>
var map, query, queryTask;
var symbol, infoTemplate;
</script>

4- کد مشخص شده‌ی زیر را به تابع require() اضافه کنید.

<script>
var map, query, queryTask;
var symbol, infoTemplate;
require([
“esri/map”, “esri/tasks/query”, “esri/tasks/QueryTask”,
“esri/tasks/FeatureSet”,
“esri/symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/InfoTemplate”,
“dojo/_base/Color”, “dojo/on”, “dojo/domReady!”
], function(Map, Query, QueryTask, FeatureSet,
SimpleFillSymbol, SimpleLineSymbol, InfoTemplate, Color,
on) {
});
</script>

5- درون تابع require() یک شی map ایجاد کنید.

require([
“esri/map”, “esri/tasks/query”, “esri/tasks/QueryTask”,
“esri/tasks/FeatureSet”,
“esri/symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/InfoTemplate”,
“dojo/_base/Color”, “dojo/on”, “dojo/domReady!”
], function(Map, Query, QueryTask, FeatureSet,
SimpleFillSymbol, SimpleLineSymbol, InfoTemplate,
Color, on) {

map = new Map(“mapDiv”,{
basemap: “streets”,
center:[-85.748, 38.249], //long, lat
zoom: 13
});
})

6- نمادی را برای نمایش نتایج جستجو (در قالب گرافیک) ایجاد کنید.

require([
“esri/map”, “esri/tasks/query”, “esri/tasks/QueryTask”,
“esri/tasks/FeatureSet”,
“esri/symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/InfoTemplate”,
“dojo/_base/Color”, “dojo/on”, “dojo/domReady!”
], function(Map, Query, QueryTask, FeatureSet,
SimpleFillSymbol, SimpleLineSymbol, InfoTemplate,
Color, on) {
map = new Map(“map”,{
basemap: “streets”,
center:[-85.748, 38.249], //long, lat
zoom: 13
});
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new
Color([111, 0, 255]), 2), new Color([255,255,0,0.25]));
infoTemplate = new InfoTemplate(“${OBJECTID}”, “${*}”);
});

7- حالا درون تابع require() متغیر queryTask را مقدار دهی اولیه و سپس رویداد QueryTask.complete را ثبت می‌کنیم. پس خطوط کد مشخص شده را اضافه کنید:

require([
“esri/map”, “esri/tasks/query”, “esri/tasks/QueryTask”,
“esri/tasks/FeatureSet”,
“esri/symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/InfoTemplate”,
“dojo/_base/Color”, “dojo/on”, “dojo/domReady!”
],

function(Map, Query, QueryTask, FeatureSet,
SimpleFillSymbol, SimpleLineSymbol, InfoTemplate,
Color, on

) {

map = new Map(“mapDiv”,{
basemap: “streets”,
center:[-85.748, 38.249], //long, lat
zoom: 13
});
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new
Color([111, 0, 255]), 2), new
Color([255,255,0,0.25]));
infoTemplate = new InfoTemplate(“${OBJECTID}”, “${*}”);
queryTask = new QueryTask(“https://sampleserver1.arcgisonline.
com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/
MapServer/2″);
queryTask.on(“complete”, addToMap);
});

شی QueryTask باید حاوی یک اشاره گر URL معتبر به لایه‌ی موجود در سرویس نقشه ­ای باشد. در این مثال به لایه‌ی Zoning در سرویس نقشه‌ی LOJIC_LandRecords_Louisville ارجاع کردیم تا جستجو روی این لایه انجام شود. از متد dojo.on() برای ثبت رویدادهایی مانند رویداد کلیک و بارگذاری اولیه‌ی صفحه استفاده می‌کنیم. در این مثال رویداد complete را برای شی QueryTask نوشته ایم. هنگامی که جستجو به طور کامل اجرا شد، این رویداد اجرا می‌شود. سپس تابع addToMap() را به عنوان پارامتر on() صدا خواهیم زد.

8- حال باید ویژگی‌های ورودی عمل جستجو را با شی Query تعیین کنیم. دراولین خط یک نمونه شی Query ایجاد می‌کنیم. سپس ویژگی‌های Query.returnGeometry و Query.outFields را تنظیم می‌کنیم. ویژگی returnGeometry را با مقدار true تنظیم کردیم تا ArcGIS Server هندسه‌ی عوارضی که با جستجو تطبیق دارند را برگرداند. ویژگی Query.outFields را برابر همه‌ی فیلدهای لایه‌ی Zoning قرار داده ایم که باید همه‌ی فیلدهای عوارضی که با جستجو تطبیق دارند، برگرداند. خطوط کد مشخص شده‌ی زیر را دقیقاً زیر خطوط کدی که در بخش قبلی نوشته­ اید، اضافه کنید.

require([
“esri/map”, “esri/tasks/query”, “esri/tasks/QueryTask”,
“esri/tasks/FeatureSet”, “esri/symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/InfoTemplate”,
“dojo/_base/Color”, “dojo/on”, “dojo/domReady!”
], function(Map, Query, QueryTask, FeatureSet,
SimpleFillSymbol, SimpleLineSymbol, InfoTemplate, Color,
on) {

map = new Map(“mapDiv”,{
basemap: “streets”,
center:[-85.748, 38.249], //long, lat
zoom: 13
});
symbol = new
SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new
Color([111, 0, 255]), 2), new Color([255,255,0,0.25]));
infoTemplate = new InfoTemplate(“${OBJECTID}”, “${*}”);
queryTask = new QueryTask(“https://sampleserver1.arcgisonline.
com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/
MapServer/2”);
queryTask.on(“complete”, addToMap);
query = new Query();
query.returnGeometry = true;
query.outFields = [“*”];
});

9- برای ثبت رویداد کلیک روی نقشه در تابع doQuery کدی را اضافه می‌کنیم. تابع doQuery نقطه‌ی کلیک کاربر روی نقشه را برمی‌گرداند. این نقطه از نقشه به عنوان هندسه استفاده خواهد شد. در بخش بعدی تابع doQuery را ایجاد می‌کنیم که نقطه‌ی کلیک شده بر روی نقشه را می‌گیرد.

require([
“esri/map”, “esri/tasks/query”, “esri/tasks/QueryTask”,
“esri/tasks/FeatureSet”, “esri/symbols/SimpleFillSymbol”,
“esri/symbols/SimpleLineSymbol”, “esri/InfoTemplate”,
“dojo/_base/Color”, “dojo/on”, “dojo/domReady!”
], function(Map, Query, QueryTask, FeatureSet,
SimpleFillSymbol, SimpleLineSymbol, InfoTemplate, Color, on) {
map = new Map(“mapDiv”,{
basemap: “streets”,
center:[-85.748, 38.249], //long, lat
zoom: 13
});

symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new
Color([111, 0, 255]), 2), new Color([255,255,0,0.25]));
infoTemplate = new InfoTemplate(“${OBJECTID}”, “${*}”);
map.on(“click”, doQuery);
queryTask = new QueryTask(“https://sampleserver1.arcgisonline.com/
ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/
MapServer/2”);
queryTask.on(“complete”, addToMap);
query = new Query();
query.returnGeometry = true;
query.outFields = [“*”];
});

10- تابع doQuery، تابع QueryTask را با توجه به ویژگی‌های Query اجرا می‌کند. این ویژگی‌ها را در تابع require( ) و با نقطه‌ی کلیک شده‌ی کاربر تنظیم کرده ایم. نقطه ­ی کلیک شده ی کاربر در تابع Query.geometry استفاده می‌شود. این نقطه با ویژگی mapPoint که یک شی نقطه‌ای است، بازیابی می‌شود. این نقطه برای تنظیم ویژگی Query.geometry استفاده می‌شود و برای پیدا کردن پارسلی است که کاربر در آن پارسل کلیک کرده است. سپس متد QueryTask.execute() اجرا می‌شود. بعد از اینکه عمل جستجو انجام شد، یک شی FeatureSet حاوی عوارضی که با جستجو تطبیق داشته­اند برمی‌گردد. خطوط کد زیر را دقیقاً زیر آکلاد بسته‌ی تابع require() اضافه کنید.

function doQuery(evt) {
//clear currently displayed results
map.graphics.clear();
query.geometry = evt.mapPoint;
query.outSpatialReference = map.spatialReference;
queryTask.execute(query);
}

11- قبلاً رویداد QueryTask.complete را برای اجرای تابع addToMap() نوشتیم؛ اما هنوز تابع addToMap() را ننوشته­ ایم. این تابع یک شی FeatureSet می‌پذیرد و عوارض برگشتی از نتیجه‌ی جستجو را بر روی نقشه رسم می‌کند. برای هر عارضه‌ی برگشتی یک info template تعریف می‌شود. شی InfoWindow برای نمایش فیلدهای عارضه‌ی برگشتی است. پس خطوط کد زیر را برای ایجاد تابع addToMap() اضافه کنید.

function addToMap(results) {
var featureArray = results.featureSet.features;
var feature = featureArray[0];
map.graphics.add(feature.setSymbol(symbol).
setInfoTemplate(infoTemplate));
}

کد نهایی را در فایل spatialquery.html ببینید.

حال دکمه‌ی run موجود در sandbox را بزنید. باید تصویر زیر را ببینید.

هر جایی از نقشه برای جستجو کلیک کنید. پولیگونی از لایه‌ی zoning به صورت روشن نمایش داده می‌شود. توجه داشته باشید با توجه به نقطه‌ای که کلیک کردید، پولیگون مربوط به همان مکان کلیک شده، نمایش داده خواهد شد.

حال بر روی پولیگون کلیک کنید تا اطلاعات توصیفی (فیلدها) پولیگون در یک پنجره‌ی اطلاعاتی ظاهر شوند.

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

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

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