使用 Openlayers/Geoserver 从我的 WFS 源更改 srsName

Question

我目前正在将 WFS 与 Openlayers 一起使用，但图层位置错误，如果我是对的，问题来自 srsName 但如何更改它？

这是我的 WFS 代码：

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

var WFSLayer = new VectorLayer({
  source: WFSSource
});

我在 WMS 上遇到了同样的问题，但我只是在 Geoserver ( EPSG:2154 ) 上更改了 SRC natif，一切正常。 现在我有同样的问题，给我以下结果

几何形状应该在该国的底部。 我认为 VectorSource 有一个默认的 srsname，但我不知道如何更改它。 顺便说一句，在这个链接上： https : //openlayers.org/en/latest/examples/vector-wfs.html他们展示了如何使用 WFS，他有这行代码：

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';

},

他在那里定义了 srsName 但对我不起作用。

- - - 更新 - - -

在检查这里的投影后，我发现了：

• 我的地图有默认投影 -> 代码："EPSG:3857"，单位：米

• 我的 TileWMS 没有设置，但文档说参数是动态设置的。 东西在 Geoserver 上，我使用“EPSG:2154”，但地图和这个 TileWMS 完美匹配，我不明白如何。

• 我的 VectorSource 有格式 -> dataProjection -> 代码："EPSG:4326"，单位：度

现在我试图弄清楚如何用相同的投影来放置所有东西，但我很挣扎。

如果我使用“EPSG:2154”（我在 Geoserver 中的图层的本机 SRC）更改地图投影，则会出现以下错误：无法读取 null 的属性“getExtent”。

如果我尝试更改我的 VectorSource 投影，什么也不会发生，我的 VectorSource 会停留在“EPSG:4326”中

var WFSSource = new VectorSource({
  format: new GeoJSON(),
  url: function(extent) {
    return 'http://localhost:8081/geoserver/occi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=occi%3Aocci&maxFeatures=5&outputFormat=application%2Fjson';
  },
  projection : "EPSG:2154",
  strategy: bboxStrategy
});

Answer 1

ol/Source 和 ol/View 有投影。 默认投影为 EPSG:3857。 如果您的数据或底图与 EPSG:3857 不同，则您应该定义它。

import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

const map = new Map({
  layers: [
    new VectorLayer({
        source: new VectorSource({
            projection: 'EPSG:3857',
        })
    })
  ],
  target: 'map',
  view: new View({
    projection: 'EPSG:3857',
  })
});