如何在开放层中使用 XMLHttpRequest

Question

我需要使用 Open Layers（和纯 Javascript）从多个 WebMapServer（我公司的）获取图像。 基本上它有效。 问题是某些服务器需要 HTTP 基本身份验证。 OL 文档和相关的 SO 问题说这应该通过 imageLoadFunction 中的 XMLHttpRequest 来完成：

https://openlayers.org/en/latest/apidoc/module-ol_Image.html

如何将基本身份验证标头分配给 XMLHTTPREQUEST？

起初，我想使用 XMLHttpRequest 获取图像而不使用 Basic Auth：

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                params: { LAYERS: 'ENC', CSBOOL: '2083', CSVALUE: ',,,,,3'},
                url: 'https://wms-without-basic-auth.com/?',
                imageLoadFunction: function(image, src) {
                    image.getImage().src = src;
                    /*
                    var client = new XMLHttpRequest();
                    client.open('GET', src, true);
                    client.setRequestHeader( 'Content-Type',   'image/png' );
                    client.setRequestHeader( 'Accept', 'image/png' );
                    client.onload(function() {
                        image.getImage().src = src;
                    });
                    client.send();
                    */
                },
            })
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([6,54]),
        zoom: 6
    })
});

imageLoadFunction 仅适用于该行

image.getImage().src = src;

但不是带有注释的 XMLHttpRequest。 我认为必须在 client.onload 函数中分配加载的图像，但我不确定如何执行此操作。 那么我应该如何在 imageLoadFunction 中使用 XMLHttpRequest 呢？

Answer 1

从文档：

提供自定义 imageLoadFunction 可用于加载带有 post 请求的图像，或者 - 通常 - 通过 XHR 请求，其中在加载内容时图像元素的 src 将设置为数据 URI。

也许尝试这样的事情：

imageLoadFunction: function(image, src) {
  var client = new XMLHttpRequest();
  client.open('GET', src, true);
  client.setRequestHeader( 'Content-Type',   'image/png' );
  client.setRequestHeader( 'Accept', 'image/png' );
  client.responseType = 'blob';
  client.onload(function() {
    const blob = new Blob(client.response);
    const urlData = URL.createObjectURL(blob);
    image.getImage().src = urlData;
  });
  client.send();
},

它能做什么：

• 从您的服务器获取您的图像
• 创建一个blob
• 将 blob 转换为 urlData
• 最后使用 urlData 作为图像的来源