结合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原创文章,未经允许不得转载。

Jquery autocomplete

--%>                 java.text.DecimalFormat,                 com.eastpro.util.Constants,           ...

OL3矢量图层样式自定义

本文讲述如何在OL3中加载Geojson并动态修改图层样式。

eCharts添加自定义geojson数据实现地图展示

当初看到echarts的地图的时候感觉可以做点什么,但是一直米有实施,最近刚好用到了,就研究了研究,在echarts中添加了自定义的geojson数据,实现数据的地图展示。...

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

空间查询和属性查询是常用的两种对数据的检索与查询方式,在本节,将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式,先贴图给大家看看: 实现界面 属性查询...

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

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

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

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

实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件 .

[+] minLengthType Integer Default1指定数据源可以使数组字符串或者一个函数主要与数据库交互后返回的值如果数据源是数组Array的话可以有两种指定方式如 实验:  ...

实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件

目录(?)[+] minLengthType Integer Default1指定数据源可以使数组字符串或者一个函数主要与数据库交互后返回的值如果数据源是数组Array的话可以有两种指定方式如 ...
  • zzy7075
  • zzy7075
  • 2013年04月18日 21:32
  • 3066

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

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

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

之前在一个工作中的项目里有这样的需求 费尽心思搞了出来 感觉效果还不错 结合后台服务器定时生成的js静态文件实现的 编辑这篇文章的时候 这个项目已经过去快一年了 所以有些代码可能不全...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:结合Jqery UI autocomplete实现featurelayer关键词的查询与展示
举报原因:
原因补充:

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