前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >结合Jqery UI autocomplete实现featurelayer关键词的查询与展示

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

作者头像
牛老师讲GIS
发布2018-10-23 11:39:02
4410
发布2018-10-23 11:39:02
举报
文章被收录于专栏:跟牛老师一起学WEBGIS

概述:

本文讲述结合Jquery UI autocomplete实现在文本框中输入关键字,查询featurelayer并将结果以列表的形式展示出来,点击某一列表在地图中展示相对应的效果。

效果:

实现:

代码语言:javascript
复制
    /**
     * 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);
            }
    });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年01月02日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档