openlayers - WFS 无法作为 GeoJSON 插入 OpenLayers 地图

Question

我想在我的 OpenLayers 地图中插入一个 WFS 图层。我按照此示例中的说明进行操作：https ://openlayers.org/en/latest/examples/vector-wfs.html

当我运行我的代码时，会发生以下错误：

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    Ey JSONFeature.js:193
    readFeatures JSONFeature.js:63
    onload featureloader.js:88
    Uh featureloader.js:67
    Wh featureloader.js:129
    o Vector.js:888
    loadFeatures Vector.js:900
    prepareFrame VectorLayer.js:483
    render Layer.js:240
    renderFrame Composite.js:119
    ki PluggableMap.js:1169
    Oi PluggableMap.js:197
    render PluggableMap.js:1090
    Zi PluggableMap.js:937
    dispatchEvent Target.js:116
    notify Object.js:180
    set Object.js:214
    setSize PluggableMap.js:1217
    updateSize PluggableMap.js:1266
    $i PluggableMap.js:1002
    dispatchEvent Target.js:116
    notify Object.js:180
    set Object.js:214
    setProperties Object.js:227
    n PluggableMap.js:342
    n Map.js:87
    init main.js:48
    EventHandlerNonNull* main.js:1
JSONFeature.js:193:26
    Ey JSONFeature.js:193
    readFeatures JSONFeature.js:63
    onload featureloader.js:88
    (Async: EventHandlerNonNull)
    Uh featureloader.js:67
    Wh featureloader.js:129
    o Vector.js:888
    loadFeatures Vector.js:900
    prepareFrame VectorLayer.js:483
    render Layer.js:240
    renderFrame Composite.js:119
    ki PluggableMap.js:1169
    Oi PluggableMap.js:197
    <anonym> self-hosted:1175
    (Async: FrameRequestCallback)
    render PluggableMap.js:1090
    Zi PluggableMap.js:937
    dispatchEvent Target.js:116
    notify Object.js:180
    set Object.js:214
    setSize PluggableMap.js:1217
    updateSize PluggableMap.js:1266
    $i PluggableMap.js:1002
    dispatchEvent Target.js:116
    notify Object.js:180
    set Object.js:214
    setProperties Object.js:227
    n PluggableMap.js:342
    n Map.js:87
    init main.js:48
    (Async: EventHandlerNonNull)
    <anonym> main.js:1

可以加载 OSM 层，但不能加载 WFS。我跟踪了请求的 WFS URL 的响应。反应很好。我猜在将 gml 响应转换为 GeoJSON 时存在问题。你有什么提示吗？我的 main.js 看起来像这样：

window.onload = init;

// **************************
//      Initialize map view
// **************************
function init () {

    // Set coordinate system
    var projname = 'EPSG:25832';
    proj4.defs (projname, '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
    ol.proj.proj4.register (proj4);

    // Initialize start view with Germany as center
    var startview = new ol.View ({
        projection: projname,
        center: ol.proj.transform ([10.5, 51], 'EPSG:4326', projname),
        zoom: 5,
        minzoom: 5,
        extent: ol.proj.transformExtent([4, 46, 16, 56], 'EPSG:4326', projname)
    })

    //Initialize city layer
    const citiesSource = new ol.source.Vector ({
        format: new ol.format.GeoJSON(),
        url: function (extent) {
            return (
                'http://localhost:8082/geoserver/wfs?' +
                'SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&' +
                'TYPENAMES=staedte:staedte&' +
                'SRSNAME=urn:ogc:def:crs:EPSG::25832&' +
                'BBOX=' + extent.join(',') + ',' + projname
            );
        },
        strategy: ol.loadingstrategy.bbox,
    });

    const cities = new ol.layer.Vector ({
        source: citiesSource,
        style: new ol.style.Style ({
            stroke: new ol.style.Stroke ({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2,
            }),
        }),
    });

    // Initialize map
    const map = new ol.Map ({
        view: startview,
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            cities
        ],
        target: 'js-map'
    })
}

标签： openlayersgeojsonopenlayers-6web-feature-service