OpenLayers3中wfs的属性查询

        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
              format: new ol.format.GeoJSON(),
              url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=test:行政区R&outputFormat=application/json&srsname=EPSG:4326'
            }),
          style: function(feature, resolution) {
            return new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: 'blue',
                width: 1
              })
            });
          }
        });
         vector.setOpacity(0.3);//设置透明度

          map.on('click',mapClick);
          //点击地图查询
          function mapClick(evt)
          {
              var coor=evt.coordinate;
              var lowx = coor[0]-0.0075;
              var lowy = coor[1]-0.0075;
              var upperx = coor[0]+0.0075;
              var uppery = coor[1]+0.0075;
          //    coor=coor.join(',');
              //注意这里，如果是查询，点或者线图形，一定要将coor先设置一个容差，，再去与图层叠加分析。不设置容差几乎就找不到了
              //图层的图形字段是geom，不同图层的图形字段都要自己先看下自己的，有的是the_geom，有的是shape等等，具体分析即可。
          //        var FILTER='<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>the_geom'+
           //      '</PropertyName><gml:Envelope srsName="EPSG:4326"><gml:lowerCorner>'+[coor[0]-0.0075,coor[1]-0.0075]+'</gml:lowerCorner>'+
 
           //         '<gml:upperCorner>'+[coor[0]+0.0075,coor[1]+0.0075]+'</gml:upperCorner></gml:Envelope></Intersects></Filter>';
          var FILTER= '<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>the_geom</PropertyName><gml:Envelope srsName="EPSG:4326">  <gml:lowerCorner>'+lowx+' '+lowy+'</gml:lowerCorner><gml:upperCorner>'+upperx+' '+uppery+'</gml:upperCorner></gml:Envelope></Intersects></Filter>';
              getFeature1({
                  typename:'test:行政区R',//查询的服务图层名称
                  filter:FILTER,//查询条件
                  srid:　'epsg:4326'
              });
              //开始显示弹窗
              $("#details").html("");
              var hdms = ol.coordinate.toStringHDMS(evt.coordinate);
              content.innerHTML = '<p>查询详情:</p><code>坐标：' + hdms +
              '</code>';
              overlay.setPosition(evt.coordinate);
               
          }
           var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:4326"});
           
 
          //请求wfs数据
          function getFeature1(options)
          {
              $.ajax({
                  url: 'http://localhost:8080/geoserver/wfs',
                  type: 'get',
                  data: {
                      service: 'WFS',
                      version: '1.1.0',
                      request: 'GetFeature',
                      typeNames: options.typename,
                      srsName: options.srid,
                      Filter:options.filter,
                      outputFormat: 'application/json'
                
                  },
                  success:function(data){
                      console.log(data);
                      var features=geojsonFormat.readFeatures(data);
                      console.log(features);
                      if(features[0] == null || features[0] == undefined){
                          return;
                      }
                      var json = features[0].H;
                      for(var key in json){
                          if(key == 'geometry'){
                                continue;
                            }
                            $("#details").append(
                                    "<tr><td style='width: 110px'>"+key+": </td><td style='width: 50%'>"+json[key]+"</td> </tr> "
                            );
                      }
                  },
                  error: function(){
                    alert("执行失败");  
                  }
              });
 
          }

          // 为地图注册鼠标移动事件的监听
          map.on('pointermove', function(event){
              //先移除样式
              var total = vector.getSource().getFeatures();
                for(var i in total){
                  total[i].setStyle(new ol.style.Style({
                      stroke: new ol.style.Stroke({
                            color: 'blue',
                            width: 1
                          })
                    }));
                }
          //获得鼠标移动上的feature
              map.forEachFeatureAtPixel(event.pixel, function(feature){
                                 //设置高亮显示填充颜色
                              feature.setStyle(new ol.style.Style({
                                  stroke: new ol.style.Stroke({
                                        color: 'yellow',
                                        width: 3,
                                      }),
                                  fill: new ol.style.Fill({
                                        color: 'yellow'
                                  })
                                   
                              }));
               });     
          })

<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">
<Intersects>
<PropertyName>the_geom</PropertyName>
<gml:Envelope srsName="EPSG:4326">     
<gml:lowerCorner>xxx yyy</gml:lowerCorner>
<gml:upperCorner>xxx yyy</gml:upperCorner>
</gml:Envelope>
</Intersects>
</Filter>

还有自定义多边形查询，

还有就是多多学习自己写Filter，需要的参数学习可以看下http://www.gisvip.com/bbs/forum.php?mod=viewthread&tid=2723

转载自：https://blog.csdn.net/qq_35915384/article/details/54410403