javascript - openlayers crossOrigin参数使图层消失

Question

这真的是我在 openlayers 中见过的奇怪行为。

我创建了一个 jsfiddle来证明这个问题。

奇怪的行为是:只要我将参数 crossOrigin 添加到我的层，层就消失了，你可以在 jsfiddle 中尝试(你需要再次启用 crossOrigin 参数)。或者在下面查看:

var map = new ol.Map({
  target: 'map',
  layers: [

  ],
  view: new ol.View({
    projection: 'EPSG:4326',
    maxZoom: 25,
    center: [8.86, 54.13],
    zoom: 10,
  })
});

var wmsSource = new ol.source.TileWMS({
    preload: Infinity,
  url: 'http://service.gdi-sh.de/WMS_SH_BDDcol_KF?',
  params: {
    'LAYERS': 'DTK5col,DTK25col,DTK50col,DTK100col,UEK250,UEK600,UEK1500',
    'TILED': true,
    'STYLES': new String(''),
    'FORMAT': 'image/jpeg',
    'SRS': 'EPSG:4326',
    'VERSION': '1.1.1'
  },
  serverType: 'geoserver',
  //crossOrigin: 'anonymous' //<-- as soon as I enable this line, the layer dissappers
});

var wmsLayer = new ol.layer.Tile({
    source: wmsSource
})

map.addLayer(wmsLayer);

我需要 crossOrigin 参数来避免 forEachLayerAtPixel() 的另一个问题:

https://gis.stackexchange.com/questions/269937/openlayers-4-method-foreachlayeratpixel-throws-securityerror-the-operation-is

解决方案是简单地将 crossOrigin 参数添加到我的所有层，这对我拥有的所有其他层都有效，但仅对于这一层，它使得图层消失。

更有趣:如果我在 firefox 上打开 debbug 并看到对服务器发出的请求。它的状态为 200，所有 img 都已成功加载(您甚至可以在网络分析中看到 img)

所以我想知道，如果图层可以加载并且图片在那里，是什么让图层消失了？一旦我取消了带有 crossOrigin 的行，一切正常。

Answer 1

当 WMS 服务器未启用 CORS，或者您尝试从 https 应用程序访问 http 服务器 url 时，就会发生这种情况。您仍然可以在没有 crossOrigin 参数的情况下加载它，但图像会被污染。首先尝试将 WMS url 从 http 更改为 https，但如果这不起作用，您将需要使用同源(或启用 CORS)代理。为确保正确传递 WMS 参数，您需要在加载时对图 block url 进行 URI 编码，例如:

var wmsSource = new ol.source.TileWMS({
    preload: Infinity,
  url: 'http://service.gdi-sh.de/WMS_SH_BDDcol_KF?',
  params: {
    'LAYERS': 'DTK5col,DTK25col,DTK50col,DTK100col,UEK250,UEK600,UEK1500',
    'TILED': true,
    'STYLES': new String(''),
    'FORMAT': 'image/jpeg',
    'SRS': 'EPSG:4326',
    'VERSION': '1.1.1'
  },
  serverType: 'geoserver',
  crossOrigin: 'anonymous',
  tileLoadFunction: function(imageTile, src) {
    imageTile.getImage().src = 'myproxy.php?url=' + encodeURIComponent(src);
  }
});

我现在已经检查了您正在使用的 WMS 服务 - 它未在 http 或 https 中启用 CORS，因此您肯定需要使用代理。