Jak używać XMLHttpRequest z Open Layers

Question

Potrzebuję obrazów z wielu serwerów WebMapServers (mojej firmy) z otwartymi warstwami (i czystym JavaScriptem). Zasadniczo to działa. Problem polega na tym, że niektóre serwery wymagają podstawowego uwierzytelniania HTTP. Dokumentacja OL i powiązane pytanie SO mówią, że powinno to być zrobione z XMLHttpRequest wewnątrz imageLoadFunction:

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

Jak przypisać nagłówek podstawowego uwierzytelniania do XMLHTTPREQUEST?

Najpierw chcę uzyskać obrazy z XMLHttpRequest i bez 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 działa tylko z wierszem

image.getImage().src = src;

ale nie z komentarzem XMLHttpRequest. Myślę, że załadowany obraz musi być przypisany w funkcji client.onload, ale nie jestem pewien, jak to zrobić. Jak więc mam używać XMLHttpRequest wewnątrz imageLoadFunction?

Answer 1

Z dokumentów :

Zapewnienie niestandardowej funkcji imageLoadFunction może być przydatne do ładowania obrazów z żądaniami postu lub - ogólnie - za pośrednictwem żądań XHR, w których źródło elementu obrazu zostanie ustawione na identyfikator URI danych podczas ładowania treści.

Może spróbuj czegoś takiego:

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

Co to robi:

• pobiera twój obraz z twojego serwera
• Utwórz obiekt blob
• Konwertuje obiekt BLOB na urlData
• Na koniec używa urlData jako źródła obrazu