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());
});
————————————————
版权声明：本文为CSDN博主「带着天使反上帝 – Kaybee」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_25295611/article/details/79044855