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

简介:使用Openlayers5.3,通过Geoserver实现wfs服务矢量的查询

参考官方例子:https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html

我的Geoserver工作区截图如下,命名空间URI可以自定义,后面要用。
Openlayers5 + Geoserver 实现wfs的属性查询与空间查询_第1张图片
属性查询代码如下:

//首先定义一个空的矢量图层,设置样式并添加到当前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

你可能感兴趣的:(Openlayers5 + Geoserver 实现wfs的属性查询与空间查询)