openlayers加载自定义图层

一、加载图层layer，随地图缩放

const img = new Image();
img.src = {imgUrl};
const map = new ol.Map({...});
const source = new ol.source.ImageCanvas({
	canvasFunction: function(extent, resolution, pixelRatio, size, /*, projection*/ ){
		const canvas = document.createElement('canvas');
		canvas.width = size[0];
		canvas.height = size[1];
		const ctx = canvas.getContext('2d');
		ctx.drawImage(img, 0, 0, size[0], size[1]);
		return canvas;
	}
});
const layer = new ol.layer.Image({source: source});
map.addLayer(layer);

二、加载静态浮层，不随地图缩放

const img = new Image();
img.src = {imgUrl};
const map = new ol.Map({...});
const canvas = map.getViewport().querySelector('canvas');
const ctx = canvas.getContext('2d');
map.on('postcompose', function(){
	// 可以实现动画效果
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	this.render();
}, map);

效果图：

参考：https://viglino.github.io/ol-ext/examples/misc/map.control.cloud.html