XMLHttpRequest'i Açık Katmanlarla kullanma

Question

Open Layers (ve saf Javascript) ile birden fazla WebMapServers'dan (şirketime ait) görüntüler almam gerekiyor. Temelde işe yarıyor. Sorun, bazı sunucuların HTTP Temel Kimlik Doğrulaması gerektirmesidir. OL belgeleri ve ilgili bir SO sorusu, bunun bir imageLoadFunction içindeki XMLHttpRequest ile yapılması gerektiğini söyler:

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

XMLHTTPREQUEST'e temel kimlik doğrulama başlığı nasıl atanır?

İlk olarak XMLHttpRequest ile ve Temel Kimlik Doğrulama olmadan görüntüleri almak istiyorum:

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

İmageLoadFunction yalnızca satırla çalışır

image.getImage().src = src;

ancak açıklamalı XMLHttpRequest ile değil. Yüklenen görüntünün client.onload işlevinde atanması gerektiğini düşünüyorum, ancak bunu nasıl yapacağımdan emin değilim. Öyleyse, imageLoadFunction içinde XMLHttpRequest'i nasıl kullanmalıyım?

Answer 1

Gönderen docs :

Özel bir imageLoadFunction sağlamak, görüntüleri gönderi istekleriyle veya genel olarak XHR istekleriyle yüklemek için yararlı olabilir, burada görüntü öğesinin src'si içerik yüklendiğinde bir veri URI'sine ayarlanır.

Belki şöyle bir şey deneyebilirsin:

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

Bu ne yapar:

• resminizi sunucunuzdan alır
• Bir blob oluşturun
• Blob'u urlData'ya dönüştürür
• Son olarak urlData'yı görüntünüz için kaynak olarak kullanır