今天将为大家讲解一下，通过绘制多边形对GeoServer的WFS服务进行空间查询过滤。

一、查看工作区相关信息

进入GeoServer查看对应的WFS服务所在工作区的命名以及命名空间URL，我的服务如下所示

工作区表示

二、实现思路

1、对查询参数进行构造
srsName ----- 坐标系统
featureNS ----- 命名空间 URI
featurePrefix ----- 工作区命名
featureTypes ----- 查询图层
outputFormat ----- 输出格式
filter ----- 查询过滤方式，ol.format.filter.intersects为包含
geometry ----- 传入的geometry

2、完整参数如下

          var featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:4326', //坐标系统
                featureNS: 'opengis', //命名空间 URI
                featurePrefix: 'opengis', //工作区命名
                featureTypes: ['opengis:schoolPnt4326'], //查询图层，可以是同一个工作区下多个图层，逗号隔开
                outputFormat: 'application/json',
                filter: ol.format.filter.intersects('the_geom', geometry) //the_geom为该图层数据的空间字段
            });

其中 the_geom 字段为图层存储的geometry，请核对自身WFS服务的图层字段信息

3、使用fetch的post对WFS服务进行资源请求

        fetch('http://localhost:8086/geoserver/wfs', {
                method: 'POST',
                mode: 'cors',
                body: new XMLSerializer().serializeToString(featureRequest)
            }).then(function (response) {
                console.log(response);
                return response.json();
            }).then(function (json) {
                var features = new ol.format.GeoJSON().readFeatures(json);
                if (features.length == 0) {
                    layuiLayer.msg('没有数据');
                } else {
                    console.log(features);
                    resultSource.clear();
                    resultSource.addFeatures(features);
                    map.getView().fit(resultSource.getExtent());
                }

            }).catch(err => {
                console.log('请求错误', err);
            });

4、完整代码

          var featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:4326',//坐标系统
                featureNS: 'opengis',//命名空间 URI
                featurePrefix: 'opengis',//工作区名称
                featureTypes: ['opengis:schoolPnt4326'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
                outputFormat: 'application/json',
                filter: ol.format.filter.intersects('the_geom', geometry)
            });

            fetch('http://localhost:8086/geoserver/wfs', {
                method: 'POST',
                mode: 'cors',
                body: new XMLSerializer().serializeToString(featureRequest)
            }).then(function (response) {
                console.log(response);
                return response.json();
            }).then(function (json) {
                var features = new ol.format.GeoJSON().readFeatures(json);
                if (features.length == 0) {
                    layuiLayer.msg('没有数据');
                } else {
                    console.log(features);
                    resultSource.clear();
                    resultSource.addFeatures(features);
                    map.getView().fit(resultSource.getExtent());
                }}).catch(err => {
                console.log('请求错误', err);
            });

4、展示效果
在地图上绘制多边形，进行空间查询，如下所示，红色点位该WFS服务的所有点，蓝色点为多边形内查询结果。

空间查询效果