Openlayer4的wfs属性查询和空间查询遇到的坑

项目需求是在特定的区域下搜索地物，类似地理围栏里查找POI的功能。而且要求通过图层叠加的方式，不能直接访问数据库然后遍历绘制。这里创建了VectorLayer，网上例子很多就不再赘述，下面是引用官网提供的Example，通过fetch（类似ajax）请求，请求wfs的服务实现。

本文是记录下当时遇到的坑。查询部分的代码如下： 

           //测试用的geometry类型数据 （Polygon）
           var newPoly =new ol.geom.Polygon([[
                [119.89817,31.91181],                    
                [119.81655,31.85485],
                [119.95809,31.84721],
                [119.89817,31.91181]]]);
            //创建字符过滤器 可以过滤字段 添加%%可以模糊查询
            var fcodeFilter = ol.format.filter.equalTo('fcode', value)
            //创建空间过滤器 可以查询特定区域下的数据
            var areaFilter =  ol.format.filter.intersects(
                'points',
                newPoly
            )
            //来自官网Example
            // generate a GetFeature request
            let featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:4326',
                featureNS: 'www.coconut.com',    //命名空间
                featurePrefix: 'coconut',               //工作区域
                featureTypes: ['coconut:stats_feature_info'],       //图层名
                outputFormat: 'application/json',
                filter:
                    // fcodeFilter
                    //     areaFilter
                    //组合两种过滤器
                    new ol.format.filter.and(fcodeFilter,areaFilter)    //todo 条件查询过滤

            });

            // then post the request and add the received features to a layer
            fetch('http://172.16.100.103:8000/geoserver/wfs', {
                method: 'POST',
                body: new XMLSerializer().serializeToString(featureRequest)
            }).then(function(response) {
                return response.json();
            }).then(function(json) {
                features = new ol.format.GeoJSON().readFeatures(json);
                if(features.length === 0){
                    layer.msg('此区域暂无相关地物数据！',{icon:2});
                    return;
                }
                vectorSource.addFeatures(features);
                facilities.set(value,features);
                map.getView().fit(vectorSource.getExtent());
            });

        }

网上Openlayer例子真的很少，讲的也不够清晰，按照网上例子修改多次。但是查询报错，关键卡在了response.json()这里，总是报返回的数据转json失败。

有两个坑：

一。intersects filter下geometryName一定要和你的数据源geometry类型对应的字段匹配上，如楼主的数据源对应geometry字段为points，则filter第一个参数为points！！！切记！！

二。filter写完后，在json那块不停报错，数据也无法显示。查了半天的资料，最后通过自带的Filter语句找到报错原因，输入下面请求后报错，才知道是SRID的问题，数据库导入geometry类型。

通过http请求查询WFS数据语句如下：

http://172.16.100.103:8000/geoserver/coconut/ows?service=WFS&version=1.0.0
&request=GetFeature
&typeName=coconut:stats_feature_info
&maxFeatures=50
&outputFormat=application%2Fjson
&filter=  
  
    
	points
	  
         
	   
          119.89817,31.91181 119.81655,31.85485 119.95809,31.84721 119.89817,31.91181 
     
         
 		
    

报错如下：

      org.postgresql.util.PSQLException:错误: Operation on mixed SRID geometries

查阅得知需要修改postgis的SRID字段，因为当时导入数据的同事没有设置坐标系，所以无法搜索出数据。进入Postgis数据库，输入：

      select st_srid(points) from stats_khb_surface_features_info  //查询SRID
      update stats_khb_surface_features_info set points =st_geomfromtext(ST_AsText(points),4326)//修改为4326

完成上面步骤后。数据正常显示，终于可以查看某类数据某个区域下的显示效果：

以上！解决！