zoukankan      html  css  js  c++  java
  • 结合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);
                }
        });

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

    技术博客

    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)




  • 相关阅读:
    node03- FS内置模块
    node03- CommonJS
    删除当前目录下的所有文件夹和文件
    解决 idea 项目中Error:java: 无效的标记
    Raid0,Raid1,Raid5,Raid10 总结
    Tcpdump命令
    ClassNotFoundException 和 NoClassDefFoundError 区别
    Dart-List里面常用的属性和方法
    CSS实现等分布局的4种方式
    iOS项目添加CocoaPods
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539757.html
Copyright © 2011-2022 走看看