logo标签列表

Openlayers 4 - 加载需要身份验证的WMS图层

typescriptauthenticationopenlayerswms
3

我正在尝试使用OpenLayers 4.6和Angular 5加载WMS图像层，代码如下：

const syr_layer = new ol_layer_Image({
  source: new ol_source_ImageWMS({
      url: 'serverurl', crossOrigin: 'anonymous', serverType: 'geoserver',
      params: { 'LAYERS': 'tst:syr'},
      projection: 'EPSG:4326'
    });
});

但是它会抛出一个错误：

GET (我的服务器网址) 401 (在SecurityContext中找不到身份验证对象)

我该如何在openlayers发送的GET请求中添加身份验证标头？

2个回答
6

感谢@Thomas，您的答案不是100％正确，但为我找到正确答案铺平了道路。

这是适合我的tileLoader函数：

private tileLoader(tile, src) {
  const client = new XMLHttpRequest();

  client.open('GET', src);
  client.responseType = 'arraybuffer';
  client.setRequestHeader('Authorization', 'Basic ' + btoa(user + ':' + pass));

  client.onload = function () {
    const arrayBufferView = new Uint8Array(this.response);
    const blob = new Blob([arrayBufferView], { type: 'image/png' });
    const urlCreator = window.URL || (window as any).webkitURL;
    const imageUrl = urlCreator.createObjectURL(blob);
    tile.getImage().src = imageUrl;
  };

  client.send();
}
5
为了您的目的，您可能想使用tileLoadFunction (API文档) 来自 ol.source.ImageWMS 举个例子，您可以看下面。两个“秘密”是customLoader和取消注释进行身份验证的client.setRequestHeader("Authorization", "Basic " + window.btoa(user + ":" + pass)); 
<!DOCTYPE html>
<html>
  <head>
    <title>Tiled WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      function customLoader(tile, src) {
        var client = new XMLHttpRequest();
        client.open('GET', src);
        // Uncomment to pass authentication header
        //client.setRequestHeader("Authorization", "Basic " + window.btoa(user + ":" + pass));
        client.onload = function() {
          tile.getImage().src = src;
        };
        client.send();
      }
      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            tileLoadFunction: customLoader,
            params: {'LAYERS': 'topp:states', 'TILED': true},
            serverType: 'geoserver',
            // Countries have transparency, so do not fade tiles:
            transition: 0
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>

答案主要借鉴自如何向OpenLayers3请求添加HTTP头？，但由于提供的语法不起作用，因此进行了一些调整。
req.setRequestHeader("Authorization", "Basic " + window.btoa(user + ":" + pass)); 应该改为 client.setRequestHeader("Authorization", "Basic " + window.btoa(user + ":" + pass));。 - krisaoe
根据您的反馈更新了我的答案。谢谢。 - Thomas Gratier
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接