Como usar XMLHttpRequest com camadas abertas

Question

Eu preciso obter imagens de vários WebMapServers (da minha empresa) com Open Layers (e Javascript puro). Basicamente, funciona. O problema é que alguns servidores exigem HTTP Basic Auth. A documentação OL e uma questão SO relacionada dizem que isso deve ser feito com um XMLHttpRequest dentro de um imageLoadFunction:

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

Como atribuir cabeçalho de autenticação básica a XMLHTTPREQUEST?

A princípio, quero obter imagens com XMLHttpRequest e sem autenticação básica:

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

O imageLoadFunction só funciona com a linha

image.getImage().src = src;

mas não com o XMLHttpRequest comentado. Acho que a imagem carregada deve ser atribuída na função client.onload, mas não tenho certeza de como fazer isso. Então, como devo usar o XMLHttpRequest dentro de imageLoadFunction?

Answer 1

Dos documentos :

Fornecer um imageLoadFunction personalizado pode ser útil para carregar imagens com solicitações de postagem ou - em geral - por meio de solicitações XHR, onde o src do elemento de imagem seria definido como um URI de dados quando o conteúdo fosse carregado.

Talvez tente algo assim:

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

O que faz:

• obtém sua imagem do seu servidor
• Crie um blob
• Converte o blob em urlData
• Finalmente usa o urlData como fonte para sua imagem