Handling EXCEPTION response from WMS Server

Question

I tried to get a map image from a wms server using the following code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Playing with fis broker berlin</title>

  <link rel="stylesheet" href="../../libs/ol3/css/ol.css"/>
  <link rel="stylesheet" href="../../css/samples.css"/>

</head>
<body>
<div id="map" class="map"></div>
<script src="../../libs/ol3/js/ol.js"></script>

<script>

  var imageSource = new ol.source.ImageWMS({
    url: 'http://fbinter.stadt-berlin.de/fb/wms/senstadt/k_dtk50',
    params: {
      'LAYERS': '0',
      'REQUEST': 'GetMap',
      'STYLES': ['default'],
      'SRS': 'EPSG:4326',
      'BBOX': [13.079, 52.3284, 13.7701, 52.6877],
      'WIDTH': '256',
      'HEIGT': '256',
      'FORMAT': 'jpeg'
    }
  })

  imageSource.on('imageloaderror', function (event) {
    var imageState = event.target.getState()
    var request = event.image.n

    console.log('imageloaderror, state = ' + imageState)
    console.log('request: ' + request)
  })

  var imageLayer = new ol.layer.Image({
    opacity: 0,
    source: imageSource
  })

  var view = new ol.View({
    center: [13.4297269, 52.4594867],
    zoom: 10
  })

  var map = new ol.Map({
    target: 'map',
    layers: [imageLayer],
    view: view
  })
</script>

</body>
</html>

ol3 fails to show the image, because the wms sends backs a xml exception report instead of jpeg data meaning crs is not permitted: EPSG:3857. On the java console we see the message Resource interpreted as Image but transferred with MIME type text/xml ...

I understand, that the image source is not set up correctly. This needs further investigaton by me. But My question is: How can I catch the message crs is not permitted: EPSG:3857 and any other error messages from the wms server by the ol script?

bartvde bartvde · Accepted Answer · 2015-04-22T07:06:00

You will need to use XHR to load the image and get the exception text, see this thread for some inspiration:

https://groups.google.com/d/msg/ol3-dev/39tX1fSeSc0/KGURE6NrexIJ

    imageLoadFunction: function(image, src) {
      progress('start');
      var img = image.getImage();
      if (typeof window.btoa == 'function') {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', src, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function(e) {
          if (this.status == 200) {
            var uInt8Array = new Uint8Array(this.response);
            var i = uInt8Array.length;
            var binaryString = new Array(i);
            while (i--) {
              binaryString[i] = String.fromCharCode(uInt8Array[i]);
            }
            var data = binaryString.join('');
            var type = xhr.getResponseHeader('content-type');
            if (type.indexOf('image') === 0) {
              img.src = 'data:' + type + ';base64,' + window.btoa(data);
            } else {
              error($.parseJSON(data));
            }
          } else {
            error(this.statusText);
          }
          progress('end');
        };
        xhr.send();
      } else {
        img.onload = function() {
          progress('end');
        };
        img.onerror = function() {
          progress('end');
          error();
        };
        img.src = src;
      }
    }
  })

Handling EXCEPTION response from WMS Server

1 Answers