ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust for layer canvas pixel ratio and rotation

Browse Source
This commit is contained in:
mike-000
2019-12-04 23:04:44 +00:00
committed by GitHub
parent 10f9a70d5f
commit aaae50e689
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/layer-spy.js
+6 -4
View File
@@ -3,6 +3,7 @@ import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js'; import TileLayer from '../src/ol/layer/Tile.js';
import {fromLonLat} from '../src/ol/proj.js'; import {fromLonLat} from '../src/ol/proj.js';
import XYZ from '../src/ol/source/XYZ.js'; import XYZ from '../src/ol/source/XYZ.js';
import {getRenderPixel} from '../src/ol/render.js';
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' + const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
@@ -65,14 +66,15 @@ container.addEventListener('mouseout', function() {
// before rendering the layer, do some clipping // before rendering the layer, do some clipping
imagery.on('prerender', function(event) { imagery.on('prerender', function(event) {
const ctx = event.context; const ctx = event.context;
const pixelRatio = event.frameState.pixelRatio;
ctx.save(); ctx.save();
ctx.beginPath(); ctx.beginPath();
if (mousePosition) { if (mousePosition) {
// only show a circle around the mouse // only show a circle around the mouse
ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, const pixel = getRenderPixel(event, mousePosition);
radius * pixelRatio, 0, 2 * Math.PI); const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
ctx.lineWidth = 5 * pixelRatio; const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);
ctx.lineWidth = 5 * canvasRadius / radius;
ctx.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.stroke(); ctx.stroke();
} }