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

Adjust for layer canvas rotation

Browse Source
This commit is contained in:
mike-000
2019-12-04 23:08:29 +00:00
committed by GitHub
parent aaae50e689
commit b4ae4ab86f
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
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()
@@ -34,10 +35,18 @@ const swipe = document.getElementById('swipe');
aerial.on('prerender', function(event) {
const ctx = event.context;
const width = ctx.canvas.width * (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();
});