在 ol 6.4 中使用 WFS 层

Question

我正在尝试使用 WFS 和 openlayers 显示来自我的地理服务器的多边形要素和 OSM 底图

图层名称：utmzones
本机 SRS：EPSG:4326
工作区名称：utmzone（启用 WFS 服务）
命名空间 URI：www.hamid1.com（实际上不存在！）
地理服务器url：localhost:8080/地理服务器

使用下面提到的代码，浏览器中显示了 OSM 图层，但我看不到多边形图层。

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

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      'http://localhost:8080/geoserver/wfs?service=WFS&' +
      'version=1.0.0&request=GetFeature&typename=utmzone:utmzones&' +
      'outputFormat=application/json&srsname=EPSG:4326&' +
      extent.join(',') +
      ',EPSG:4326'
    );
  },
  strategy:all,
});

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


var raster =new TileLayer({
    source: new OSM(),
  });

var map = new Map({
  layers: [raster, vector],
  target: document.getElementById('map'),
  view: new View({
    center: [0 , 0],
    maxZoom: 19,
    zoom: 1,
  }),
});

每次加载地图时，此消息都会显示在地理服务器日志中：

24 Oct 20:46:04 INFO [geoserver.wfs] -
Request: getServiceInfo
24 Oct 20:46:04 INFO [geoserver.wfs] -
Request: getFeature
    service = WFS
    version = 1.0.0
    baseUrl = http://localhost:8080/geoserver/
    query[0]:
        srsName = EPSG:4326
        typeName[0] = {www.hamid1.com}utmzones
    outputFormat = application/json
    resultType = results
24 Oct 20:46:04 INFO [wfs.json] - about to encode JSON

geoserver 似乎收到请求并已发送响应，但我在 web 地图上看不到地图项。

WMS可以看到特征，但是使用gefeatureinfo也有同样的问题url

我想知道是否有人可以帮助我解决这个问题。

Answer 1

使用策略 all，您将请求 bbox=-Infinity,-Infinity,Infinity,Infinity，这不是必需的并且可能会被服务器拒绝。您可以用一个简单的字符串替换 url 函数：

url: 
  'http://localhost:8080/geoserver/wfs?service=WFS&' +
  'version=1.0.0&request=GetFeature&typename=utmzone:utmzones&' +
  'outputFormat=application/json&srsname=EPSG:4326',

使用 GeoJSON 格式时，结果应自动转换为视图投影。

Answer 2

终于找到主要问题了运行网页后，浏览器控制台显示如下信息，而我却毫无察觉

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/rest/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). and it resolved by Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/rest/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

并通过取消注释地理服务器目录中 web.xml 文件中的 crossOrigin 行来解决此页面对我有帮助：

https://docs.geoserver.org/latest/en/user/production/container.html

在 ol 6.4 中使用 WFS 层

using WFS layer in ol 6.4

javascript

geoserver

openlayers