Openlayers3 请求Geoserver带Filter的WFS查询

官方例子在这：http://openlayers.org/en/latest/examples/vector-wfs-getfeature.html?q=wfs

openlayers3 将基于OGC规范的 WFS查询封装了一下，所以不用去写 XML规范的请求，或者在url上拼接cql_filter= ，还要处理字符编码的问题。

                //TODO WFS 查询要素TEST

                var vectorSource = new ol.source.Vector();
                var vector = new ol.layer.Vector({
                    source: vectorSource,
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: 'rgba(0, 0, 255, 1.0)',
                            width: 2
                        })
                    })
                });
                map.addLayer(vector);

                // generate a GetFeature request
                var featureRequest = new ol.format.WFS().writeGetFeature({
                    srsName: 'EPSG:3857',
                    featureNS: 'http://www.ztbr.com',    //命名空间
                    featurePrefix: 'zbtr',               //工作区域
                    featureTypes: ['yanqing18jd'],       //图层名
                    outputFormat: 'application/json',
                    filter:
                        ol.format.filter.equalTo('街道', '百泉街道')    //todo 条件查询过滤
                });

                // then post the request and add the received features to a layer
                fetch('http://localhost:8082/geoserver/wfs', {
                    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());
                });

转载自：https://blog.csdn.net/sinat_25295611/article/details/79044855