From 71f056c75cb35056243a660f139441ab4ab78486 Mon Sep 17 00:00:00 2001 From: Simon Daron Date: Sat, 25 Apr 2020 06:53:58 +0200 Subject: [PATCH 1/3] Use prerender and postrender events on Vector Clipping Layer example for better readability --- examples/layer-clipping-vector.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/examples/layer-clipping-vector.js b/examples/layer-clipping-vector.js index 46d922acbc..82b318916d 100644 --- a/examples/layer-clipping-vector.js +++ b/examples/layer-clipping-vector.js @@ -13,25 +13,22 @@ const base = new TileLayer({ }); const clipLayer = new VectorLayer({ - style: null, + style: new Style({ + fill: new Fill({ + color: 'black', + }), + }), source: new VectorSource({ url: './data/geojson/switzerland.geojson', format: new GeoJSON(), }), }); -const style = new Style({ - fill: new Fill({ - color: 'black', - }), +clipLayer.on('prerender', function (e) { + e.context.globalCompositeOperation = 'destination-in'; }); -base.on('postrender', function (e) { - e.context.globalCompositeOperation = 'destination-in'; - const vectorContext = getVectorContext(e); - clipLayer.getSource().forEachFeature(function (feature) { - vectorContext.drawFeature(feature, style); - }); +clipLayer.on('postrender', function (e) { e.context.globalCompositeOperation = 'source-over'; }); From 8cfe994ff0550550ff84fa41c970b4ea8e79acda Mon Sep 17 00:00:00 2001 From: Simon Daron Date: Sun, 26 Apr 2020 13:27:04 +0200 Subject: [PATCH 2/3] Improve example with a background layer, intersect and comments --- examples/layer-clipping-vector.js | 39 ++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/examples/layer-clipping-vector.js b/examples/layer-clipping-vector.js index 82b318916d..a58472a411 100644 --- a/examples/layer-clipping-vector.js +++ b/examples/layer-clipping-vector.js @@ -1,39 +1,56 @@ import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; -import OSM from '../src/ol/source/OSM.js'; -import VectorSource from '../src/ol/source/Vector.js'; import View from '../src/ol/View.js'; import {Fill, Style} from '../src/ol/style.js'; +import {OSM, Stamen, Vector as VectorSource} from '../src/ol/source.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; import {getVectorContext} from '../src/ol/render.js'; +import {intersects} from '../src/ol/extent.js'; + +//A distinct className is required to use another canvas for the background +const background = new TileLayer({ + className: 'stamen', + source: new Stamen({ + layer: 'toner', + }), +}); const base = new TileLayer({ source: new OSM(), }); const clipLayer = new VectorLayer({ - style: new Style({ - fill: new Fill({ - color: 'black', - }), - }), + style: null, source: new VectorSource({ url: './data/geojson/switzerland.geojson', format: new GeoJSON(), }), }); -clipLayer.on('prerender', function (e) { - e.context.globalCompositeOperation = 'destination-in'; +const style = new Style({ + fill: new Fill({ + color: 'black', + }), }); -clipLayer.on('postrender', function (e) { +base.on('postrender', function (e) { + const vectorContext = getVectorContext(e); + e.context.globalCompositeOperation = 'destination-in'; + //Checking interect is required so the base layer is totally hidden when not clipped + if (intersects(e.frameState.extent, clipLayer.getSource().getExtent())) { + clipLayer.getSource().forEachFeature(function (feature) { + vectorContext.drawFeature(feature, style); + }); + } else { + e.context.fillStyle = 'transparent'; + e.context.fillRect(0, 0, 1, 1); + } e.context.globalCompositeOperation = 'source-over'; }); const map = new Map({ - layers: [base, clipLayer], + layers: [background, base, clipLayer], target: 'map', view: new View({ center: fromLonLat([8.23, 46.86]), From 74901efc59cf79277edc69983fab47c1de953c5c Mon Sep 17 00:00:00 2001 From: Simon Daron Date: Mon, 27 Apr 2020 16:41:58 +0200 Subject: [PATCH 3/3] Set base layer extent --- examples/layer-clipping-vector.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/examples/layer-clipping-vector.js b/examples/layer-clipping-vector.js index a58472a411..5568d0e411 100644 --- a/examples/layer-clipping-vector.js +++ b/examples/layer-clipping-vector.js @@ -6,7 +6,6 @@ import {OSM, Stamen, Vector as VectorSource} from '../src/ol/source.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; import {getVectorContext} from '../src/ol/render.js'; -import {intersects} from '../src/ol/extent.js'; //A distinct className is required to use another canvas for the background const background = new TileLayer({ @@ -28,6 +27,11 @@ const clipLayer = new VectorLayer({ }), }); +//Giving the clipped layer an extent is necessary to avoid rendering when the feature is outside the viewport +clipLayer.getSource().on('addfeature', function () { + base.setExtent(clipLayer.getSource().getExtent()); +}); + const style = new Style({ fill: new Fill({ color: 'black', @@ -37,15 +41,9 @@ const style = new Style({ base.on('postrender', function (e) { const vectorContext = getVectorContext(e); e.context.globalCompositeOperation = 'destination-in'; - //Checking interect is required so the base layer is totally hidden when not clipped - if (intersects(e.frameState.extent, clipLayer.getSource().getExtent())) { - clipLayer.getSource().forEachFeature(function (feature) { - vectorContext.drawFeature(feature, style); - }); - } else { - e.context.fillStyle = 'transparent'; - e.context.fillRect(0, 0, 1, 1); - } + clipLayer.getSource().forEachFeature(function (feature) { + vectorContext.drawFeature(feature, style); + }); e.context.globalCompositeOperation = 'source-over'; });