概述:
本文講述結合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); } });