javascript - 如何使用 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());
});

使用 Leaflet、WMS 和 CQL Filter 非常简单，如下所示。如何使用 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

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

$.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());
});