使用OpenLayers 7.1.0访问WMS服务，并使用基本的http身份验证

Question

我是网络地图的新手，被这个问题困住了。我想使用OpenLayers访问ChartWorld WMS服务。我可以使用以下javaScript代码从特定IP地址访问它，一切正常:

const ENCIPLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
params: {LAYERS: 'ENC', CSBOOL: '2183', CSVALUE: '10,5,20,10,1,2,1,4000000,100000,200000,1'},
url: 'https://wms.chartworld.com/?'
})
});

但是我不知道如何使用用户名/密码和基本的http认证访问服务。这个方法的地址是

https://wms-eval.chartworld.com

我搜索了很多，但没有找到任何工作!

Answer 1

您将需要一个类似于https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction中记录的自定义加载函数(tile源具有tileLoadFunction, image源具有imageLoadFunction)并添加一个基本身份验证头。为了节省内存，对象的url应该在使用后被撤销。

source: new ol.source.ImageWMS({
ratio: 1,
params: {LAYERS: 'ENC', CSBOOL: '2183', CSVALUE: '10,5,20,10,1,2,1,4000000,100000,200000,1'},
url: 'https://wms.chartworld.com/?',
imageLoadFunction: function (image, src) {
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open('GET', src);
xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa(username + ':' + password));
xhr.onload = function() {
const url = URL.createObjectURL(xhr.response);
const img = image.getImage();
img.addEventListener('load', function() {
URL.revokeObjectURL(url);
});
img.src = url;
};
xhr.send();
}
})