Question

我尝试使用以下代码从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>

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

据我所知，图像源设置不正确。这需要我进一步调查。 但我的问题是： 如何捕获消息 crs是不允许的：EPSG：3857 以及ol脚本来自wms服务器的任何其他错误消息？

Answer 1

您将需要使用XHR加载图像并获取异常文本，请参阅此主题以获得灵感：

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

处理来自WMS服务器的EXCEPTION响应

1 个答案: