如何使用OpenLayer和WFS过滤特征

Question

我可以从geojson文件(由GeoServer WFS层类型生成(中提取数据，并使用OpenLayer在浏览器上显示。但当我只想显示具有某些功能(即过滤(的数据时，我就面临着问题。

我的JSON文件名->gpr.geojson
GeoServer层名称->可视化：gpr
属性过滤器->branchCode=N01821和routeCode=0650

我遵循了来自https://www.giserdqy.com/wp-content/guids/ol-v4.6.5/examples/vector-wfs-getfeature.html我也尝试过使用CQL_FILTER，但完全没有成功

下面是我的代码，过滤不起作用

var mymap = new ol.Map({
target: 'mapid',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
//Vworld Tile 변경
url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: ol.proj.transform([128.1591, 36.4109], 'EPSG:4326', 'EPSG:3857'),
zoom: 8,
minZoom: 6,
maxZoom: 19
}),
logo:false
});
var vectorSource = new ol.source.Vector({
url: './data/GPR.geojson,
format: new ol.format.GeoJSON()
})
var layer = new ol.layer.VectorImage({
source: vectorSource,
visible: true,
})
// generate a GetFeature request
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:3857',
featureNS: 'visualization',
featurePrefix: 'osm',
featureTypes: ['GPR'],
outputFormat: 'application/json',
filter: ol.format.filter.and(
ol.format.filter.like('branchCode', 'N01821'),
ol.format.filter.equalTo('routeCode', '0650')
)
});
// then post the request and add the received features to a layer
fetch('http://localhost:8080/geoserver/visualization/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);
mymap.getView().fit(vectorSource.getExtent());
});

使用传单、WMS和CQL过滤器非常简单，如下所示。如何使用OpenLayer和WFS？

var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/visualization/wms", {
layers: 'visualization:GPR',
format: 'image/png',
transparent: true,
CQL_FILTER:  "branchCode='N01821'"

Answer 1

您仍然可以在OL中使用请求和CQL_FILTER，就像您的传单示例一样，类似于

$.ajax({
method: 'POST',
url: 'http://localhost:8080/geoserver/visualization/wfs',
data: {
"service": "WFS",
"request": "GetFeature",
"typename": "visualization:GPR",
"outputFormat": "application/json",
"srsname": "EPSG:3857",
"maxFeatures": 50,
"CQL_FILTER": "branchCode='N01821'"
},
success: function (response) {
var features = new ol.format.GeoJSON().readFeatures(response);
vectorSource.addFeatures(features);
mymap.getView().fit(vectorSource.getExtent());
},
fail: function (jqXHR, textStatus) {
console.log("Request failed: " + textStatus);
}
});

如果你更喜欢使用fetch，我认为这应该有效，

let featureRequest  = {
"service": "WFS",
"request": "GetFeature",
"typename": "visualization:GPR",
"outputFormat": "application/json",
"srsname": "EPSG:3857",
"maxFeatures": 50,
"CQL_FILTER": "branchCode='N01821'"
};
fetch('http://localhost:8080/geoserver/visualization/wfs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(featureRequest)
}).then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(reponse);
vectorSource.addFeatures(features);
mymap.getView().fit(vectorSource.getExtent());
});