在 ol 6.4 中使用 WFS 层答案

【问题标题】：using WFS layer in ol 6.4在 ol 6.4 中使用 WFS 层
【发布时间】：2020-10-24 17:46:55
【问题描述】：

我正在尝试使用 WFS 和 openlayers 从我的地理服务器显示多边形特征和 OSM 底图

图层名称：utmzones
本机 SRS：EPSG:4326
工作区名称：utmzone（已启用 WFS 服务）
命名空间 URI：www.hamid1.com（真的不存在！）
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 似乎收到了请求并发送了响应，但我在 web 地图上看不到该功能。

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

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

【问题讨论】：

如果放大，您可能会在 [0, 0] 的 180 米范围内找到您的要素。您的视图是 EPSG:3857，如果服务器支持对 EPSG:3857 的请求，您应该更改 url 以反映这一点，否则您将需要一个加载器函数来转换几何图形。使用 strategy all 您不需要 url 函数来包含范围，因为它是无限的，但是对于其他策略，如果它们不同，您还需要将范围从视图投影转换为请求投影。
感谢回复 mike 为了防止地图上的数据丢失，我使用了一个非常大的 vactor 文件，它几乎覆盖了地球表面的一半！地图上什么都没有显示
如果请求无效，则不会显示任何内容，并且可能太小而无法查看数据是否在错误的投影中。
我更改了 url，但没有任何改变，并试图将视图的投影更改为 'EPSG:4326' 结果相同，是不是我在层或工作区配置中有错误？

标签： javascript openlayers geoserver

【解决方案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 格式时，结果应自动转换为视图投影。

【讨论】：

【解决方案2】：

我终于找到了主要问题运行网页后，浏览器控制台显示如下信息，我不知道

跨源请求被阻止：同源策略不允许读取位于 http://localhost:8080/geoserver/rest/ 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。并由 Cross-Origin Request Blocked: The Same Origin Policy disallows read the remote resource at http://localhost:8080/geoserver/rest/ 解决。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

它通过在 geoserver 目录中的 web.xml 文件中取消注释 crossOrigin 行来解决这个页面帮助了我：

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

【讨论】：