请求WFS时的小技巧

最新推荐文章于 2024-11-20 20:03:00 发布

pengbostudio

最新推荐文章于 2024-11-20 20:03:00 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： openlayers

本文链接：https://blog.youkuaiyun.com/pengbostudio/article/details/86557454

openlayers 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在请求WFS服务时遇到的问题，包括返回的JSON数据导致查询功能无法实现。通过深入研究Geoserver，找到了正确的GML和GeoJSON数据路径。通过构建XML Filter并使用Ajax获取GeoJSON信息，最终成功实现了查询功能，特别是在处理中文和特殊符号的编码问题上提出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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