OL3实现空间查询的代码示例

前言：在左开发的时候我们会用到空间查询，尤其在poi范围内的查询，该功能在arcgis api中有专门的类封装该功能，OL3和OL4中针对WFS服务，也可以实现该功能，需要结合WFS 和Filter共同完成。先看张图片：

空间查询示例：青海、西藏、新疆

一、代码示例

            $("#boxQuery").on("click", function () {
                Draw();
            });
            function getQuery(geometry) {
                // 创建一个请求
                var featureRequest = new ol.format.WFS().writeGetFeature({
                    srsName: 'EPSG:4326',//坐标系
                    featureNS: 'http://www.opengeospatial.net/cite',// 注意这个值必须为创建工作区时的命名空间URI
                    featurePrefix: 'cite',//工作区的命名
                    featureTypes: ['bou2_4p '],//所要访问的图层
                    maxFeatures: 5000,
                    outputFormat: 'application/json',
                    filter: new ol.format.filter.Intersects('geom',geometry)
                });

                // 发送请求
                fetch('http://localhost:8080/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);
                });
            }
            function Draw() {
                draw = new ol.interaction.Draw({
                    type: "Polygon",
                    wrapX: false,
                    active: true,
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#ffcc33',
                             2
                        }),
                        image: new ol.style.Circle({
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#ffcc33'
                            })
                        })
                    })
                });
                map.addInteraction(draw);
                draw.on("drawend", function (evt) {
                    var feture = evt.feature;
                    var inputGeometry = feture.getGeometry();
                    getQuery(inputGeometry);
                });
            }

用的过滤条件是 ol.format.filter.Intersects

二、可能出现的错误

一直出现错误：“org.geoserver.wfs.WFSException: Illegal property name: geometry for feature type”。后来经过仔细研究接口，发现查询参数设置中，ol.format.filter.intersects接口中的"geometryName"中的属性名称不能任意填写，而是必须填写WFS相关数据源中空间属性字段名称，故将 ol.format.filter.intersects接口中的geometryName设置成空间字段名称“geom”则查询正常