結合Jqery UI autocomplete實現featurelayer關鍵詞的查詢與展示

概述:

本文講述結合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);
            }
    });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章