Openlayers5 + Geoserver 实现wfs的属性查询与空间查询

简介：使用Openlayers5.3,通过Geoserver实现wfs服务矢量的查询

参考官方例子：https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html

我的Geoserver工作区截图如下，命名空间URI可以自定义，后面要用。

属性查询代码如下：

//首先定义一个空的矢量图层，设置样式并添加到当前map中
	var vectorSource = new ol.source.Vector;
    var vector = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'white'
            }),
            stroke:new ol.style.Stroke({
                color: 'red',
                width:1
            })
        })
    });
    map.addLayer(vector);

	//设置查询参数与条件
    var featureRequest = new ol.format.WFS().writeGetFeature({
        srsName: 'EPSG:3857',//坐标系统
        featureNS: 'http://geoserver.org/nw',//命名空间 URI
        featurePrefix: 'nationalwater',//工作区名称
        featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
        outputFormat: 'application/json',
        filter: ol.format.filter.equalTo("RS_CODE1","110109000001")//前者是属性名，后者是对应值
    });

    fetch('http://localhost:8081/geoserver/' + 'wfs', {//geoserver wfs地址如localhost:8080/geoserver/wfs，我是8081
        method: 'POST',
        body: new XMLSerializer().serializeToString(featureRequest)
    }).then(function(response) {
        return response.json();
    }).then(function(json) {
        var features = new ol.format.GeoJSON().readFeatures(json);
        vectorSource.addFeatures(features);
        map.getView().fit(vectorSource.getExtent());//缩放到查询出的feature
    });

空间查询的代码以Intersect为例。geometry为你希望与之做查询的图层要素的几何，可由 feature.getGeomtry()获得 （feature可由YourLayer.getSource().getFeatures() 获得）

	filter: ol.format.filter.intersects(//查询过滤条件
                    'the_geom',//
                    geometry//
            )

更多filter请参考官方文档 https://openlayers.org/en/latest/apidoc/module-ol_format_filter.html