Fix magnify example

This commit is contained in:
Tim Schaub
2018-11-16 16:16:07 +01:00
parent edbe2316ef
commit 6cfb8f275b

View File

@@ -3,6 +3,7 @@ import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import {fromLonLat} from '../src/ol/proj.js';
import BingMaps from '../src/ol/source/BingMaps.js';
import {getPixelFromPixel} from '../src/ol/render.js';
const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
@@ -50,14 +51,15 @@ container.addEventListener('mouseout', function() {
// after rendering the layer, show an oversampled version around the pointer
imagery.on('postrender', function(event) {
if (mousePosition) {
const pixel = getPixelFromPixel(event, mousePosition);
const offset = getPixelFromPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
const half = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
const context = event.context;
const pixelRatio = event.frameState.pixelRatio;
const half = radius * pixelRatio;
const centerX = mousePosition[0] * pixelRatio;
const centerY = mousePosition[1] * pixelRatio;
const centerX = pixel[0];
const centerY = pixel[1];
const originX = centerX - half;
const originY = centerY - half;
const size = 2 * half + 1;
const size = Math.round(2 * half + 1);
const sourceData = context.getImageData(originX, originY, size, size).data;
const dest = context.createImageData(size, size);
const destData = dest.data;
@@ -82,7 +84,7 @@ imagery.on('postrender', function(event) {
}
context.beginPath();
context.arc(centerX, centerY, half, 0, 2 * Math.PI);
context.lineWidth = 3 * pixelRatio;
context.lineWidth = 3 * half / radius;
context.strokeStyle = 'rgba(255,255,255,0.5)';
context.putImageData(dest, originX, originY);
context.stroke();