概述:
本文讲述结合Jquery UI autocomplete实现在文本框中输入关键字,查询featurelayer并将结果以列表的形式展示出来,点击某一列表在地图中展示相对应的效果。
效果:
实现:
/**
* queryTask查询
*/
var qUrl = "http://localhost:6080/arcgis/rest/services/lzugis/boundrychina/MapServer/9";
queryTask = new esri.tasks.QueryTask(qUrl);
$( "#fchfilter" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: qUrl+"/query",
dataType: "json",
data:{
f:"json",
where:"name like '%"+$("#fchfilter").val()+"%'",
returnGeometry:true,
outFields:"name"
},
success: function( data ) {
data = data.features;
response( $.map( data, function( item ) {
return {
value:item.attributes.name,
attr:item
};
}));
}
});
},
minLength: 1,
select: function( event, ui ) {
var item = ui.item;
$("#fchfilter").val(item.name);
item.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 5,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 1),
new Color([255, 0, 0, 0.8]));
gLayer.add(item);
showObjInfo(item.attr.attributes,item.attr.geometry);
}
});