在map对象上注册点击方法监听, 这里我用的是wms,当然你也可以查询wfs

map.events.register('click', map, function (e) {
                     var params = {
                             REQUEST: "GetFeatureInfo",
                             EXCEPTIONS: "application/vnd.ogc.se_xml",
                             BBOX: map.getExtent().toBBOX(),
                             SERVICE: "WMS",
                             VERSION: "1.1.1",
                             X: e.xy.x,
                             Y: e.xy.y,
                          //   INFO_FORMAT: 'text/html',  这里必须注意啦 查询结果会返回不同的格式滴,根据自己的需呀要做不同设置哦,text/html或者application/vnd.ogc.gml
                             INFO_FORMAT: 'application/vnd.ogc.gml',  
                            QUERY_LAYERS: map.layers[1].params.LAYERS,
                             FEATURE_COUNT: 50,
                             Layers: 'mine:locatorinfo_'+MineCode,
                             WIDTH: map.size.w,
                             HEIGHT: map.size.h,
                             format: format,
                             styles: map.layers[1].params.STYLES,
                             srs: map.layers[1].params.SRS};
                     //    alert(map.layers[1].params.LAYERS); 
                         OpenLayers.loadURL("http://172.16.0.81:8080/geoserver/mine/wms", params, this, setHTML, failhttml);
                         tpoint = map.getLonLatFromPixel(e.xy),  
                         OpenLayers.Event.stop(e);
                });

查询完毕且成功回调方法是:setHTML   【加载查询失败的方法时failhtml】

var popup1;
            function setHTML(response){    
            //    alert(response.responseText);
                //获取要素结果集
                var g = new OpenLayers.Format.GML();
              var   features = g.read(response.responseText);
              var tempstr = '';
              var nfid = '';
              var nm = '';
                //遍历要素集
                for(var feat=0;feat<features.length;feat++){
                 nm = features[feat].attributes.equipmentid;    //获取属性的时候
                 nfid = features[feat].fid;   //fid的获取比较特殊哦,不是按照属性获取方式的,可以参考geoserver发布的服务就能看出那些时属性设置
                 tempstr += nfid;
                }
                
                if(popup1!=null){
                    map.removePopup(popup1);
                }
                popup1 = new OpenLayers.Popup.FramedCloud("chicken",
                        tpoint,
                        new OpenLayers.Size(200,200),
                       tempstr,
                       null,
                        true);
            popup1.autoSize=true;
            map.addPopup(popup1);
            };

执行逻辑是这样滴,点击图层,查询结果弹出tip提示窗口。

效果如图哦

openlayers空间点查询之GetFeatureInfo的更多相关文章

  1. 通过openlayers加载dwg格式的CAD图并与互联网地图叠加

    Openlayers介绍 ​ Openlayers是一个基于Javacript开发,免费.开源的前端地图开发库,使用它,可以很容易的开发出WebGIS系统.目前Openlayers支持地图瓦片.矢量数 ...

  2. mapserver+openlayers实现左键点击查询

    效果图 第一步,配置自己的mapfile,在要查询的图层LAYER对象内加上HEADER,TEMPLATE,FOOTER三个参数,同时,TEMPLATE fooOnlyForWMSGetFeature ...

  3. OpenLayers 3+Geoserver+PostGIS实现点击查询

    WebGIS开发中,点击查询是最经常使用的一种查询方式,在ArcGIS api 中.这样的查询叫IdentifyTask,主要作用是前台提交參数.交ArcServer查询分析返回. 本文从开源框架的角 ...

  4. Geoserver+Openlayers拉框查询

    1.代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  5. postgresql+postgis+pgrouting实现最短路径查询(2)---openlayers+geoserver实现最短路径

    自己的最短路径实现基本上是按照参考博文的1.2和3进行的,实现的时候也是问题不断,只能是一个一个解决. 问题1:自己发布的geoserver服务无法和OSM底图叠加到一起. 解决:参考博文2提到发布服 ...

  6. OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)

    近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...

  7. geoserver扫盲 openlayers相关

    转自:http://www.cnblogs.com/lzlynn/archive/2008/07/29/1255702.html WMS: Web Map Service(Web地图服务 ) l  利 ...

  8. openlayers中单击获取要素

    openlayers中单击获取要素 分类专栏: GIS 总结 OpenLayers   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...

  9. geoserver与OpenLayers配置

          geoserver与OpenLayers配置         目录   1     准备工作.... 4 1.1      需要用到的程序和资料... 4 2     地图格式转换方式(一 ...

随机推荐

  1. 关于Weex你需要知道的一切

    QCon第一天,GMTC全球移动技术大会联席主席.手淘技术老大庄卓然(花名南天)在Keynote上宣布跨平台开发框架Weex开始内测,并将于6月份开源,同时他们也放出官网:http://alibaba ...

  2. 产品经理-需求分析-用户故事-敏捷开发 详解 一张图帮你了解Scrum敏捷流程

    产品经理-需求分析-用户故事-敏捷开发 详解 用户故事是从用户的角度来描述用户渴望得到的功能.一个好的用户故事包括三个要素:1. 角色:谁要使用这个功能.2. 活动:需要完成什么样的功能.3. 商业价 ...

  3. [转载]oracle 数据类型详解---日期型

    1.常用日期型数据类型1.1.DATE这是ORACLE最常用的日期类型,它可以保存日期和时间,常用日期处理都可以采用这种类型.DATE表示的日期范围可以是公元前4712年1月1日至公元9999年12月 ...

  4. oracle数据库基础功能

    一.oracle基本常用的数据类型 varchar(长度) 字符串char(长度) 字符number(x,y) x表示总位数 y表示保留小数点后几位数 eg面试题:number(5,3)最大的数是99 ...

  5. JDBC和servlet设计思路、DAO模式思路、MVC思路粗略总结

    #JDBC和Servlet联合起来使用的项目思路: 说明:建库,最好一开始设置utf8字符集 step1: 在数据库中建表 如   create table t_user{ ...... } step ...

  6. Solr在Linux中的安装

    在Linux下进行安装: 我已经将压缩包放在了虚拟机下面了,然后开始进行解压缩. tar -zxvf solr-4.10.3.tar 解压完会多一个文件夹.在bin目录下会有这样的一个目录, 其中的这 ...

  7. org.springframework.beans.factory.BeanCreationException,Invocation of init method failed,Context initialization failed

    G:\javaanzhuang\apache-tomcat-\bin\catalina.bat run [-- ::,] Artifact ssm_qingmu02_web:war exploded: ...

  8. BeanUtils工具的使用

    beanutils的下载地址:http://commons.apache.org/proper/commons-beanutils/download_beanutils.cgi 该压缩包有测试的代码: ...

  9. P1382 楼房

    P1382 楼房 每个矩形拆成2个坐标按$x$轴排序,蓝后$multiset$维护最高值. #include<iostream> #include<cstring> #incl ...

  10. tcp编程 示例

    #include <stdio.h> #include <sys/types.h> #include <sys/socket.h> #include <net ...