Use prerender and postrender events on Vector Clipping Layer example for better readability

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({
+clipLayer.on('prerender', function (e) {
-  fill: new Fill({
+  e.context.globalCompositeOperation = 'destination-in';
-    color: 'black',
-  }),
 });
 
-base.on('postrender', function (e) {
+clipLayer.on('postrender', function (e) {
-  e.context.globalCompositeOperation = 'destination-in';
-  const vectorContext = getVectorContext(e);
-  clipLayer.getSource().forEachFeature(function (feature) {
-    vectorContext.drawFeature(feature, style);
-  });
   e.context.globalCompositeOperation = 'source-over';
 });