1 基本思路

(1) 首先利用鼠标交互或者自定义的坐标创建空间几何对象；

(2)拼接查询参数 利用new format.WFS().writeGetFeature方法拼接查询参数，其中的参数都来自于geoserver发布的wfs服务当中，可以在geoserver服务管理中查看，并填写

                                        
// 拼接查询参数
    var featureRequest = new format.WFS().writeGetFeature({
        srsName: 'EPSG:4326',
        featureNS: 'http://localhost:8080', //命名空间
        featurePrefix: 'sldDemo', //工作区域
        featureTypes: ['province'], //图层名
        outputFormat: 'application/json',
        geometryName: "the_geom",
        filter: new format.filter.Intersects('the_geom', geometry)
    });
                                        
                                    

其中空间查询最重要的部分是 filter参数，这里调用的是相交查询命令:new format.filter.Intersects('the_geom', geometry)

(3) 执行post请求，得到查询结果

(4) 将查询的json数据生成要素，并添加到地图就可以显示了

                                        
// 从geojson数据生成feature
var features = new ol.format.GeoJSON().readFeatures(json);
source1.addFeatures(features);
                                        
                                    

2 全部代码

                                        
import * as ol from 'ol';
import * as layer from 'ol/layer';
import * as source from 'ol/source';
import * as style from 'ol/style';
import * as format from 'ol/format'
import 'ol/ol.css';
var map = new ol.Map({
    target: 'map',
    layers: [
        new layer.Tile({
            source: new ol.source.OSM()
        }),
    ],
    view: new ol.View({
        center: [121.478815, 31.24161],
        zoom: 10,
        projection: 'EPSG:4326'
    })
});
var source1 = new source.Vector({
    wrapX: false
});
var vector1 = new layer.Vector({
    source: source1,
    style: new style.Style({
        fill: new style.Fill({
            color: 'rgba(37,241,239,0.2)'
        }),
        stroke: new style.Stroke({
            color: '#264df6',
            width: 2
        })
    })
});
map.addLayer(vector1);
var draw = new ol.interaction.Draw({
    source: source,
    type: 'Polygon',
    /*用于交互绘制图形时所设置的样式*/
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'yellow'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 5,
            stroke: new ol.style.Stroke({
                color: 'red'
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            })
        })
    })
});
map.addInteraction(draw);
draw.on("drawend", function (evt) {
    source.clear();
    var feature = evt.feature;
    var inputGeometry = feature.getGeometry();
    specialQuery(inputGeometry);
});


function specialQuery(geometry) {
    // 拼接查询参数
    var featureRequest = new format.WFS().writeGetFeature({
        srsName: 'EPSG:4326',
        featureNS: 'http://localhost:8080', //命名空间
        featurePrefix: 'sldDemo', //工作区域
        featureTypes: ['province'], //图层名
        outputFormat: 'application/json',
        geometryName: "the_geom",
        filter: new format.filter.Intersects('the_geom', geometry)
    });

    fetch('http://localhost:8080/geoserver/wfs', {
        method: 'POST',
        body: new XMLSerializer().serializeToString(featureRequest)
    }).then(function (response) {
        console.log(response.json());
        return response.json();
    }).then(function (json) {
        // 从geojson数据生成feature
        var features = new ol.format.GeoJSON().readFeatures(json);
        source1.addFeatures(features);
        map.getView().fit(source1.getExtent());
    });
}