请求WFS时的小技巧

请求WFS主要是为了实现查询功能，为了实现查询功能我做了多次尝试

官网的https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html
但是最后返回的json有问题，导致查询功能不能实现，分析为请求wfs的路径有问题
即featureNS: ‘http://host:8081/geoserver/DCampus/wfs’,
        featurePrefix: ‘WFS’,这两处

多种尝试无果后决定在研究geoserver，得到gml路径http://host:8081/geoserver/DCampus/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DCampus:cambuild&maxFeatures=50
将其转化为请求geojson数据http://host:8081/geoserver/DCampus/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DCampus:cambuild&outputFormat=application/json&srsName=epsg:3857
通过研究自己构建Filter的xml编码，终于实现了查询功能（QQ浏览器），写在了index.html中，这个也需要将服务器配置为允许跨源访问才能在chrome上用。

以下代码是用ajax获取geojson然后实现查询功能

$.ajax({
            // type:'POST',
       url:'http://host:8081/geoserver/DCampus/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DCampus:cambuild&FILTER=%3CFilter%3E%3CPropertyIsEqualTo%3E%3CPropertyName%3Ebname%3C/PropertyName%3E%20%3CLiteral%3E%E8%A5%BF%E7%A4%BC%E5%A0%82%3C/Literal%3E%3C/PropertyIsEqualTo%3E%3C/Filter%3E&outputFormat=application/json&srsName=epsg:3857',
       dataType:'json',
       success:function(data){var features = new ol.format.GeoJSON().readFeatures(data);
        vectorSource.addFeatures(features);
        map.getView().fit(vectorSource.getExtent());},
        })

用http://localhost:8081/geoserver/DCampus/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=DCampus:cambuild&FILTER=<Filter><PropertyIsEqualTo><PropertyName>bname</PropertyName>  <Literal>西礼堂</Literal></PropertyIsEqualTo></Filter>&outputFormat=application/json&srsName=epsg:3857可以获取西礼堂图块的geojson信息

注意写在代码中时，中文与一些特殊符号都必须转换格式，实测js用encodeURI(url);

ajax请求时url格式需要特别注意，除了encodeURI()，还有escape()和encodeURIComponent()有类似功能

转载自：https://blog.csdn.net/pengbostudio/article/details/86557454