首页 > 解决方案 > 在 OpenLayers 手绘边界框中显示 WFS 返回的特征

问题描述

我允许用户绘制特征,并且在 drawend 上我需要向我的 WFS 服务发出请求以返回特征。

我可以让 WFS 根据使用范围返回数据:

let vectorSource = new VectorSource({
                format: new GeoJSON(),
                url: function(extent) {
                    return 'https://example/wfs' +
                        '?key=key' +
                        '&SERVICE=WFS' +
                        '&REQUEST=GetFeature' +
                        '&TYPENAMES=data_point' +
                        '&SRSNAME=urn:ogc:def:crs:EPSG::27700' +
                        '&BBOX=' + extent.join(',') + ',urn:ogc:def:crs:EPSG::27700';

                },
                strategy: bboxStrategy
            });

但是,尽管将此源注入图层并将图层注入地图,但我无法显示这些功能。

我可以使用以下方式显示所有功能:

        fetch('example/wfs?key=key', {
        method: 'POST',
        body: new XMLSerializer().serializeToString(featureRequest)
    }).then(function(response) {
        return response.text();
    }).then(function(gml) {
        console.log(gml);
        let features = new GML().readFeatures(gml);
        vectorSource.addFeatures(features);
        map.getView().fit(vectorSource.getExtent());
    });

但是,我一生无法弄清楚如何将此请求中请求的数据限制在四个坐标的边界框中。

潜在地,这可能是一个无限的指向几何图形,它将充当显示数据的千篇一律的工具。

我的搜索没有结果。

标签: openlayersbounding-boxopenlayers-5web-feature-service

解决方案


在这两种情况下,您似乎都非常接近。

在顶部片段中,您可以记录任何特征及其几何形状以确认是否正在加载任何特征,如果是,为什么它们没有出现在预期的位置(例如,当视图为 EPSG:27700 时,几何坐标为 lon/lat 值)

setTimeout(function(){
  console.log(vectorSource.getFeatures());
  vectorSource.getFeatures().forEach(function(feature){console.log(feature.getGeometry());});
}, 10000);

在第二个片段中,如果其他一切正常,我认为您需要将 bbox 数组添加到调用featureRequest中使用的对象serializeToString,或者更改传递数据的方式。

这是一个类似的 WFS 示例,您可以在其中使用查看源代码。它同样适用于 WFS 或 GML 作为格式。当视图与数据http://mikenunn.16mb.com/demo/wfs-italy-4326.html的投影相同时,使用 url 函数就足够了。但与 GeoJSON 等格式不同,OpenLayers 不会自动重新投影要素以查看 GML 或 WFS 的投影。使用不同的投影http://mikenunn.16mb.com/demo/wfs-italy-3857.html需要一个加载器函数来重新投影特征几何,否则意大利各省最终会在大西洋 [0,0 ]。


推荐阅读