Come utilizzare XMLHttpRequest con Open Layers

Question

Ho bisogno di ottenere immagini da più WebMapServer (della mia azienda) con Open Layers (e puro Javascript). Fondamentalmente funziona. Il problema è che alcuni server richiedono l'autenticazione di base HTTP. La documentazione OL e una domanda SO correlata dicono che questo dovrebbe essere fatto con un XMLHttpRequest all'interno di un imageLoadFunction:

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

Come assegnare un'intestazione di autenticazione di base a XMLHTTPREQUEST?

All'inizio voglio ottenere immagini con XMLHttpRequest e senza 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 funziona solo con la linea

image.getImage().src = src;

ma non con XMLHttpRequest commentato. Penso che l'immagine caricata debba essere assegnata nella funzione client.onload, ma non sono sicuro di come farlo. Quindi come dovrei usare XMLHttpRequest all'interno di imageLoadFunction?

Answer 1

Dai documenti :

Fornire una imageLoadFunction personalizzata può essere utile per caricare immagini con richieste di post o, in generale, tramite richieste XHR, dove src dell'elemento immagine sarebbe impostato su un URI di dati quando il contenuto viene caricato.

Forse prova qualcosa di simile:

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

Cosa fa:

• ottiene la tua immagine dal tuo server
• Crea un blob
• Converte il BLOB in urlData
• Infine utilizza urlData come sorgente per la tua immagine