OpenLayers实现根据属性过滤和空间过滤

1.最近和geoserver的过滤器杠上了，普通的cql_filter倒是可以，但是遇到gml样式的复杂过滤，官网api介绍的很少，奶奶的看不懂，网上的又胡写乱写，走不通，偶然发现ol提供了这个功能，写好后直接就能生成过滤条件，遂记录之。

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

Fred240011 2019-03-07 21:26:10  1500  收藏 4

版权

简介：使用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

————————————————

版权声明：本文为CSDN博主「Fred240011」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/fred240011/article/details/88321234