geoserver - 如何在 OpenLayers 6 中显示 WFS？

Question

我试图在 OpenLayers 6.3.1 中将矢量图层显示为来自本地 GeoServer 的 WFS。当我尝试添加新的矢量图层时，在地图上我只看到底图。然而，GeoServer 上的所有数据都有投影 EPSG:3857。如何解决这个问题？我的代码：

 var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function(extent) {
    return 'http://localhost:8080/geoserver/geodata/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geodata%3Amlink&maxFeatures=50&outputFormat=application%2Fjson';
        
  },
  
  strategy: bboxStrategy,
});


var vector = new VectorLayer({
  source: vectorSource
});




var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(), //projection: 'EPSG:3857',
      opacity: 0.7
    }),
    vector],
    target: document.getElementById('map'),
  view: new View({
    //projection: 'EPSG:3857',
    center: [6181942.5743,7443423.3883],
    zoom: 11
    //maxZoom: 19,
    //zoom: 12
  })
});