วิธีใช้ XMLHttpRequest กับ Open Layers

Question

ฉันต้องการรับภาพจาก WebMapServers หลายตัว (ของ บริษัท ของฉัน) ด้วย Open Layers (และ Javascript แท้) โดยทั่วไปมันใช้งานได้ ปัญหาคือบางเซิร์ฟเวอร์ต้องการ HTTP Basic Auth เอกสาร OL และคำถาม SO ที่เกี่ยวข้องบอกว่าสิ่งนี้ควรทำด้วย XMLHttpRequest ภายใน imageLoadFunction:

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

จะกำหนดส่วนหัวการพิสูจน์ตัวตนพื้นฐานให้กับ XMLHTTPREQUEST ได้อย่างไร?

ตอนแรกฉันต้องการรับภาพด้วย XMLHttpRequest และไม่มี 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 ใช้งานได้กับบรรทัดเท่านั้น

image.getImage().src = src;

แต่ไม่ใช่กับ XMLHttpRequest ที่แสดงความคิดเห็น ฉันคิดว่าต้องกำหนดภาพที่โหลดในฟังก์ชัน client.onload แต่ฉันไม่แน่ใจว่าจะทำอย่างไร ดังนั้นฉันจะใช้ XMLHttpRequest ภายใน imageLoadFunction ได้อย่างไร

Answer 1

จากเอกสาร :

การจัดเตรียม imageLoadFunction แบบกำหนดเองจะมีประโยชน์ในการโหลดรูปภาพด้วยคำขอโพสต์หรือโดยทั่วไป - ผ่านคำขอ XHR โดยที่ src ขององค์ประกอบรูปภาพจะถูกตั้งค่าเป็น URI ข้อมูลเมื่อโหลดเนื้อหา

อาจลองทำสิ่งนี้:

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

มันทำอะไร:

• รับภาพของคุณจากเซิร์ฟเวอร์ของคุณ
• สร้างหยด
• แปลง blob เป็น urlData
• สุดท้ายใช้ urlData เป็นแหล่งที่มาสำหรับรูปภาพของคุณ