请求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()有类似功能

最后

以上就是失眠金针菇为你收集整理的请求WFS时的小技巧的全部内容，希望文章能够帮你解决请求WFS时的小技巧所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。