结合Jqery UI autocomplete实现featurelayer关键词的查询与展示

原创 2017年01月02日 21:49:01

概述:

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




版权声明:本文为LZUGIS原创文章,未经允许不得转载。

相关文章推荐

solr进阶八:jQuery UI Autocomplete与solr搜索结合

大致的流程: 页面捕获到文字 --> 传到servlet(Controller)层,servlet层调用后台 --> 后台根据servlet层传来的参数进行动态从solr中获取数据 --> solr ...

jQuery ui autocomplete实现联想输入下拉菜单

.ui-autocomplete {             max-height: 300px;             overflow-y: auto;   ...

Arcgis for Js之featurelayer实现空间查询和属性查询

Arcgis for Js之featurelayer实现空间查询和属性查询

ajax结合jQuery autocomplete 实现类似百度搜索一样的输入联想

之前在一个工作中的项目里有这样的需求 费尽心思搞了出来 感觉效果还不错 结合后台服务器定时生成的js静态文件实现的 编辑这篇文章的时候 这个项目已经过去快一年了 所以有些代码可能不全

Ext的comboBox结合Servlet、JSON实现AutoComplete

jsonjavaquery应用服务器function      这是一个利用Ext.form.field.ComboBox实时获取数据的例子,这个combo必须是可以编辑的,在编辑的过程中通...

使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配

要实现如图所示效果,通过ajax,和Autocomplete完成匹配,整了好久,做一下记录。 实现过程如下 jsp页面:引入   添加标签用于绑定:  药店名称: auto...

jquery-ui-autocomplete

  • 2014-09-03 10:50
  • 139KB
  • 下载

jquery.autocomplete 实现实时查询

之前做过一个autocomplete的例子,但是用的是从数据中把数据全部取出来,然后进行匹配,如果取出的数据量比较少,用这个方法可以。但是如果数据量很大,则会造成响应速度很慢,所以还是弄了个实时的例子...

jquery ui autocomplete

  • 2014-01-15 23:05
  • 119KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)