From 74901efc59cf79277edc69983fab47c1de953c5c Mon Sep 17 00:00:00 2001
From: Simon Daron <simon@surlaterre.org>
Date: Mon, 27 Apr 2020 16:41:58 +0200
Subject: [PATCH] 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';
 });