This is realy a stange behavior I have ever seen with openlayers.

I created a jsfiddle to demonstrate the issue.

The strange behavior is: as soon as I add the parameter crossOrigin to my layer, the layer just disappears, you can try it in the jsfiddle (You need to enable the crossOrigin parameter again). Or see it below:

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: '?',
  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);

I need the crossOrigin parameter to avoid another problem with forEachLayerAtPixel():

The solution is simply to add the crossOrigin parameter to all my layers and which works fine for all the other layers I have, but only for this layer, it makes the layer dissappear.

More interesting: If I open the debbug on firefox and see the request made to the server. It has status 200 and all the imgs are successfully loaded (you can even see the img in the network analyse)

So I am wondering, if the layer can be loaded and the pics are there, what makes the layer disappear? As soon as I cancel the line with crossOrigin, all the things go normal.

This is realy a stange behavior I have ever seen with openlayers.

I created a jsfiddle to demonstrate the issue.

The strange behavior is: as soon as I add the parameter crossOrigin to my layer, the layer just disappears, you can try it in the jsfiddle (You need to enable the crossOrigin parameter again). Or see it below:

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

I need the crossOrigin parameter to avoid another problem with forEachLayerAtPixel():

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

The solution is simply to add the crossOrigin parameter to all my layers and which works fine for all the other layers I have, but only for this layer, it makes the layer dissappear.

More interesting: If I open the debbug on firefox and see the request made to the server. It has status 200 and all the imgs are successfully loaded (you can even see the img in the network analyse)

So I am wondering, if the layer can be loaded and the pics are there, what makes the layer disappear? As soon as I cancel the line with crossOrigin, all the things go normal.

• javascript
• openlayers
• openlayers-3

2 Answers 2

That happens when the WMS server isn't CORS enabled, or if you try to access an http server url from an https application. You can still load it without the crossOrigin parameter but the image will be tainted. First try changing the WMS url from http to https, but if that doesn't work you will need to use a same origin (or CORS enabled) proxy. To ensure the WMS parameters are passed correctly you will need to URI encode the tile url when loading it, for example:

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);
  }
});

I've now checked the WMS service you are using - it is not CORS enabled in either http or https, so you will definitely need to use a proxy.

The problem has happened because the server (in your case, jetty) has not been CORS enabled. So you should change the configurations of the server. Do these two steps:

• Download this file and put it in webapps\geoserver\WEB-INF\lib directory under the installation folder of Geoserver (You should use the file patible with your jetty, so you may find another library appropriate from here).

• Go to webapps\geoserver\WEB-INF and open web.xml file. Unment these two tags.

this:

  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>

and this

  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>

Now stop and start Geoserver again to verify if the issue is now resolved.