Openlayers 3 处理来自WMS服务器的异常响应_Openlayers 3

Openlayers 3 处理来自WMS服务器的异常响应

openlayers-3

Openlayers 3 处理来自WMS服务器的异常响应,openlayers-3,Openlayers 3,我尝试使用以下代码从wms服务器获取地图图像 <!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

我尝试使用以下代码从wms服务器获取地图图像

<!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>


与fis经纪人柏林合作
var imageSource=新的ol.source.ImageWMS({
网址：'http://fbinter.stadt-berlin.de/fb/wms/senstadt/k_dtk50',
参数：{
“层”：“0”，
“请求”：“GetMap”，
“样式”：[“默认设置”]，
‘SRS’：‘EPSG:4326’，
‘BBOX’：[13.079,52.3284,13.7701,52.6877]，
“宽度”：“256”，
“HEIGT”：“256”，
“格式”：“jpeg”
}
})
imageSource.on（'imageloaderror'，函数（事件）{
var imageState=event.target.getState（）
var request=event.image.n
console.log（'imageloaderror，state='+imageState）
console.log（'请求：'+请求）
})
var imageLayer=新ol.layer.Image({
不透明度：0，
来源：imageSource
})
变量视图=新的ol.view({
中间：[13.4297269,52.4594867]，
缩放：10
})
var map=新ol.map({
目标：“地图”，
图层：[imageLayer]，
视图：视图
})

ol3无法显示图像，因为wms发回的是xml异常报告，而不是jpeg数据不允许使用crs:EPSG:3857。在java控制台上，我们看到消息资源被解释为图像，但使用MIME类型text/xml传输

我理解，图像源设置不正确。这需要我进一步调查但我的问题是：

如何通过ol脚本捕获来自wms服务器的消息crs is not allowed:EPSG:3857和任何其他错误消息

您需要使用XHR加载图像并获取异常文本，请参阅此线程以获得一些启示：

谢谢bartvde，但我不想自己做xhr，因为这应该由ol完成，而且已经完成了。但是如果wms服务器出现错误，我想提出这个问题。虽然我通过imageloaderror发现了钩子，从而意识到了一个错误，但我错过了对消息资源的访问，该消息资源被解释为Image，但使用MIME类型text/xml传输……OpenLayers不会通过XHR请求该图像。获取错误文本的唯一方法是通过XHR执行请求。或者，如果WMS支持此功能，则应切换到图像中的异常。

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