使用 Geoserver 和 Openlayers 6 显示 WFS 图层

Question

我正在尝试从 Geoserver 加载和显示 wfs 图层以显示在底图上

当我使用 openlayers 示例页面提供的此代码时，它工作正常：

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import {Stroke, Style} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
import 'ol/ol.css';
import OSM from 'ol/source/OSM';

const vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      'https://ahocevar.com/geoserver/wfs?service=WFS&' +
      'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
      'outputFormat=application/json&srsname=EPSG:3857&' +
      'bbox=' +
      extent.join(',') +
      ',EPSG:3857'
    );
  },
  strategy: bboxStrategy,
});

const vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2,
    }),
  }),
});

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),vector
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

问题是当我尝试从我的 GeoServer 获取一个图层（例如 topp:population）时，它不起作用。例如，当我写：

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import {Stroke, Style} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
import 'ol/ol.css';
import OSM from 'ol/source/OSM';

const vectorSource = new SourceVector({
  format: new GeoJSON(),
  url: function(extent) {
    return 'http://localhost:8081/geoserver/ows?service=WFS&' +
        'version=1.1.0&request=GetFeature&typeName=topp:population&' +
        'maxfeatures=50&outputformat=json&srsname=EPSG:4326&' +
        'bbox=' + extent.join(',') + ',EPSG:4326';
  },
  strategy: bboxStrategy,
});

const vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2,
    }),
  }),
});

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),vector
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

我的问题是如何让它发挥作用