Openlayers 4: получение пиксельных данных с карты имеет смещение

Question

Я написал функцию для получения пиксельных данных с карты открытых слоев:

var imagery = new ol.layer.Tile({
	source: new ol.source.OSM(),
    crossOrigin: 'anonymous'
});

var context;

/**
 * Apply a filter on "postcompose" events.
 */
imagery.on('postcompose', function(event) {
	context = event.context;
});

function getPixel( latitude, longitude ){
    let lat = parseFloat( latitude );
    let lon = parseFloat( longitude );
    var coord = ol.proj.transform( [lon, lat], 'EPSG:4326', 'EPSG:3857' );
    var pixel = map.getPixelFromCoordinate( coord );
    if( context == null )
    	return;
    return  context.getImageData(pixel[0], pixel[1], 1, 1).data;
}

var map = new ol.Map({
	target: 'map',
	layers: [imagery],
    ...
});

Код основан на этой ссылке .Кроме того, преобразование данных LatLon в пиксельные координаты используется довольно широко и не создает никаких проблем.

Однако полученные пиксельные данные как-то смещены относительно координат, так что я вижу воду там, где естьземля и прочее.Насколько я могу судить, смещение составляет несколько сотен пикселей (или несколько метров в lonlat) в направлении x и y, и, вероятно, причина заключается в том, что пиксели на карте не соответствуют таковым на холсте.

Кто-нибудь знает, как решить эту проблему?

Answer 1

Ответ Майка действительно поставил меня на правильный путь!Я включил модифицированный код для тех, кто может столкнуться с той же проблемой:

var pixelRatio;
var context;

var imagery = new ol.layer.Tile({
	source: new ol.source.OSM(),
    crossOrigin: 'anonymous'
});

/**
 * before rendering the layer, determine the pixel ratio
 * and save the context
*/
imagery.on('precompose', function(event) {
  context = event.context;
  pixelRatio = event.frameState.pixelRatio;
  context.save();
});

/**
 * Restore the context
 */
imagery.on('postcompose', function(event) {
	context = event.context;
	context.restore();
});

/**
 * Get the pixel's rgba data
 */
function getPixel( latitude, longitude, offx, offy ){
	let lat = parseFloat( latitude );
	let lon = parseFloat( longitude );
	var coord = ol.proj.transform( [lon, lat], 'EPSG:4326', 'EPSG:3857' );
	var pixel = map.getPixelFromCoordinate( coord );
	if( context == null )
		return;
	var pixelAtClick = context.getImageData(pixel[0]*pixelRatio, pixel[1]*pixelRatio, 1, 1).data;
	rgb = [0,0,0,0];
	for( var i=0;i<pixelAtClick.length;i++ ){
		rgb[i] = pixelAtClick[i];
	}
	return rgb;
}