Cómo utilizar XMLHttpRequest con capas abiertas

Question

Necesito obtener imágenes de varios WebMapServers (de mi empresa) con Open Layers (y Javascript puro). Básicamente funciona. El problema es que algunos servidores requieren HTTP Basic Auth. La documentación de OL y una pregunta de SO relacionada dicen que esto debe hacerse con XMLHttpRequest dentro de una imageLoadFunction:

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

¿Cómo asignar un encabezado de autenticación básico a XMLHTTPREQUEST?

Al principio quiero obtener imágenes con XMLHttpRequest y sin 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 solo funciona con la línea

image.getImage().src = src;

pero no con el XMLHttpRequest comentado. Creo que la imagen cargada debe asignarse en la función client.onload, pero no estoy seguro de cómo hacerlo. Entonces, ¿cómo debo usar XMLHttpRequest dentro de imageLoadFunction?

Answer 1

De los documentos :

Proporcionar una imageLoadFunction personalizada puede ser útil para cargar imágenes con solicitudes de publicación o, en general, a través de solicitudes XHR, donde el src del elemento de imagen se establecería en un URI de datos cuando se carga el contenido.

Tal vez intente algo como esto:

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

Que hace:

• obtiene su imagen de su servidor
• Crea una gota
• Convierte el blob en urlData
• Finalmente usa urlData como fuente para su imagen