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

Merge pull request #10380 from mike-000/patch-5

Browse Source 
Adjust examples for layer canvas pixel ratio and rotation
This commit is contained in:
Andreas Hocevar
2019-12-07 16:52:26 +01:00
committed by GitHub
parent f9f8f9c7c5 2790d50660
commit 5f6ea987a5
3 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
examples/layer-clipping.js
View File

@@ -18,11 +18,17 @@ const map = new Map({
osm.on('prerender', function(event) {
const ctx = event.context;
// calculate the pixel ratio and rotation of the canvas
const matrix = event.inversePixelTransform;
const canvasPixelRatio = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
const canvasRotation = -Math.atan2(matrix[1], matrix[0]);
ctx.save();
const pixelRatio = event.frameState.pixelRatio;
const size = map.getSize();
ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio);
ctx.scale(3 * pixelRatio, 3 * pixelRatio);
// center the canvas and remove rotation to position clipping
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.rotate(-canvasRotation);
ctx.scale(3 * canvasPixelRatio, 3 * canvasPixelRatio);
ctx.translate(-75, -80);
ctx.beginPath();
ctx.moveTo(75, 40);
@@ -34,8 +40,11 @@ osm.on('prerender', function(event) {
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.clip();
ctx.translate(75, 80);
ctx.scale(1 / 3 / pixelRatio, 1 / 3 / pixelRatio);
ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio);
ctx.scale(1 / 3 / canvasPixelRatio, 1 / 3 / canvasPixelRatio);
// reapply canvas rotation and position
ctx.rotate(canvasRotation);
ctx.translate(-ctx.canvas.width / 2, -ctx.canvas.height / 2);
});
osm.on('postrender', function(event) {

10
examples/layer-spy.js
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 XYZ from '../src/ol/source/XYZ.js';
import {getRenderPixel} from '../src/ol/render.js';
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
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
imagery.on('prerender', function(event) {
const ctx = event.context;
const pixelRatio = event.frameState.pixelRatio;
ctx.save();
ctx.beginPath();
if (mousePosition) {
// only show a circle around the mouse
ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
radius * pixelRatio, 0, 2 * Math.PI);
ctx.lineWidth = 5 * pixelRatio;
const pixel = getRenderPixel(event, mousePosition);
const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
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.stroke();
}

14
examples/layer-swipe.js
View File

@@ -3,6 +3,7 @@ import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import OSM from '../src/ol/source/OSM.js';
import XYZ from '../src/ol/source/XYZ.js';
import {getRenderPixel} from '../src/ol/render.js';
const osm = new TileLayer({
source: new OSM()
@@ -33,11 +34,20 @@ const swipe = document.getElementById('swipe');
aerial.on('prerender', function(event) {
const ctx = event.context;
const width = ctx.canvas.width * (swipe.value / 100);
const mapSize = map.getSize();
const width = mapSize[0] * (swipe.value / 100);
const tl = getRenderPixel(event, [width, 0]);
const tr = getRenderPixel(event, [mapSize[0], 0]);
const bl = getRenderPixel(event, [width, mapSize[1]]);
const br = getRenderPixel(event, mapSize);
ctx.save();
ctx.beginPath();
ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
ctx.moveTo(tl[0], tl[1]);
ctx.lineTo(bl[0], bl[1]);
ctx.lineTo(br[0], br[1]);
ctx.lineTo(tr[0], tr[1]);
ctx.closePath();
ctx.clip();
});