在ol 6.4中使用WFS层

Question

我正在尝试使用WFS和openlayers从我的geoserver显示多边形功能和OSM底图

1. 图层名称：utm区
2. 本地SRS： EPSG： 4326
3. 工作区名称：utmzone（启用WFS服务）
4. 命名空间URI：www.hamid1.com（不存在真的！）
5. geoserver url：localhost:8080/geoserver

使用下面提到的代码，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,
  }),
});

每次加载地图时，geoserver日志中将显示以下消息：

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接收到请求和响应已经发送，但我不能在网络地图上看到该功能。

WMS可以看到该功能，但使用gefeatureinfourl也存在同样的问题

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

Answer 1

最后我发现了主要问题运行网页后，浏览器控制台显示了以下消息，我没有意识到

跨源请求阻塞：同源策略不允许读取远程资源在http://localhost:8080/geoserver/rest/.（原因：CORS头'访问-控制-允许-起源'丢失）。-plhd--1/>（原因：缺少CORS头访问-控制-允许-起源）。

它通过在web中取消注释交叉原点线来解决。geoserver Directority中的xml文件此页面帮助我：

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

Answer 2

使用策略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格式时，结果应自动转换为视图投影。