Merge pull request #5768 from ahocevar/clip-vector

Enable extent clipping for vector layers

src/ol/renderer/canvas/layer.js

@@ -30,21 +30,12 @@ ol.inherits(ol.renderer.canvas.Layer, ol.renderer.Layer);
 
 
 /**
- * @param {olx.FrameState} frameState Frame state.
- * @param {ol.LayerState} layerState Layer state.
  * @param {CanvasRenderingContext2D} context Context.
+ * @param {olx.FrameState} frameState Frame state.
+ * @param {ol.Extent} extent Clip extent.
+ * @protected
  */
-ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerState, context) {
+ol.renderer.canvas.Layer.prototype.clip = function(context, frameState, extent) {
-
-  this.dispatchPreComposeEvent(context, frameState);
-
-  var image = this.getImage();
-  if (image) {
-
-    // clipped rendering if layer extent is set
-    var extent = layerState.extent;
-    var clipped = extent !== undefined;
-    if (clipped) {
   var pixelRatio = frameState.pixelRatio;
   var width = frameState.size[0] * pixelRatio;
   var height = frameState.size[1] * pixelRatio;
@@ -68,6 +59,26 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat
   context.lineTo(bottomLeft[0] * pixelRatio, bottomLeft[1] * pixelRatio);
   context.clip();
   ol.render.canvas.rotateAtOffset(context, rotation, width / 2, height / 2);
+};
+
+
+/**
+ * @param {olx.FrameState} frameState Frame state.
+ * @param {ol.LayerState} layerState Layer state.
+ * @param {CanvasRenderingContext2D} context Context.
+ */
+ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerState, context) {
+
+  this.dispatchPreComposeEvent(context, frameState);
+
+  var image = this.getImage();
+  if (image) {
+
+    // clipped rendering if layer extent is set
+    var extent = layerState.extent;
+    var clipped = extent !== undefined;
+    if (clipped) {
+      this.clip(context, frameState, /** @type {ol.Extent} */ (extent));
     }
 
     var imageTransform = this.getImageTransform();

src/ol/renderer/canvas/vectorlayer.js

@@ -85,6 +85,12 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
 
   this.dispatchPreComposeEvent(context, frameState, transform);
 
+  // clipped rendering if layer extent is set
+  var clipExtent = layerState.extent;
+  var clipped = clipExtent !== undefined;
+  if (clipped) {
+    this.clip(context, frameState,  /** @type {ol.Extent} */ (clipExtent));
+  }
   var replayGroup = this.replayGroup_;
   if (replayGroup && !replayGroup.isEmpty()) {
     var layer = this.getLayer();
@@ -160,6 +166,9 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
     replayContext.globalAlpha = alpha;
   }
 
+  if (clipped) {
+    context.restore();
+  }
   this.dispatchPostComposeEvent(context, frameState, transform);
 
 };

src/ol/renderer/canvas/vectortilelayer.js

@@ -72,6 +72,14 @@ ol.renderer.canvas.VectorTileLayer.prototype.composeFrame = function(
     frameState, layerState, context) {
   var transform = this.getTransform(frameState, 0);
   this.dispatchPreComposeEvent(context, frameState, transform);
+
+  // clipped rendering if layer extent is set
+  var extent = layerState.extent;
+  var clipped = extent !== undefined;
+  if (clipped) {
+    this.clip(context, frameState,  /** @type {ol.Extent} */ (extent));
+  }
+
   var renderMode = this.getLayer().getRenderMode();
   if (renderMode !== ol.layer.VectorTileRenderType.VECTOR) {
     this.renderTileImages(context, frameState, layerState);
@@ -79,6 +87,11 @@ ol.renderer.canvas.VectorTileLayer.prototype.composeFrame = function(
   if (renderMode !== ol.layer.VectorTileRenderType.IMAGE) {
     this.renderTileReplays_(context, frameState, layerState);
   }
+
+  if (clipped) {
+    context.restore();
+  }
+
   this.dispatchPostComposeEvent(context, frameState, transform);
 };