概述:

本文讲述结合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);
            }
    });

---------------------------------------------------------------------------------------------------------------

技术博客

http://blog.csdn.NET/gisshixisheng

在线教程

http://edu.csdn.Net/course/detail/799
Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)
             337469080(Android)




posted on 2017-01-02 21:49  LZU-GIS  阅读(124)  评论(0编辑  收藏  举报