Comment utiliser XMLHttpRequest avec des couches ouvertes

Question

J'ai besoin d'obtenir des images de plusieurs WebMapServers (de mon entreprise) avec des couches ouvertes (et du Javascript pur). Fondamentalement, cela fonctionne. Le problème est que certains serveurs nécessitent l'authentification de base HTTP. La documentation OL et une question SO associée indiquent que cela devrait être fait avec une XMLHttpRequest dans une imageLoadFunction:

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

Comment attribuer un en-tête d'authentification de base à XMLHTTPREQUEST?

Au début, je veux obtenir des images avec XMLHttpRequest et sans authentification de base:

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

La fonction imageLoadFunction fonctionne uniquement avec la ligne

image.getImage().src = src;

mais pas avec le XMLHttpRequest commenté. Je pense que l'image chargée doit être affectée dans la fonction client.onload, mais je ne sais pas comment procéder. Alors, comment dois-je utiliser le XMLHttpRequest à l'intérieur de l'imageLoadFunction?

Answer 1

À partir de la documentation :

Fournir une imageLoadFunction personnalisée peut être utile pour charger des images avec des demandes de publication ou - en général - via des demandes XHR, où le src de l'élément image serait défini sur un URI de données lorsque le contenu est chargé.

Essayez peut-être quelque chose comme ça:

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

Ce qu'il fait:

• obtient votre image de votre serveur
• Créer un blob
• Convertit le blob en urlData
• Utilise enfin urlData comme source pour votre image