如何向 openlayers4 请求添加 http 标头？

Question

一些 wms 或 wfs 源需要用户和密码验证。 例如https://apps.sogelink.fr/maplink/public/wfs?request=GetCapabilities 需要基本认证。 如何注入此身份验证？

Answer 1

您可以将自己的imageLoadFunction 提供给ImageWMS source。 默认的只是获取 URL 并将其作为 img 标签的 src 插入：

ol.source.Image.defaultImageLoadFunction = function(image, src) {
  image.getImage().src = src;
};

那个问题是already asked on the OpenLayers GitHub，这里有一个例子：

function customLoader(tile, src) {
  var client = new XMLHttpRequest();
  client.open('GET', src);
  client.setRequestHeader('foo', 'bar');
  client.onload = function() {
    var data = 'data:image/png;base64,' + btoa(unescape(encodeURIComponent(this.responseText));
    tile.getImage().src = data;
  };
  client.send();
}

OpenLayers 的文档真的很好。只需找到一个使用您想要的功能的示例，然后点击 API 文档的链接即可。ol.source.Vector 文档甚至包含 WFS 加载函数的示例，您可以在其中操纵请求：

new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  loader: function(extent, resolution, projection) {
    var wfsUrl = 'TODO';
    var xhr = new XMLHttpRequest();
    // see above example....
  }
});