Cách sử dụng XMLHttpRequest với Lớp mở

Question

Tôi cần lấy hình ảnh từ nhiều Máy chủ WebMapServer (của công ty tôi) bằng Lớp mở (và Javascript thuần). Về cơ bản nó hoạt động. Vấn đề là một số máy chủ yêu cầu HTTP Basic Auth. Tài liệu CV và một câu hỏi SO có liên quan nói rằng điều này nên được thực hiện với một XMLHttpRequest bên trong một imageLoadFunction:

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

Làm cách nào để gán tiêu đề xác thực cơ bản cho XMLHTTPREQUEST?

Lúc đầu, tôi muốn lấy hình ảnh bằng XMLHttpRequest và không có 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 chỉ hoạt động với dòng

image.getImage().src = src;

nhưng không phải với XMLHttpRequest đã nhận xét. Tôi nghĩ rằng hình ảnh đã tải phải được gán trong hàm client.onload, nhưng tôi không chắc chắn về cách thực hiện việc này. Vậy tôi nên sử dụng XMLHttpRequest bên trong imageLoadFunction như thế nào?

Answer 1

Từ các tài liệu :

Việc cung cấp một imageLoadFunction tùy chỉnh có thể hữu ích để tải hình ảnh với các yêu cầu bài đăng hoặc - nói chung - thông qua các yêu cầu XHR, trong đó src của phần tử hình ảnh sẽ được đặt thành URI dữ liệu khi nội dung được tải.

Có thể thử một cái gì đó như thế này:

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

Những gì nó làm:

• lấy hình ảnh của bạn từ máy chủ của bạn
• Tạo một đốm màu
• Chuyển đổi blob thành urlData
• Cuối cùng sử dụng urlData làm nguồn cho hình ảnh của bạn